The Company
Fringe is a boutique store in a small town that also offers online shopping. This was their original landing page.
Overview
Online shopping can be really fun or really stressful depending on the user's experience with the website. Users find it hard to know if an item will fit, along with the quality being as good at the photos. Another big challenge for users when online shopping, is not knowing what to do if an item sadly doesn't work out.
​
Keeping all of those challenges in mind I resigned this online clothing website after taking a deeper dive into finding solutions to help navigate these issues.
My Role:
User Researcher/
UI Designer
Time Line:
2 weeks
​Methods & Approach:
User Interviews, Affinity Mapping, IA, Personas, Journey Mapping, C&C Analysis, Wireframing, Mid & High Fidelity Prototyping, Usability Testing
Tools:
Figma, Trello, Maze, Slack,
Google Suite
Understanding the Online Shopper's Needs
(User Research)
In order to better understand the needs of the user, I first needed to collect some insights, so I conducted a series of 4 semi-structured interviews of current online shoppers. ​
Top Three Painpoints
Issues with quality of items
Issues with items not fitting
Issues with Returns and Exchanges
I then conducted a moderated usability study with 4 participants asking them 2 tasks to see how easily they navigated through the current site.
Task 1: Find an outfit that you would like to wear this weekend for a night out.
Task 2: Add to cart and proceed as if you were going to purchase it.
4/4
completed the task 1
4/4
completed the task 2
While all the users were able to finish the tasks they still were weary of actually buying any items. Since the Usability Studies were moderated I was able to gather insights on room for improvement.
4/4
mentioned they didn't see a return or exchange policy. They didn't want to buy from a store not knowing that info.
3/4
mentioned the top navigation bar was hard to read when you hovered over it. Along with it being weirdly laid out.
4/4
there was no sizing chart or reviews to know about the fit of items.
4/4
Mentioned there was no way to filter through items easily
After synthesizing all the data from the interviews and studies I was then able to come up with a problem statements, HMWs and build a persona.
The Problem
Users: want to make sure when online shopping the clothes they purchase will fit, be of good quality, and can be returned if needed.
The Business: Want more customers to buy from their online store, but not sure what will get customers to do so.
The Persona
The HMWs
HMW make it easier find items?
HMW provide our return policy?
HMW have customer reviews on items?
HMW make our customers feel confident in their size choice when purchasing from our site?
HMW get customers to feel confident in purchasing from our site?
HMW build trust with our customers?
​
HMW show we are an easy site to return to?
​
HMW show sizing for items?
​
Solving with Design
I designed a landing page, with a more visible 1 level navigation bar. Made sure the feedback from the navigation bar was clear. I also added an about us button to the nav so users could learn more about the company and their policies. I added a search bar at the top as well so things could easily be searched for.
On the item page I created an area where customers could leave reviews and rate the items quality.
I also designed a return / exchange policy page so users can easily access it and know what they are.
Testing out the Design
I used maze to create an unmoderated Usability Study on my Mid-Fi prototype.
​
​
Task 1: User finds a dress, adds to cart, then checks out
​
Task 2: Finds Return Policy
Task 1
10/13 testers completed task directly, 3 indirectly, but all finished task
Task 2
13/13 completed task directly
Due to the amount of testers being able to navigate easily through the Mid-Fi prototype. I went straight into Hi-Fi and adding in color and the finishing touches.
You can see the finished prototype here.
Hi-Fi Iteration
