MIRROR
🪞
MIRROR 🪞
Mirror, a brick-and-mortar clothing store, was looking to move its business online and needed a new website as well as an updated logo.
Role: Solo Project for Client
Tools: Figma, Pen & paper
Platform: Responsive web
Timeline: 6 weeks
The Problem
Millennials and younger generations overall are short on time, are looking to spend less on clothing, and want to support brands that are transparent and ethical.
There aren’t enough inclusive, accessible, ethical, and affordable e-commerce clothing stores.
How might we provide a memorable & unique shopping experience?
Process
_Research
Market Research
Fast fashion utilizes trend replication, rapid production, and low quality materials in order to bring inexpensive styles to the public. New products are introduced multiple times in a single week to stay on trend.
Opportunities
Consumers’ demands for immediacy are increasing and production cycles are becoming quicker than ever.
So far, 69% of Americans have shopped online, and 25% of Americans shop online at least once per month. The majority (59%) of these shoppers bought clothing items, and 47% bought their first item on Amazon.
Competitive Analysis
User Research
Interviewed 4 participants between the ages of 17-18
All participants have shopped both in store and online
I synthesized the research findings in the form of goals, needs, wants, and frustrations for the users:
Overarching themes
Customer reviews play a big part in finalizing the buying decision.
The variety in photos and models are important for the user to understand how the product looks on different sizes and shapes.
Use of filters were important in narrowing search results as well as reducing the time take to find the right items.
Being able to edit items in the cart page was important for the user in case they changed their mind and didn’t want to go back to the product page to make the change.
Based on these insights, I developed the main persona for Mirror.
Meet Rhea Kumar ✨🙋🏽♀️
_Information Architecture
Card Sorting
I conducted a cart sort to understand how users were grouping certain items. This helped me to then define the information architecture of Mirror’s website. Here are some stats from the card sort:
8/14 participants (57%) completed the study.
Spent an average of 6 minutes.
Participants grouped cards into 7 categories.
Although the sample size could be larger, I still got some useful insights from participants’ grouping behavior.
I gathered the following insights:
There was a total of 56 categories with a median of 7 categories each.
Only 2 cards were paired together 100% of the time.
Using the findings from the card sort, I then proceeded to create a sitemap for Mirror’s website.
Flows
In order to understand the different actions a user would take once they land on Mirror’s website, I created a basic task flow.
Using our persona Rhea, I thought about the different scenarios she would encounter that would bring her to Mirror. I created user flows based on 3 different scenarios.
Scenario 1: Rhea asks friends for recommendations and one of them recommends Mirror
Scenario 2: Rhea is looking for stores that have a great return policy
Scenario 3: Rhea is on Instagram catching up on her feed when she sees a sponsored post from Mirror showing a dress she really likes
_Ideation
Low Fidelity Wireframes
I started sketching some ideas on how the website would look. In the first iteration shown below, I mainly focused on the homepage, category page, and product page.
Responsive Wireframes of Homepage
_UI Design
High-Fidelity Designs
During research, user’s prioritized the need for optionality and visibility for the price, reviews, and sizing of the products. There was a high value placed on delivery time, return policies, and sizing so a best size fit recommendation feature was a must.
Designs were then created across all devices to ensure responsiveness.
_Testing and Iteration
Usability Testing
Once I developed high-fidelity designs, I tested the designs with users. Here’s some stats:
4 participants (3 female, 1 males) : ages 22 - 26
None were interviewed in the user research phase
Overall test completion rate: 100%
Overall error-free rate: 5 misclicks total among participants
I created an affinity map in order to spot any trends that emerged from the testing session.
I gathered the following insights:
Users were intrigued by the try before you buy process and wanted to learn more
Users connected with the sustainability aspect of Mirror’s mission and responded well to the transparency
The cart page was very confusing to users since it prompted them to add items to try before you buy vs cart which resulted in them being confused on what they were actually getting charged for.
Confusing CTA verbiage made it unclear for users what page there were proceeding to since they were not familiar with the try before you buy concept.
Final Prototype
I implemented the feedback gathered from the testing sessions into my final design.
If I could continue this project (since no UX project is ever done)
I would get more diverse research & testing participants - about 95% of the participants I recruited for interviewing and testing identified as female.
I would create more iterations of low fidelity designs to allow for more possible solutions.
I would have gathered more data on the existing designs like time for task completion and user satisfaction. I would then gather the same metrics using the new design, and compare the two sets of data to gauge success of the new designs.