Mirror Clothing
Student Project 2022
A responsive commerce site where customers can conveniently shop.
Role: Product Designer
Tools: Figma, Zoom, Optimal Sort
Duration: 80 hours
Background
Mirror is a successful clothing store founded in 1994 with over 400 stores around the world. They were finally ready to take their business online since they only had a very outdated informational website that only listed locations, promotions, and a bit of background about the company. They did not want to keep anything that they had and wanted a new logo and an e-commerce responsive website where they can sell their products online.
Problem Statement
Mirror’s customers want the convenience of an online store.
Challenge
Design a new logo and an e-commerce responsive website where they can sell their products online.
Research
Goals
Understand what motivates to people shop online.
Discover how people choose which online stores to visit.
Discover users' biggest pain points when ordering online.
Methods
Market Research
Competitive Analysis
User Interviews
All about e-commerce!
Key Takeaways
A personalized experience is important to users
Attractive UI is important to keep users on the site
Users are using mobile more than desktop
63% of shoppers will stop buying from brands that aren’t using personalization tactics
38% of shoppers will leave a website if it looks unattractive
Mobile commerce statistics say that in 2021, 73% of all online sales acme through the mobile channel
Strengths
Fashion design team
Strong brick and mortar
Strong online presence
Weaknesses
Website is difficult to navigate
Ethical concerns of fast fashion
Sizing up the competition
Strengths
Strong online presence
Customer centric approach
Inexpensive products
Weaknesses
Lack of originality
Ethical concerns of fast fashion
Strengths
Strong brand name
Customer centric approach
Variety of products
Weaknesses
Controversy
Limited brick and mortar
User Interviews
-
Participant #1
PRODUCT MANAGER
25
Female -
Participant #2
ENGINEER
24
Male -
Participant #3
WEALTH ADVISOR
25
Female -
Participant #4
ACCOUNT MANAGER
26
Female
“I just feel like you don’t know if [the clothes] are going to be nice. You can obviously look and see if it’s acrylic or wool, which I always do, but you just never know. That’s my biggest pain point for online shopping, just not knowing what you’re going to get until you get it.”
Participants want to know more about products before they order
Participants admitted that they often end up buying things that they saw on social media
Participants said they often pick where to online shop based on how much they like the website and will exit if it’s too complicated
Key Takeaways
After gaining a deeper understanding of how user’s feelings and habits associated with online shopping, I created a persona to reference and help guide my design choices
Meet Rebecca!
To gain more empathy with our users and understand the broader influencers in their lives, I created an empathy map based on our persona “Rebecca”.
What influences our users?
I decided to do a cart sorting exercise to gain a better understanding of how my users expect to see a clothing website organized. I went went with the open card sorting method to see what language the participants used on their own.
What do our users expect?
Majority of participants put outerwear into a category labeled “Jackets and Coats” as opposed to what I assumed would be “outerwear”
Participants consider “loungewear” to be a different category than other tops and bottoms
Key Takeaways
Mapping it out
Next, I wanted to map everything out by creating a site map. I used the information from my research and card sorting to plan it out.
Finding: Users more commonly refer to outerwear as "jackets and coats"
Decision: Name the category "Jackets and Coats"
Finding: Users expected there to be a different category for comfortable clothing
Decision: Create a "loungewear" category
What’s the user’s path?
To help understand the steps that a user would go through to complete the main flow, I created a task flow for purchasing a shirt. Online shopping isn't anything new and I wanted to make sure the flow would be familiar and easy for the user to navigate.
Wireframes
I created my wireframes by sketching on paper and then built them on Figma. I referenced all of my previous research and work to help make my design decisions
Finding: Users want to know as much about the clothing as possible
Decisions:
Easily accessible "details" section on the product pages
Easily accessible reviews from previous purchasers on the product pages
Linked social media posts on the landing page to see the clothes in different environments
Logo
Through competitive research and sketching, I designed the Mirror logo. All of the top competitors use simple logos with the store's name. I knew I wanted to do that too but add something fun. That's when I decided to flip one of the Rs so it would appear to be a reflection of the other. It felt like the cleanest way to add a bit of flare.
Simple, but fun!
Here is the style tile I created to show the different elements and overall vibe I wanted the site to have. I knew I wanted it to be simple enough that the clothing would be able to pop but also have some fun elements that would make it stand out from the crowd.
Bringing my designs to life
With my style tile and wireframes in hand, I was ready to create some high fidelity mock ups. I started with the desktop pages and then stacked everything up for the versions.
Prototype
From my research, I found that majority of users are shopping on their mobile devices. For the sake of time, I decided to only go forward with the mobile version for my prototype and usability testing.
Check out this version of my prototype here!
Finally showing our users
Time to see if it works! I was excited to finally get my designs in front of some users and see what they thought.
These usability tests were done in person and over zoom using my Figma prototype.
Test Objectives:
Test if a user can easily perform the main flow
Discover any confusion and/or pain points
Scenario for participants: You misplaced your favorite black sweatshirt and are looking for a new one to replace it. I want you to show me how you would find one and purchase it. Please select size medium.
Learn more about the results of the tests below with the affinity map!
Users don’t like clicking
I created an affinity map to help organize the findings from the usability tests in a more digestible way.
Key takeaways
Overall participants had an easy time going through the flow
Participants couldn't tell if their item was added to cart or not
Particiants did not like all of the dropdown menus
Reducing the clicks
Finding: Users do not like clicking!
Design Decisions:
Moved the search button to the main navigation bar to reduce clicks it takes to find it
Added a category carousel to the landing page for quicker access
Finding: Users don't like dropdown menus because, again, they do not like clicking!
Design Decisions:
Switched the color and size options to buttons instead of drop downs to reduce clicks
Finding: Users were clicking "add to cart" twice because they didn't know if their item had been added.
Design Decisions:
More feedback after clicking “add to cart” by having the button change colors and give a confirmation message
Finding: Users thought the stars for the ratings looked weird.
Design Decisions:
After some competitive research, I decided to simplify the stars to one color for a cleaner look.
What’s next?
Since this was a student project and Mirror is a fictional company, this is as far as these designs will go. But, if I were to move forward, my next steps would be:
Test my iterations
Build and test the account feature
Handoff to developers
Ongoing testing and iterating the site based on customer feedback and analytics