MIRROR | RESPONSIVE WEBSITE DESIGN
Project Scope: 4 weeks / 80 hours
Role: Strategy, Research, Branding, UX Design, UI Design
Tools: Sketch, Invision, Zeplin, Illustrator, Optimal Sort, pencil + paper
INTRODUCTION
Mirror is a global clothing chain offering a variety of clothing from casual to formal. Founded in 1994, the fast-fashion retailer was targeting the audience looking for cheap clothing at an affordable price without sacrificing the quality. Mirror is very successful offline in the physical retail space with over 400 stores around the world in 32 countries. They are very late in the game for digital transformation and would like to update their presence by offering a responsive e-commerce website and a new logo.
GOAL
Create a new logo for Mirror that is modern, timeless and appealing to a wide audience
Design a responsive website that is easy to use, modern and in-line with competition
PROCESS
01. RESEARCH
The goal of this initial step is to empathize with the user and analyze competition in order to identify strengths & weaknesses of the brand and undertstand pain points & expectations of the user.
COMPETITIVE ANALYSIS
Competition was analyzed to identify strengths and weaknesses of Mirror. Provisional personas were created to better understand the demand in the current market.
USER PERSONA
Establishing a connection with the user and building empathy is essential to create effective solutions. I created below user persona based on my research findings. The goal of this exercise was to gain insight into the user’s behavioral patterns and build empathy to better understand their goals & frustrations.
USER INTERVIEWS
In order to gain further insight into the user, I recruited users based on the provisional personas. Three participants, aged 30-55, were interviewed in person and over the phone. Here are the key takeaways:
Participants want better fit & size assistance when shopping online.
Participants want to see more variety in product photography. One participant expressed interest in seeing garments on different body types or in different settings to be able to make better purchase decisions.
Participants want to see product reviews in order to make better purchase decisions.
Participants need styling tips via product pairings, stories, editorials or virtual assistance.
Participants want easy returns.
Participants want repeat styles. They want to be loyal and efficient.
All participants are looking for consistency in fit season after season. Issues with fit seem to be the main concern about shopping online among all participants.
Participants want to be able to try on items before purchasing and want to be able to see in store availability of online items.
Brick-a-mortar presence is still important and participants still want to be able to see products for themselves and make a connection with garments.
EMPATHY MAP
Having completed user interviews and created a user persona, I created an empathy map to further empathize with the user. This exercise gave me the opportunity to view the user from a human-centered lens, gain insight beyond that they feel about a product and establish a connection.
PROJECT GOALS
After having built insight into the goals of the business and the user, I identified the technical considerations. I created below map as a guide to reference as I move further in the design process.
02. INFORMATION ARCHITECTURE
The main goal of this phase was to map out the details of the project based on our research findings. This includes gathering all the information needed for our website and organizing them in a way that makes most sense for the user.
CARD SORTING
Three participants, aged between 30-55, completed the card sorting exercise. Here are the key takeaways:
One participant grouped ‘Underwear’ under ‘Accessories’ while other grouped them by gender.
All participants positioned ‘Swim’ under ‘Yoga & Activewear’. It was interesting to see all participants associated swim with activewear.
Two participants grouped ‘Knitwear’ under ‘Tops’. Even though ‘Knitwear’ is a broader category including tops and other separates, it may be a better approach to label this category as ’Sweaters’ to avoid confusion.
Two participants positioned ‘Toddler Boy’ and ‘Toddler Girl’ under ‘Baby’ while the other participant positioned it under ‘Kids’. Seems like toddlers are perceived as still too young to be categorized outside of the category ‘Baby’. Also may worth noting that only one of the participants has kids and therefore know the difference between a toddler and a baby.
SITE MAP
Based on the findings coming out of the card sorting exercise, I created below sitemap.
WIREFRAME SKETCHES
I explored a few potential home screen layouts before moving on to the next phase.
03. INTERACTION DESIGN
In previous phases, I explored user needs, highlighted business requirements, mapped out the site based on user feedback and created initial sketches. In this phase, the content and the flow of the website is further explored.
USER FLOW
I created a user flow to show how the user can navigate through the site. I explored three different scenarios with three different users and mapped out their potential journeys on Mirror’s website.
RESPONSIVE WIREFRAMES
High-fidelity responsive wireframes were created for the home page using Sketch.
04. USER INTERFACE DESIGN
This phase focuses on branding, setting up design language and polishing up our design.
BRAND LOGO
The goal was to create a timeless and modern logo for Mirror. The website has diverse content appealing to a wide audience and it was important to create a logo that is muted yet memorable in order for the focus of the user to remain on the content. For this reason, I decided to create a minimalist logo and explored options using a variety of sans-serif typefaces (see below - bottom left). Eventually we decided to move forward with the typeface Josephin Sans for its geometric, elegant and modern properties.
BRAND STYLE TILE
Brand style tile reflects the modern, rich and muted aesthetic of the brand. For this reason, a combination of a muted and earthy highlight color along with a toned-down black and a pop of color were used for the re-branding of Mirror.
RESPONSIVE UI DESIGN
After having alinged on branding in this phase, I moved on to creating high-fidelity responsive wireframes.
05. ITERATION & IMPLEMENTATION
Last phase of the project was focused on validating our designs with users.
USABILITY TESTING
Here’s the link to the prototype created in Invision: https://invis.io/NUSJQ3H6QYR
Usability tests were conducted with three different participants. Here’s a summary of my findings:
All users were able to complete tasks without problems.
Users generally wanted to click other areas intuitively and did not only focus on tasks.
There were a few comments on potential UI improvements.
One user questioned how increasing numbers of items on the shopping cart page would work across different devices.
All users responded positively to the visual elements on the site and the overall ‘modern’ aesthetic.
AFFINITY MAP
I created an affinity map to summarize and visualize my findings:
NEXT STEPS
Having completed usability tests, I identified areas of improvement and made necessary revisions to my designs.