MIRROR
Bringing a classic brick-and-mortar fashion retailer digital with a responsive e-commerce site.
Project Overview
Challenge
Mirror is a fictional clothing retailer founded in 1994. They target a budget-minded audience who looks for low-cost clothing. Mirror has been successful offline and they are looking to establish an online presence with a responsive website.
Solution
Design a logo that is modern and neutral enough to attract all types of people and styles.
Design a responsive e-commerce website for Mirror that is easy to use and allows customers to browse through all products and filter by size, color, etc.
Tools
Figma
Adobe Illustrator
InVision
Role
Lead Product Designer (Research, Visual Design, Interaction Design, User Testing)
Timeline
8 Weeks (160 hours)
Design Process
Empathize
Market Research
Competitive Analysis
Interviews
Empathy Map
User Persona
Define
Project Goals
Feature Roadmap
Card Sorting
Sitemap
Task Flow
User Flow
Ideate
Moodboard
Logo Ideation
Brand Style
UI Kit
Sketches
Prototype & Test
Responsive Wireframes
Responsive UI Design
High Fidelity Prototype
Usability Testing
Affinity Map
Priority Revisions
Secondary Research
Before delving into research, I had questions. Who were Mirror’s target customers and what were their needs, frustrations, motivations, and goals? What competitive landscape would Mirror be operating in? I assumed that their ideal customers were already familiar with using e-commerce sites to shop on both web and mobile devices.
My assumptions were also that while most of their customers shop both online and in brick-and-mortar retail locations, their main motivation to shop online was to save time and money.
However, before I could validate (or invalidate) any of these assumptions, I had to first conduct secondary research to get the big picture - Mirror’s target demographics, opportunities and threats in the marketplace, and, of course, the competition.
Market Research
I leveraged this form of secondary research to make decisions that will provide Mirror with competitive advantage. Using reputable sources, I was able to uncover key statistics about Mirror’s target demographic. I sought to understand what’s currently available to customers and gain insights into industry trends, opportunities, and threats.
Fashion E-commerce Industry Stats:
E-commerce comprises 38.6% of all apparel sales.
Worldwide revenue in this industry is expected to reach 712.9 Billion by 2022.
Millennials, ages 18 to 34, make up the majority of e-commerce customers,
Gen Z, ages 18 to 24, spends the highest share of their income online.
US Digital Buyers Who Purchased* Clothing, Shoes or Accessories Digitally, by Demographic, April 2019 (% of respondents per group)
Data is from the April 2019 "eMarketer Ecommerce Survey" conducted by Bizrate Insights. 1,002 US internet users ages 18+ were surveyed online.
Threats
Increasing market fragmentation erodes loyalty
High product return rates (as high as 50%)
The ability of fast fashion to release trendy clothing on demand
Trends/Opportunities
43% of purchases are driven by personalization
Flexible payment gateways
Inventory flags create urgency
Reviews help reduce returns
Competitive Analysis
I then looked for other companies in the fashion e-commerce space with similar target demographics and conducted competitive analysis to identify their strengths and weaknesses. I noted sites with great UX/UI design - whose best practices Mirror may want to incorporate and evaluated why others fell short to avoid similar pitfalls.
Empathizing with the user.
Now that I had a better idea of Mirror’s target audience, it was time for me to go directly to the user to hone in on the goals, needs, motivations, and frustrations I mentioned earlier.
I selected user interviews as my primary research method so I could ask potential customers open-ended questions and uncover in-depth information relevant to their online and in-store shopping experiences.
To reflect the data I uncovered in my market research, I interviewed four users in total, including one male and three females , ages 23-52. On average, the interviews lasted around fourteen minutes each.
Empathy Mapping
After my interviews, I documented my observations in an empathy map in order to determine if there were any patterns in my participants experiences with shopping for clothes online and in store. Sure enough, I was able to cluster similar observations together and develop several key insights, from which I determined my users’ needs.
User Needs
To know their clothing is going to fit how they want it to.
To shop for clothes efficiently.
To receive good customer service when making a purchase.
Key Insights:
Shoppers will reference the size of their current clothing to determine what will fit them.
Good customer service motivates shoppers to shop. Poor customer service makes them avoid it.
Customers view online shopping as convenient.
Crafting A User Persona
After I identified the key insights and user needs from my interviews, I combined my primary and secondary research to create a persona whose demographics, goals, needs, frustrations, and motivations represent Mirror’s target user group. Moving forward, I’ll be designing for Emily. You can learn a little bit about her below!
Defining the product
Now that I had a good understanding of my users, I began fleshing out the features Mirror’s site will include. To start, I collected the business goals from the client and the user goals from my research, and took into account some technical considerations to gain clarity and align all parties involved before making feature decisions.
Feature Roadmap
I turned my research and ideas generated during brainstorming into action by outlining and prioritizing the site’s contents in a product feature roadmap. View my full feature roadmap HERE.
Mirror’s Sitemap
With my project goals defined and feature roadmap outlined, I was ready develop a strong information architecture to keep things simple for users by allowing them to access the right information at the right time.
One key result from a card sorting exercise I conducted was that most participants sorted by types of clothing (i.e. tops, bottoms, outerwear, footwear, and accessories). Once I got a sense of user’s mental models, I combined those findings with competitive analysis to organize my content into categories and create a sitemap. The sitemap is an excellent tool to show the relationship between the content on Mirror’s site.
Task Flows
When I began to think about Emily’s interaction with the site, it was easiest to break her actions down into a few key tasks that reflected her goals, needs, frustrations, and motivations. This way, I had a good sense of what screens needed to be designed. The tasks I outlined below reflect Emily’s goal to shop for occasions and her motivation to save time and money.
User Flows
Next, I went into more detail and determined several different paths that Emily could take to complete tasks on Mirror’s site and the decisions she might make along the way. View the entire user flows I outlined HERE.
UI Requirements Doc
Before sketching Mirror’s site screens and after outlining the sitemap, user flows and task flows, I created product requirements so I had a good starting point going into the ideation process. Check out my UI Requirements Doc.
Responsive Wireframes
After sketching, I put together wireframes to map out screens to test the task flows mapped out above as defined by my UI requirements doc. I made them responsive to comply with the client’s request for a responsive site and to map out how to adjust page content for different screen sizes.
To keep my designs organized, aligned and scalable. I used a Bootstrap gridding system.
Brand Style
Now that I had the foundation of Mirror’s site screens laid, I needed to add some color and branding to make it high-fidelity. To get my creative juices flowing, I created a moodboard . The foundation of good UI design is good branding and the foundation of branding in this case is the attributes that define the way users will perceive Mirror as a company - minimal, modern, simple, and exciting.
UI KIT
As started to build high fidelity screens, I added key elements to my UI kit. This document is a repository of brand assets and styles used throughout the website.
Responsive & Desktop UI
Now that I had Mirror’s branding sorted, I combined it with my wireframes to build out the UI for responsive screens as outlined by my task flows. I focused on the UI for desktop as the basis for my prototype.
Prototyping & Testing
I combined my high fidelity screens and task flows to create a high fidelity prototype for usability testing using Invision. The overall goal of usability testing was to see if the prototype I created addressed the goals, needs, motivations, and frustrations uncovered during user interviews.
Objectives
Test how easily users can find & purchase items
Discover any potential pain points for users
Observe browsing & search patterns.
Test Methodology
Remote, moderated task elicitation and documenting observations with the thinking aloud testing technique. I used this approach so I could gain insight into users’ feelings while using the site.
Results
During testing, participants were given the following scenarios/tasks. They were able to complete these tasks with a 100% completion rate and a 90% error-free rate.
Scenario 2
Good news! The top is perfect for your Holiday party and you’d like to purchase it.
Key Tasks:
Check the size chart
Add the red sweater to your cart
Complete checkout process
Scenario 1
Christmas is coming up soon and you need an outfit for your company’s Holiday party.
Key Tasks:
Find a women’s red sweater for the holiday party
Select the red pullover sweater
Skim through the reviews
Key Insights
After testing, I listened to my recorded testing sessions and documented my observations on users’ behavior. I compiled all my notes into an affinity map which allowed me to uncover the following pros and cons.
Pros:
Easy shipping & payment process
Easy to identify and apply promos
“Inactive” buttons were not clearly indicated
Cons:
Hard to find product reviews
Doesn’t account for users shopping by clothing type vs for occasions
Priority Revisions
I then prioritized revisions to my prototype based on the ones that would address the pain points experienced by the most users and reduce the amount of slips and mistakes users made during testing. I prioritized the revisions as follows and implemented the first four revisions in a second version of the prototype.
1
Make buttons that are unable to be clicked inactive or make them generate an error message.
2
Include a link to the reviews at the top of the product detail page so user does not have to scroll.
3
Map out user flow where user can easily find a sweater for a holiday party via main nav > women > tops.
4
Remove email requirement to enter guest checkout flow & require later OR indicate an email is required.
Revisions 1 & 2: Made buttons that are unable to be clicked inactive, and included a link to the reviews at the top of the product detail page so user does not have to scroll.
Priority Revision 3: Created flow so user can find a sweater for a holiday party via main nav > women > tops.
Priority Revision 4: Removed email requirement to enter guest checkout flow
Reflection
I learned a lot about user expectations through this project and the importance of not reinventing the wheel. User expectations refers to the consistency that users expect from products.
There were several instances where my design did not match user expectations - when they looked for reviews at the top of the product detail page instead of the bottom, looked for sweaters in the ‘Tops’ category instead of the ‘Holiday Edit’ collection, and when they weren’t aware they had to enter their email to enter the guest checkout flow. Unfortunately this mismatch between Mirror’s site design and user expectations had a negative effect on the product’s usability.
In my revisions, I made sure to reference design patterns from competing fashion e-commerce brands so I could create a user experience that was more familiar to users so they wouldn’t have to “think” so much when interacting with Mirror’s site.
Next Steps
Handoff design specs to engineers using Zeplin.
Continue to iterate using the design thinking process and begin implementing lower priority features.
Carvana
Designing modernized employee software.
Peloton App
Adding workout features to the Peloton App.
Lox Club App
Allowing users to send opening lines to dating matches.