UX Design by Rebecca LeVine
RESEARCH: GOALS
Like any worthwhile project, this one began with research: into the market and the competitive landscape, and into users’ needs and concerns. I started with these three goals for what I wanted to discover.
ITERATION
I started iterating on logos and a User Interface kit.
RESEARCH: MARKET + COMPETITORS
I began by taking a look at the websites of Mirror's competitors, making notes of their strengths and weaknesses.
When it came to branding, I wanted to position Mirror alongside retailers like Zara and TopShop: affordable versions of high fashion. As such, I knew the logo should be chic, minimalist, and sophisticated. I decided to keep it black and all text, referencing both its peers and the brands it aspired toward.
TESTING + REVISIONS
With the initial prototype up and running, it was time for usability testing. I sent the prototype to a group of respondents and asked them to complete a series of tasks. I observed how they did so, as well as the problems they ran into. Afterward, I asked additional questions about their experience with the website, and generated an affinity map to track their feedback and create a roadmap for revisions.
RESEARCH: PERSONA
From my user interviews, I generated a persona to represent Mirror's target customer. Meet Sophia.
All-text logos for high fashion brands Celine, Balenciaga, Chloé, and Givenchy; and for fast fashion brands TopShop, Cos, and Zara.
Next, I carried out research into the current state of apparel e-commerce.
Apparel e-commerce continues to grow significantly: in 2019, online sales accounted for 36.8% of all apparel sales in the U.S., up from 34.0% in 2018 and 29.9% in 2017. That percentage is likely to be even higher in 2020.
The last few years have seen a glut of bankruptcies among major apparel retailers, from legacy brands like Lord & Taylor to fashion darlings like Topshop.
Amazon and direct-to-consumer brands are significantly more successful than brick-and-mortar stores that also have a web presence.
How would this all affect Mirror?
To compete with Amazon and direct-to-consumer retailers, a brick-and-mortar brand like Mirror will need a visually appealing, contemporary-feeling website with plenty of features to make the purchasing process seamless. It must offer a wide variety of items, but with easy filtering and smart search functionality so as to avoid overwhelming the user. It can’t feel stuck in the past, but it needs to appeal to shoppers who prefer a physical environment than a digital one.
RESEARCH: USER INTERVIEWS
Next, it was time to sit down with real people and conduct user interviews. I met with 4 people, all fitting a particular archetype (“the urban young professional”) and spoke with them about how they shop online for clothes—what they like about those experiences, what they dislike, and what they want.
All 4 respondents have shopped both online and in person in the past year
All 4 felt negatively about fast fashion, but said they do occasionally purchase it
All 4 reacted negatively to cluttered store webpages, particularly to pop-up messages
All 4 said they often abandon their carts while shopping
2 respondents said they prefer in-person shopping in non-pandemic times; 2 always prefer online shopping. All 4 said they’d avoid in-person clothes shopping till the pandemic is over
I settled on brand colors, fonts, and other UI features, too.
Next, I created a wireframe.
From there, I put together an initial hi-fi prototype.
Mirror
Founded in 1994, Mirror is an affordable and accessible but still fashion-oriented clothing retailer. Mirror chose to remain brick-and-mortar only until very recently, when they decided to invest for the first time in online retail.
My goal was to design a responsive, easy to use e-commerce website that would allow customers to browse through products and to filter by size, color, style and more. I'd also be creating a logo and branding kit for the company.
ROLE
Lead and solo designer— discovery, user research, design, testing
DESIGN TOOL
Sketch, InVision
DURATION
5 weeks
-
Identify pain points. What do shoppers like and dislike about the websites of comparable brands?
-
Identify key features. What features must the website have in order to be successful? How can we convey all the necessary information without overwhelming the user?
-
Identify key features. What features must the website have in order to be successful? How can we convey all the necessary information without overwhelming the user?
Age: 30
Location: Boston, MA
Occupation: Director of Marketing at an education startup
Relationship Status: Partner of several years
Gender: Female
Archetype: Urban Young Professional
“With clothes, I’m always trying to find a balance: good quality but not too expensive, professional but fun, of the moment but not overly trendy…”
-
Busy urban millennial
-
Loves her job, yoga, and spending time with her family, friends, boyfriend, and dog.
-
Prefers to shop in person at local independent stores, or at chains known for their ethical environmental and labor practices.
-
Soft spot for trendy fast fashion
-
Aware of the dopamine hit she gets from “retail therapy,” but often feels guilty about making unnecessary purchases.
One issue a respondent flagged had to do with the appearance of the size options: gray-outlined boxes, with the size (XS, S, M, etc.) in gray text. When asked to select a size small, the respondent actually said out loud "Oh no!"—she thought that all the listed sizes were sold out because they appeared in gray. This was an easy fix: in the updated prototype, the boxes are outlined in black with black text, so as to avoid looking at all "grayed out."
