Following extensive user research (see previous case study) I designed a new product to help our customers save time and generate more leads.
My Role
- UX Design – user interviews, wireframes, usability tests
- UI Design – mockups, prototypes
- Front End Development – HTML, CSS
- Marketing – Promo videos and animation
Wireframes
I’ve written extensively about my approach to wireframing in the Dashboard Redesign case study.
Templating System
I designed multiple templates so people could upload their content and instantly have a beautiful resource library of their own.
![](https://kevmcg.com/wp-content/uploads/2024/03/original-6efd9067ce6ec04fd3526dc4c00ef04f.png)
![](https://kevmcg.com/wp-content/uploads/2024/03/original-83f5bc5659f1621eed1de8ee977228d1.png)
![](https://kevmcg.com/wp-content/uploads/2024/03/original-798d141e60caa29c1308bad1d7acfaf7.png)
![](https://kevmcg.com/wp-content/uploads/2024/03/original-bf408f66b4c2c6be08e4fedcb63c44c5.png)
User Interface
Since our core users were small business owners it was important that we didn’t overwhelm them with too many options in the interface. I designed a series of contextual menus that would appear when a user clicked on a specific item on screen. Customers would use these menus to help users change colors, fonts and imagery.
![](https://kevmcg.com/wp-content/uploads/2024/03/original-bdd8950d8114545e6e5868d9b1e9e757-1024x538.png)
![](https://kevmcg.com/wp-content/uploads/2024/03/original-bfdc520f9258abd1a3d497a106d87864-1024x662.png)
Designing For Heavy Use
From user interviews I knew that some customers planned on uploading thousands of resources to a single library. This meant that the ‘resource management’ view of the library was hugely important. I designed a system that facilitated both high level and low level tasks so a user could work efficiently from a single screen.
High Level Tasks
These tasks include:
- Reorder resources
- Find a specific resource
- Group resources together
- Delete multiple resources
![](https://kevmcg.com/wp-content/uploads/2024/04/original-16da43dcd737208f8564b400b0c62747.png)
Low Level Tasks
These tasks include:
- Change resource title
- Change resource thumbnail
- View resource file
- Change opt-in settings of a resource
![](https://kevmcg.com/wp-content/uploads/2024/04/original-1427ba550faab1d67e83112bdc356ad9.png)
Iconography
I chose Font Awesome’s ever expanding library of icons to help guide users throughout the interface.
![](https://kevmcg.com/wp-content/uploads/2024/03/original-5ad67b6ac30188ad22c4b091a6ab4bcb-1024x662.png)
Front End Development
I built the HTML and CSS structure of my designs with Bootstrap. This meant that I could make sure that the mobile view was perfect before the developers took over.
![](https://kevmcg.com/wp-content/uploads/2024/03/original-049d884c960b58639a9ced36bf87b0cb-1024x717.png)
![](https://kevmcg.com/wp-content/uploads/2024/03/original-2f806a2ad4224c35135055071668ab55-1024x662.png)
Prototyping / Interaction Design
For a project like this flat mockups only scratch the surface. I needed to experiment with various solutions to the numerous interactions that would take place with this type of product.
This is a Figma Prototype that I created to help with a discussion around menu elements in the new product:
Ultimately this iteration didn’t make it into the final product but the prototype did help to illustrate problems that were not immediately apparent when working with flat mockups.
Animation
I created a series of custom animations and videos that were used in promotional materials and help docs.
![](https://kevmcg.com/wp-content/uploads/2024/03/original-8794ae10152d998d1d2310a58e57a6a8.gif)