CASED, END-TO-END WEBSITE
ROLE:
UX Designer, UI Designer, UX Researcher
TIMELINE:
1-month start to finish
THE PRODUCT:
Cased is a custom phone case website that strives to offer stylish/trendy phone covers that can be customized to fit you and your lifestyle. They ship within the US. Before Cased, customers struggled to find a phone case that could be customized, yet that protected their phone.
THE PROBLEM:
Users need a simple way to customize a phone case that will provide an accurate proof of the product.
THE GOAL:
The Cased site is created with simplicity in mind. Suggested designs make customization easy and fun.
RESEARCH:
Summary:
I conducted interviews and empathy maps to understand the users I’m designing for and their needs. The primary user groups were identified as professional men and women ages 18 to 45 years old.
5 participants participated in an individual interview and moderated study. A competitive audit was also completed during the research phase.
This user group confirmed initial assumptions about the need for simplicity while using the site. They also expressed additional concerns about creating a custom order.
DEFINE:
🗺️Aggregated Empathy Map:
☹️User's Pain Points:
Time - Users have had bad experiences with custom orders in the past. They want the customization process to be easy to use.
Accurate Proof - Users want a “lifelike” representation of the item, prior to ordering.
Realistic Expectations - Setting realistic expectations regarding the product and shipping.
👤Persona:
Using the results of secondary research and the interviews, I created a persona, Sarah.
❗Problem statement:
Sarah is a marketing associate who needs to design a phone case to fit her personal brand and lifestyle.
🗺️User journey map:
Mapping Sarah’s user journey revealed how helpful it would be to keep the process fast and efficient.
DESIGN:
📃Paper wireframe: Taking the time to draft iterations on paper ensured that the elements that made it to digital wireframes would be well suited to address user pain points. For the home screen, I prioritized the shopping page on the homepage for easy browsing.
💻Digital wireframe: As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Low-fidelity prototype - The low-fidelity prototype connected the primary user flow of the shopping and customizing section, so the prototype could be used in a usability study with users.
>>View Cased Lo-Fi prototype upon request.
📗Usability study findings:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings:
Adding ‘Back’ Button - If the user needed to change their designs I added a back button on the proof page.
Spacing Out Buttons - Users struggled with the close proximity of the buttons. I added extra space to avoid this issue.
Less Typing - Users struggled with typing the size of their device and suggested that a drop-down menu be added.
TEST:
Early designs allowed for some typing, but after the usability studies, I added a drop-down menu to select sizing.
The usability study revealed frustrations with the closeness of the “search” and “cart” icons.
The high-fidelity prototype - The final high-fidelity prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
>>View the Cased Hi-Fi prototype upon request.
♿Accessibility considerations:
Provided access to users who are visually impaired by adding alt text to images for screen readers
Used icons to help make navigation easier
Used high-contrast colors to ensure easy readability
CONCLUSION:
THE IMPACT:
Our target users shared that the design was visually pleasing and reflects users' need for simplistic and easy-to-use designs.
WHAT I LEARNED:
While designing the Cased website, I learned that even a small design change can have a huge impact on the user experience. Usability studies and peer feedback influenced each iteration of the website’s design, which is mandatory to address the real needs of our users.
NEXT STEPS:
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed
Conduct more user research to determine any new areas of need
**This is a hypothetical case study**