CASE STUDY — BRANDING + WEB DESIGN

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.

MY ROLE

Lead and solo designer—discovery, user research, design, testing

DETAILS

Duration: 5 weeks
Design tool: Sketch, InVision
Client: Mirror (fictional)

JUMP TO

Research

Iteration

Testing + Revision

Summary

Prototype

 

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. 

  • 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? 

MARKET + COMPETITOR RESEARCH

I began by taking a look at the websites of Mirror's competitors, making notes of their strengths and weaknesses. 

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

RESEARCH: PERSONA

From my user interviews, I generated a persona to represent Mirror's target customer. Meet Sophia.

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. 

ITERATION 

I started iterating on logos and a User Interface kit.

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. 

All-text logos for high fashion brands Celine, Balenciaga, Chloé, and Givenchy; and for fast fashion brands TopShop, Cos, and Zara.

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.

 
 

TESTING + REVISION

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. 

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." 

SUMMARY

I incorporated the feedback from my usability testing to create a second prototype—specifically addressing issues like the confusion around the  “Going Out” subcategory and the gray size boxes.

Finally, I adapted the designs for mobile and tablet.

 
mobile in hand landing pg.png