top of page

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

Group 1.png

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

Low Fi P2 Home page.png

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. 

Low Fi p2 detail pg.png
Lo fi p2 return pg.png

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

p2 Detail Page.png
bottom of page