Mirror---Desktop-Mockup.png

Note: This project was completed for Designlab’s UX Academy. While the company is not real, the research and decisions were based on real user feedback.

 

In 1994, Mirror opened its doors with a mission to make clothing accessible to everyone. Now, with over 400 stores around the world in 32 countries, their customers love that they offer inexpensive clothing in a variety of styles. With the goal to make clothing accessible, they needed to offer their clothes online. By offering their products on a user-friendly platform, it would allow them to sell clothing more efficiently to their online customers.

 
Project-Goals-FINAL.png

Goals

Mirror’s stakeholders had some goals they wanted to accomplish, including wanting a user-friendly responsive e-commerce website and a complete brand redesign including a new logo.

Based on Mirror’s stakeholder goals, I determined research goals of my own to ultimately meet Mirror’s objective.

Research goals included:

● Goal #1: Find out what Mirror’s competitors are doing right and wrong on their platforms

● Goal #2: Find out the user’s pain points while shopping online

● Goal #3: Find out what users expect from a site while online shopping and what contributes to a positive experience

 
 
Mirror---Competitive-Analysis.png

Secondary Research

Market Research was a key detail in understanding Mirror’s competitors and data about e-commerce shopping.

Statistics & Data

● Mobile accounts for approximately 65% of traffic to online fashion retailers, and about 57% of sales

● The majority of new consumers are within the 16-24 and 25-34 age bracket

● Approximately 87% of shoppers user reviews to decide wether to purchase an item online, and 74% of shoppers look to their social networks for considering a purchase

Personal Findings & Thoughts

● Quality photography is important when showcasing the product

● Prominently displaying reviews, details, and sizing about the product is important

● Easy filtering is necessary

 
Mirror---User-Interviews-(Quote).png

User Interviews

I conducted 4 interviews to gain an understanding of their pain points, wants, and needs when it comes to shopping for clothing online. Conducting interviews allowed me to gather data and the ability to empathize with the online shopper.

Common Behaviors & Findings from the research:

● Product reviews influenced their purchasing decisions; They like the option to pay with something other than a debit or credit card; They’ll click to view on the ‘suggested options’

Wants & Needs:

● High-quality and fashionable clothing items at a good price, ability to easily filter and navigate to find specific clothing items, and a variety of payment options.

Opportunities for Improvements:

● Offer information about sizing specs; Offer different shipping options (including a free option) so the customer can try-on purchased items risk-free; Ability to take a closer look at the product and details without necessarily having to click on the item (and then inevitably click back to previous page and lose your place in your search).

 
Mirror---Persona-and-Empathy-Map.png

User Persona

I developed a user persona based off of the Market Research and Interview data. By empathizing with this user, I was able to better understand their pain points, needs, wants, goals, and what their busy day-to-day life might look like on a deeper level.

Amanda – The Young Professional / Female / 28 yrs old

Due to Amanda’s busy work and personal life, she prefers to try things on, but with the ease of exchanges and returns it’s easier to shop online so she can shop when and where it’s convenient for her.

 
 
Mirror---Site-Map.png

Site Map

After gaining a better understanding of the needs, wants, and pain points of the potential user, I then shifted my focus to the navigation and features of the site. I gathered data from user data based on a Card Sorting exercise. This research allowed me to develop a hierarchy and categories that make sense to the user within the site.

 
Mirror---User-Flow.png

User Flow

One of Mirror’s stakeholder’s goals is to allow user’s to purchase clothing online more efficiently. Building out a User Flow allowed me to gain a better understanding of how the user could get from the Homepage to Checkout. Building this User Flow allowed me to identity a user’s path to easily purchase an item on Mirror’s website.

 
Mirror---Wireframes.png

Wireframes

User Interviews and User Flows helped to identify what features were important to the user. Mid-fidelity wireframes were designed based on those findings. Responsive designs were designed for the pages that were key to the user’s checkout process. Those pages included the home page, category page, product page, cart, varying pages of the checkout process and the confirmation page.

 
 
Mirror---Branding.png

Branding

Mirror was looking for an updated, modern, clean look that appealed to a wide variety of customers. The logo, colors, typography, and photography were created and used to align with the vision of stakeholders.

Mirror’s modern new logo is complimented by the variety of color choices meant to appeal to a wide range of ages and genders. The type choices are modern yet easy to read. The icons created for Mirror’s website are easily recognizable and allow for the user to navigate efficiently.

 
 
Mirror---UI.png

Responsive Design

I designed the checkout process from beginning to end for web, tablet, and mobile. Once designed, I tested the usability and potential pain-points of the checkout process of the web version by asking participates to perform 3 tasks.

The tasks asked of the users were as follows:

● Task #1: Navigate through the site to find a Women’s Pink Floral Blouse"

● Task #2: Once you’ve found the item, select a size Medium, add to cart, and proceed to checkout.

● Task #3: Purchase the item using guest checkout.

 
Mirror---Affinity-Map.png

Affinity Map

Three users participated and performed each task to completion. I created an Affinity Map based on the user test results. I noted the patterns made by the users, improvements that could be made, and the success.

Test Methodology

● In-person testing: 2

● Remote testing: 1 (user recorded their screen)

Results Summary

● Test Completion Rate: 100% from each participant

● Error-Free Rate: 80%

● Paint points: Approximately, 2 main pain points

 
Mirror---Final-Prototype.png

Final Prototype

Iterations to the prototype were made based on user testing and feedback. Mirror’s updated prototype can be found here: invis.io/8ZT2TCFU9FQ

Next steps include:

● Retest the updated prototype

● Final round of iterations

● Ship and launch