Tools Used
Figma
Maze
Project Timeline
April 2022
3.5 week concept solo project
Deliverables
UX Research
Interactive Wireframes & Prototype
Usability Testing
My Role
UX Researcher
UX/UI Designer
Interaction Designer
Overview
Background: ShopUntitled is a fashion boutique with a physical store in New York City and a website that features curated artisanal, avant-garde clothing for men and women from emerging artists and international designers. They needed to identify issues with their current site and improve the online shopping experience for their new and existing customers.
Methods and Approach
Audit of the current site
Competitive analysis
User interviews (5)
Persona creation
Greyscale wireframes
Usability testing (7 users)
High-fidelity prototype design
Problem
ShopUntitled website has lots of unique and cool products to offer. However, shoppers feel overwhelmed by its organizational structure and layout, and tend to give up after a few minutes of browsing. Additionally, shoppers hesitate to purchase due to lack of reviews.
The initial audit of the site showed that the site had:
Lots of products and no filtering options to narrow down choices
No way to sort products
Poor visual hierarchy on Product Detail Pages caused by
Same font used throughout the page
No colors used on action buttons
Too much white space
Product images are too large and make it difficult to browse
Many sold out products are shown together with available products
Additional images on detail page are cumbersome to click through
Site doesn’t allows shoppers to leave product reviews
How might we make it less overwhelming for the users to browse through products and make the product detail pages easier to read?
Solution
Improve the organizational structure and layout of the product detail pages to make it easier for shoppers to browse through the site and find information they need about products quickly and efficiently.
Adding Sort & Filter
Having these features will help customers narrow down options and reduce the cognitive strain of looking through so many products
Creating contrast and visual hierarchy
Make the product detail pages easier to read by adding more contrast and visual hierarchy through better font choices and bold colors on action buttons
Adding Reviews
Help shoppers make more informed purchase decisions by adding a reviews section and a size guide
Research
Competitive Analysis & Insights
I compared ShopUntitled with 3 popular online retailers and have found that all of them included features like sorting by price and filtering by various categories. All of the retailers offered Wish Lists, including ShopUntitled, however unlike ShopUntitled, you could access the Wish List on these sites from the top navigation menu. I decided that users of ShopUntitled would also benefit from this feature and included it in my designs. Interestingly, none of the retailers I researched allowed customers to leave product reviews, a feature that was important to my user interviewees and, therefore, also incorporated in my design.
User Interviews
I conducted 5 user interviews to learn what was important to online shoppers, about their overall shopping behavior, and what they found to be frustrating in the experience.
Research Synthesis (Affinity Mapping)
Main Insights:
If there are too many product pages to go through and no way to sort and filter them, shoppers tend to give up and leave the site
Shoppers like to use Wish Lists to add things to the list and decide later
User Quotes
“I read reviews to find out how the item might fit me”
“I read product descriptions thoroughly before deciding to buy”
“If I can’t tell how the item will fit or if there is not enough information about the item, I won’t buy”
Persona
Ideation
Grayscale Wireframes
Based on the research findings I’ve gathered from the competitive analysis and user interviews, I designed mid-fidelity grayscale wireframes and a clickable prototype in Figma. I focused on adding features like sort and filter, adding wish list/favorites to top navigation, creating a reviews section, and improving the layout of the product details pages.
Usability Testing
I further tested my mid-fidelity prototype with 7 participants on Maze.co. The overall goal was to test if the participants would find the site easy and intuitive enough to navigate and gather valuable insights from them at the end.
Results
85% Usability Score on Maze.co (measures the ease of your maze by calculating key performance indicators: mission success & duration, test exits, and misclicks.)
Most participants had no difficulty completing the tasks and found the site to be intuitive
1 participant got lost and couldn’t complete the tasks
Tasks
Navigate to men’s jackets and filter by leather jackets
Purchase a particular jacket in size medium
Add a specific jacket to the Wish List and then check what’s in that Wish List. Then, proceed to purchase.
Insights & Iterations
Created additional ways to get to product pages so that users had more pathways to products
Linked the shop logo to the home page, so that users could get to home page from any screen
Added light background color to the footer section to make it more aesthetically pleasing to the eye
Fixed some alignment issues
High-Fidelity Frames
Final Prototype
Reflections & Next Steps
This was my first website redesign project and I learned a lot about UX throughout the process. I’ve always been interested in fashion, so the idea of working on the online clothing store was very exciting. It was very interesting to interview different people and see how shopping habits vary from person to person. Everyone had their own unique approach to shopping and it was quite a challenge to sift through all this information and figure out what was frustrating to all the shoppers.
My main challenge at the beginning of the project was to figure out what was actually “wrong” with the website, because at a first glance it looked like a nice website with a cool UI. However, problems became evident after a thorough audit and talking to people I interviewed and who have used the site.
Moving forward, I would like to do more work on the prototype and add search bar functionality, as well as additional filters and sorting features. I would like to add animation to the Wish List “heart” and make a functional size guide that users can interact with.