MIRROR
Overview
Mirror is a clothing store founded in 1996 and now has 400 stores in 32 countries. Currently, Mirror only has brick-and-mortar retail locations but is looking to expand online. The goal of this project was to help the store move online by designing a successful responsive website.
Problem
I wanted to help improve Mirror’s branding and overall design as the company sought to become more compatible with their shoppers by going online. This problem was particularly challenging as Mirror’s customers consisted of a wide range of users with varying backgrounds.
Solution
First, I researched competitor ecommerce sites to understand more of what users look for when using their favorite online shopping websites. Then, I gathered data from interviews and reflected with my mentor and classmates on what designs worked best for target users.
Role
Product Designer
Design Process
The process of my design started with empathizing with users and understanding what their thoughts were on shopping online. Then, I defined the problem and came up with ideas for the solution. Finally, I created a prototype and tested it until it was successful.
Timeline
I followed the classic design thinking process for this project as listed below. The following sections of this case study elaborates on each of the steps that was taken as part of this process.
Empathize
To start the project of moving Mirror online, I first compared different clothing stores and looked at their website designs. I was able to observe design features that were consistent across each website. From these notes, I developed survey and interview questions to yield deeper insights into users’ perceptions of these sites’ usability and navigation. This helped me understand what users want when shopping online and informed the way I designed my wireframes.
Research Findings
There are both pros and cons to shopping online vs in-store.
Online: Users can shop anywhere and anytime, but have a hard time dealing with shipping and returning.
In-store: Users can see and try products, but have a hard time finding items they want.
Target Audience
Ages 16-45
Interested in “clothing on a budget”
One-on-One Interviews
3 interviews with individual users in the target demographic
20 prepared questions
Shadowed each interviewee on their favorite clothing site to capture how they shop
Empathy Map
User flows were created based on the responses that were received during the interview process.
Define
Through my research, I was able to understand what users look for when shopping online as well as what they like in stores. I was also able to see what type of categories they look for when shopping online.
Key Words: Clean, Modern, Simple, Welcoming, Memorable
Navigation Menu
“I like it when categories of the menu are clean and simple to understand.”
-Jed
When looking at the card sorting results, I was able to see categories that are commonly paired within the navigation menus.
Sales and Promotions
“I always shop online because I am able to compare prices and look for sales when I shop.”
-Abbi
All users first look for sales and promotions when they are shopping online. Having the ability to compare prices with other stores causes customers to want to shop online more.
Looking at Reviews
“I only look at 4.5-5 star items in the reviews and then I can make my choice faster.”
-Abigail
Users often looked ahead to reviews of products and which helped them in the process of buying online.
When trying to lay out more of Mirror’s website, I created individual personas based on the results of my interviews. These personas helped me identify what could make Mirror’s web design successful.
Persona
Below is a sample persona that I created from my research for Mirror.
Task Flow
Within following user research I created tasks flows to help define Mirror’s website.
User Flow
Above shows the step to step process of Mirror users and how they shop online.
Ideate
While reflecting on the various personas, user flows, and wireframes, I prioritized design decisions based on the top recurring feedback from the user research phase. Some of the findings that I integrated into the website included adding social media posts and reviews on the homepage.
Key Ideas
Personalize customers’ experience by encouraging them to sign up for accounts to save personal information (e.g. saved payments, etc.)
Users should be able to like their favorite products and receive recommendations
Users should be able to easily access items on sale and other promotions
Include a link to “Sale” in the navigation menu
Ipad Low-Fi Sketches
Mirror Sitemap
Prototype
I wanted to focus my prototype on providing an easy way for a user to navigate through Mirror’s website. I created mockups and worked with my mentor to finalize the design. I looked back on the ideas that Mirror had and applied them.
Steps
Created a high-fidelity prototype with multiple screens
Created a homepage, navigation menu, product page, and side menu
Conducted user testing by observing interviewees shop for assigned items using the prototype to assess the usability of the website design
Testing Process
Tasks
The interviewee is shopping on a budget of less than $25. They have to find two products on a shopping list in the order that they were given.
Shopping list:
Wrap Around Tee
Loose Turtleneck
Challenge
There were technical problems when the interviewee used a tablet to try the prototype. There were also misunderstandings with the order of the shopping list and when users wanted to select other items.
Reflection
Overall the users enjoyed looking for their items, but wanted more flexibility in being able to click throughout the prototype. In the end I asked the user some reflection questions and was able to understand more of what users were looking for.
Check out the prototype below:
“I loved the design and look of the website! I wanted to continue shopping and look for more items!”
-Mercy
Reflections
Have Open Ears
Hearing and understanding the way that users navigate through a page can help with starting to move your store online. I learned that paying closer attention to the user responses from the first interview could help with reaching the final website design. This can help users return as loyal customers based on a memorable and easy-to-use experience.
Future Steps
For future steps, I want to continue revising and expanding the prototype with additional testing and features until the website officially launches.