Mirror
TYPE
Ecommerce Responsive Web
OBJECTIVE
New responsive site, logo & brand
TIME
100 Hours
VIEW PROTOTYPE
Mirror is a fictional fast fashion retailer that has 400 stores in 32 countries. Mirror has been very successful in their brick & mortar locations but they were looking to create a digital presence. Mirror sells quality clothes to men, women, and children for all occasions at an affordable price point.
The goal of my research was to understand users motivations and pain points when they shop online. Specifically in these areas:
Experience: Navigation, search, filters, adding to cart, wishlist etc.
Branding: Imagery, Hierarchy, Perceptions
Conversion: Understanding path to conversion, why do users convert/ not convert
I started by exploring the latest trends in ecommerce as well as researching Mirror’s direct competitors. I wanted to get a better understanding of each competitor’s features as well as strengths & weaknesses.
I conducted 7 interviews with 4 women and 3 men between the ages of 30-50. All were online shoppers. Here were my overall findings:
Needs:
Ease of Use: Shopping online should be convenient and items should be easy to find
Free & Fast Shipping: Opportunity for Buy online & pick up in store
Product Navigation Categories & Filters: Mens, Womens, Sale. Filers like color, size, and brand
Sales & Promotions: Users need to know they are getting the best deal. Respond well to email promotions to get them to shop.
Opportunities for Improvement:
Easy to understand sizing on the site: Different methods to best communicate the fit and size of a product should be explored.
Ability to “feel” or “try on” online: Participants mentioned that they would like to be able to touch or see the item in person before they buy and do not feel confident about their purchase online.
Based on the research and data gathered from my interview findings, I developed a persona, Brad. I created an empathy map and storyboard in order to understand his motivations & pain points. Brad is a user who wants to feel confident in his fit as well as confident he is getting the best deal on his purchase.
Based on my research, persona & empathy map exercise, I wanted Mirror responsive site to focus on these key product features:
1) Fitting Room Feature The Fitting Room feature would allow customers to virtually “Try On” an item by submitting their measurements. In this feature the images and videos would dynamically change to match the size of the customer. The recommendations and reviews would also change based on users who had similar measurements.
2) Flash Sales
3) Personalized Recommendations
I created my site map by using research from my interviews as well as a card sorting exercise. Through my research & product feature focus, I wanted to minimize the number of options for the top level navigation and have easy access to sale. Through my cart sorting, I found that most of my responders shopped by product category grouped by gender. I also saw a big trend for users to shop by Occasion.
.png)
I looked at 3 different scenarios based on new & existing customers and how they would enter the website through the homepage, category page, and product detail page.
.png)
After sketching various versions of the homepage, I started creating my wireframes in sketch.
One of the features of my design was the focus on flash sales so I included messaging on the homepage as well on the category page to draw users in.
The Fitting Room feature was created on the product detail page to allow customers to virtually “try on” the item they were browsing. Before the user is able to view this section, they fill out a few questions about their measurements.
I used my research as well as my background in personalization to provide Product Recommendations throughout the site to help users find similar and encourage cross-sell.
Mirror was also looking for an updated logo & brand. I wanted users to feel confident when they shopped on the Mirror site, so I designed a logo that conveyed a sense of bold confidence. I also incorporated a “flash” element into the branding.
“Shop ConFITently”
Using the updated branding and style kit, I created the high-fidelity wireframes in Sketch.
I first created a prototype using sketches and uploading them into POP. This exercise gave me an understanding of how the site would function on a mobile device.
Afterward, I uploaded my High fidelity wireframes into Invision
Interviewed 5 people between the ages of 26 and 45 and observed them through as they navigated through the site using the Invision prototype.
My goal was to identify the pain points for users when browsing & navigating through the site and to test if users understood the Dressing Room feature.
Overall, the tasks on the homepage, category navigation, and category page were completed successfully.
I received helpful feedback on The Fitting Room feature. While most people said that they would find this feature useful, there was some confusion on the expectations and titling of the features.
After completing usability testing, I made high priority revisions gathered from the feedback I received. I also changed the Fitting Room feature to have a “Welcome” introduction page which explained the feature in more detail.
After revisions were made, I prepared the high-fidelity prototype for handoff using Zeplin.
