Mirror
My Role
UX/UI Designer
Team
Individual Project
Tools
Figma, Figjam, Whimsical
Mirror E-commerce Retail Platform
Project Duration: September - December 2021
User Research · Persona · Sitemapping · User Journey · Wireframing · Prototyping · Usability Testing · UI Design
Creating a successful online platform for an established retail company through research-driven processes.
Overview
Optimizing the users’ online experience to mirror its offline success
Mirror started back in 1994 as a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. It was my role to address how to bring this successful offline presence to a digital platform alongside designing a logo for the company that is modern and neutral enough to attract all types of people and styles. I tackled what makes a good online retail experience that could encourage both pre-existing and new customers to purchase online.
The Problem
Understanding a good online retail experience.
Mirror has to create a digital platform that can catch up with competitors that have had already had ample time in the space. Online retailers are already well established so the goal of the research would be to find out what features in online retailing are efficient for users and can convert sales, while figuring out what design aspects could put Mirror’s platform above and beyond. I conducted secondary research to find what competitors are already doing and what could be improved upon?
Research Questions
1. What existing features do users find convenient while shopping online?
2. What do competitors already do well?
3. What could they improve upon?
Who are we designing for?
I conducted preliminary interviews to find out more about our users and what needs they have when shopping online.
Research Objectives
1. Understand what existing features users find convenient while shopping online.
2. What is the context of user’s online shopping (device, time, reasons)?
Persona
I used people within my circle to conduct user interviews. It proved to be helpful that people I knew all frequented online retailers and had opinions about what their needs and frustrations were when it comes to online shopping. Even with limited resources, we were able to gather ample data and create a person to better understand user needs and frustrations. From there we created a person for our target audience.
What outcomes do we want to see from our product after researching our users?
Users view the online platform as convenient, trustworthy, and stylish.
Behaviors we are driving:
Clean layout that provides the user with trust and ease of use
High-quality photos and videos that afford the user to not have to view them in person before ordering
Through convenient shipping and returns, the user feels that there is no downside to ordering without physically seeing or touching the product
Behaviors we’re discouraging:
Frequent returns by not providing adequate information in terms of material, sizing, and image quality
A drop in user satisfaction by not providing a smooth and easy interface
Users want to buy something but find the shipping fee and return policy inconvenient
Task Flows & User Flows
From my research, I began creating user flows and task flows to make sure the website would function seamlessly through to the checkout process. I wanted to make sure users had multiple avenues to find exactly what they’re looking for. The faster a user could locate needed products, the better.
Task Flow:
User Flow:
Card Sorting
Before working on a solution, I wanted to know the best way to organize Mirror’s current physical inventory on the platform and how I could align the categories to users’ expectations. I recruited 5 participants to sort a set of clothing items to find common patterns amongst users.
An example of one participant’s card sorting and how they chose to organize the items provided.
Wireframing & Prototyping
From my research, I began wireframing to give an outline to our site layout.
Strong bold pictures and videos
I didn’t want to shy away from quality photos and videos so the user can know what to expect from the product as if they were shopping in person.
Shipping and return policies upfront
The policies are all provided on the home page so the users don’t have to search through footers to tedious text. Helps the user feel that the site is trustworthy and they can order without hesitation
The Solution
A preview of the prototype before usability testing.
Usability Testing
After prototyping we asked 4 participants to use and navigate the prototype to give their impressions and observe how they interact with the platform
Home page and overall layout
- 4 out of 4 participants appreciated the homepage layout and aesthetic
- 3 out of 4 found and appreciated the shipping and return policy laid out on the home screen
- 4 out of 4 liked the collection descriptions and would click through the learn more
- 4 out of 4 found the trending items useful
Navigation and search
- 4 out of 4 used the search function as a means to find the product
- 3 out of 4 would use the filtering option (was not built out)
- 1 out of 4 would click on the men category as a whole to browse
- 2 out of 4 expected filtering options to be on the left side
Product Page
- 2 out of 4 participants were unsure if the product was still available
- 2 out of 4 thought the sizing of size and color buttons were too large
- 4 out of 4 looked at the other recommended items below the produc
Cart
- 2 out of 4 participants were unsure if the product was still available
- 1 out of 4 expected there to be a “view cart” page
- 2 out of 4 did not notice they qualified for free shipping
Checkout
- 2 out of 4 participants wanted to see shipping cost breakdown
Iterations
-
![]()
Building out the filter function - many users say they would filter function for sizing and colors
-
![]()
Adding more product description and reducing product size boxes
-
![]()
Some users overlooked that they qualified for free shipping - highlighting and bolding it draws the user's attention.
-
![]()
Users expected a larger breakdown of the total to double check whether or not they qualify for free shipping.
Final Product
Introducing Mirror’s new online platform - a quick and painless way to purchase your favorite products from Mirror.
Browse the full catalogue
Explore the homepage and see Mirror’s brand-new catalog and trending items. The navigation provides quick and easy access to find all available items.
Search and filter
Search for any items needed by typing in the bar and also filter to narrow down further to find exactly what you’re looking for.
Quick & seamless checkout
The checkout was designed to make it as painless for the user as possible. Input all the checkout information all on one page.
Free shipping & return policy
Shipping and return policies are located right on the front page so users know when they meet the free shipping quota while also trusting Mirror’s easy return policy.
Prototype
The usability prototype is meant to test for the following user tasks:
Visit the homepage to see what’s new and trending while learning about shipping return policies.
Search and filter to narrow downsize, color, and style.
Quickly review and checkout items and see if your free shipping quota has been mnet.
Reflection
Although the usability tests showed how important the search function was and wasn’t anticapitated, in the end we were able to use that information to build it out futher.
Challenges
More time and participants for usability testing.
After the first round of testing, it would definitely help to test the new iterations to see how useful users find the filtering process. I learned that it could help to iterate in the middle of usability testing so you can fix it along the way and still have participants to test the product.
Key Takeaways
Users are willing to shop online as long as policies are easy and convenient
Designing with the user in mind and having clear upfront policies with how shipping costs and returns allow the user to shop through the online platform with trust.
Next Steps
More testing and actual inventory to see how more users would interact with the platform
Build out the store locator and inventory availability. Picking up in-store was another feature that could help users reserve what they want and pick it up/dropping off returns in-store opposed to dealing with shipping waiting it online. Surveying to see if users would use this feature could also help