Mirror
Case Study: Designing an e-commerce clothing website
Project prompt – Design a responsive website
Project type – UX/UI, independent
My role – Research, UX, UI
Timeline – 2 weeks
Background
Founded in 1994 and with over 400 stores in 32 countries, Mirror is a well-established global clothing chain. The catch: they are exclusively brick and mortar stores. Mirror has recognized the need to expand into the digital space for increased revenue.
Objectives
Design a responsive e-commerce platform that will allow Mirror to increase revenue, attract new customers, and sell excess inventory. Give the company a face lift by designing a new logo that captures the essence of the brand.
Design Process
Empathize
In order for a design to be successful, it is important to gather information that helps define the problems, understand the users and identify the opportunities.
Research Goal
The goal would be to leverage what they have with a user friendly responsive website to give them an edge over their competitors.
Research Objectives
- Understanding why people are shopping online
- Understanding their needs with online clothing retailers (products/ experience)
- What draws them (images/ colors/ UI)
- Understanding pain points
Research Questions
1. What is it about online shopping that draws a customer?
2. What websites do they use regularly?
3. What do they like about those websites?
4. What do they NOT like about those sites?
5. When would they like to shop in person?
Market Research and Competitor Analysis
Mirror with their affordable and trendy style has been very successful in the clothing market. However, they would like to optimize their sales by clearing remaining inventory through an online store. In order to make headway in the online space and 'catch up' to their competitors it is important to understand the market, target demographics and identify opportunities to uncover potential problems.
Next step is to identify potential competitors’. Analyze websites for their strengths and weaknesses and build provisional personas.
User Interviews
In order to design a website one has to first understand the target audience for the particular site and understand their needs and perspectives.
Participants:
4 female participants
Age: 35-45 years
All based in the San Francisco Bay Area
​
​
Empathy Map
With research findings in hand I created an empathy map with 6 sections reflecting what users Do, Think/ Feel, Hear, See, Pain and Gain. By clustering the responses I received from my interviewees, I was able to better synthesize user behavior and thoughts which helped me build my user persona: Anita
Define
Product Roadmap
Prioritizing product features based on information gathered from the research phase helps set business, technical and user goals for the product.​​​​​​​
​
Sitemap
With product roadmap and empathy research in place, I then needed to make sure that I had a good visual idea of what Mirror's website would contain in terms of overall content and navigation.
​
Interaction Design
The site map provides visual clarity to make further progress in the design journey with a Task flow and User flow. I wanted to be able to mimic how a user would enter the site, the search behavior and the different ways of navigating to a particular product. The navigation needed to be intuitive without being too overwhelming or confusing.
Ideate
Low fidelity wireframes
This was my most favorite part of the design journey. The free flow of ideas, researching websites that my users mentioned they preferred shopping at, a few of my preferred online stores. Expressing it on paper to see what 'felt' right and what did not. These sketches served as my guide to eventually designing Mirror's final site.
Mid fidelity wireframe
With a good skeletal system in place with the lo fidelity wireframes, I referred to the product roadmap, sitemap, and user flow to work on the mid-fidelity wireframe. The focus was primarily on the buying process from when the user lands on the homepage, looks for the item, adds it to cart and finally checksout.
Responsive Wireframe
From personal experience as well as from talking to my users, I understand that people opt to shop whenever and wherever they find time. Maybe while your kids are playing at the park, in line at the grocery, sitting by the beach...So, I designed Mirror's website to fit all screen sizes: desktop, phone and tablet. For this case study, the homepage has been designed as a responsive wireframe.
UI Design
Mirror’s aesthetic is very strongly dictated by Anita, the persona, who essentially encapsulates the 5 interviewees.
Classy, modern, uncompromising.
Sustainability and empowerment go hand in hand to her and this is clearly reflected in the product choices she makes. Especially with regards to clothing.
Mood Board
The Mood board is an important process of branding and UI design. As I learned more about the target users, their lifestyle and shopping choices, I was in a better position to nail down a design esthetic that resonated with both Mirror and the user. Edgy with out being too 'out there', sustainable yet budget conscious, well dressed not over!​​​
Brand Logo
Mirror is a successful clothing store which opened doors in 1994 targeting a budget-minded audience looking for low-cost clothing with no compromise on quality and catering to all styles.
I played on the word Mirror using the letter M. The font and colors used were done so keeping the brand’s aesthetic and style in mind.
Once I selected the logo, I just played around with colors till I found THE ONE!
Brand Style Tiles & UI Kit
A UI Kit is a guideline to maintain consistency of product across all pages. The colors, typography and patterns were essentially a product of user research, personal preference and pinterest (the holy grail!).
High fidelity wireframes
Mirror is starting to come alive! With a framework for navigation and elements in place along with the UI kit, I was able to bring to life a somewhat finished version of the Mirror website. There, of course, was some fine tuning to be done, but, for the most part, it felt ready to be presented! The hi fidelity wireframes are for the desktop and mobile version of Mirror's home page and product details page.
With my hi-fidelity wireframes in place, I ironed out any kinks through feedback received from my mentor and group critiques.
Prototype/Test
Usability Test
I tested out the usability of my prototype on 5 female participants between the ages of 35-45. The participants shopped online at least once a month. All 5 participants completed the usability test via zoom.
Tasks
Navigate to Women's dress section.
Select the Aubrey dress in a size 'S'.
Proceed to checkout.
Affinity Mapping
I created an affinity map to incorporate and organize all the feedback received from the usability test. I organized these by Positives and Scope For Improvement in : Design, User Flow and User Interface.
Findings
Overall, users navigated through the website with ease. All of them identified with the clean, minimal aesthetic that the brand represented. The one feature that confused one of my users was the shopping bag feature did not update when item was added to cart (before confirmation), which I ended up revising.