Persona: Jonathan
Jonathan is a busy professional who is looking for a straightforward and quick way to design custom cards.
Paper Wireframes
I created clear focal points and established a distinct visual hierarchy to guide the user through the main flow.
Paper Wireframe: Screen Sizes
I created wireframes for mobile and tablet screens to maximize accessibility and convenience.
Sitemap
One of the primary pain points for users was overwhelming website layouts. I grouped pages where users would look for them to establish a self-explanatory informational architecture.
Digital Wireframe
My initial wireframe showed a breakdown of the customizable card elements. Some users still felt overwhelmed while trying to create a design. I added a carousel of templates to provide additional scaffolding for users that needed more guidance.
Digital Wireframe: Mobile
To optimize the design for a mobile screen without sacrificing key information, I presented the design elements using cards, increased the size of the CTA button, and reduced the number of templates on the carousel.
Low-fidelity Prototype
This low-fidelity prototype shows the primary user flow of creating a deck and checking out.
Creativity Club lo-fi prototype
Usability Study Findings
Design Tool Saving
Users wanted the option to save without checking out
Navigation Cues
Users weren't aware of some interaction elements
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
USA, remote
Length:
20-30 minutes
Usability study Parameters
Before Usability Study
After Usability Study
Mockups: Design Tool
Based on the insights from the usability study, I made changes to improve the user’s design journey. I added a save button to save progress at any point. I also added a breadcrumb trail (just above the green arrow) to let the users know where they are in the process.
After Usability Study
After Usability Study
Mockups: Homepage
To make navigation easier, I added elevation to interaction elements like the cards from the carousel and the main CTA button
High-fidelity Prototype
My hi-fi prototype follows a similar user flow the the lo-fi prototype. It includes design changes from the usability study insights and several of my own that I thought would improve the user flow.
Creativity Club Hi-fi Prototype
Landmarks
I used landmarks such as navigation bars and footers for users who need assistive technologies when navigating the site
Visual Hierarchy
I created a visual hierarchy by using different heading sizes, which are annotated for screen readers.
Next Steps
Conduct another usability study on the new website
Iterate on current features and ideate on new ones
What I Learned
I learned the value of user research and usability studies. In my initial designs, I made assumptions about the users within this niche market: who they are and what they would look for in a luxury custom cards company. Getting concrete feedback from real people was integral to developing a thoughtful, functional website.
