Mirror

A successful offline clothing chain with its main goal to make any type of clothing accessible to everyone, now want to re-design and rebrand their online website to make it more convenient for customers to shop from home.

*This is a fictional project for UX Academy at Designlab.

YEAR / DURATION
Nov-Dec 2020 / 90 hours

ROLE
Product Designer - Research, Visual & Interaction Design, Prototype & Usability Testing

TOOLS
Figma, Optimal Workshop, Photoshop, Zoom, Maze

Mirror Cover

Project Background

Mirror is a successful offline clothing store established in 1994 with over 400 retail stores in 32 countries. They target a budget-minded audience who look for low-cost clothing for any occasion. Their main goal is to make any type of clothing accessible to everyone. Now, there’s a huge demand for online shopping from customers who want it to be convenient to shop from home and easy to find sizes. Mirror has also acknowledged the fact that they have plenty of remaining inventory, for which online selling would be great. Besides, Mirror has a very outdated logo that they are looking to re-do. They’re not planning on keeping anything of the brand identity they currently have.

DESIGN STAGES

1. Empathize

Study client's brief, learn about the industry and users by conducting research as well as analysis.

2. Define

Synthesize the findings from research to define the problems with project goals and roadmaps.

3. Ideate

Brainstorm and sketch ideas. From here, we start wireframing and define the brand identity.

4. Prototype

Build a usable prototype in high fidelity mock-ups with Figma to engage users.

5. Testing

Conduct usability testing to get key insights. Learn from the testing and revise the design.

Problem Statement

  • How might we create a responsive website which is easy to use from navigation to search and filter?
  • How might we refresh brand identity to attract all types of customers and styles?

1. Empathize

At this very first stage, it’s crucial to gain an empathic understanding of the user to understand their problems and reality. So a few types of research were conducted, including secondary research, competitive analysis, and user interview.

Research Plan ➝

Covid-19

Due to the pandemic, more and more people are resorting to online shopping.

Social media

is playing a significant role in the world of e-commerce. Buy and Checkout on Facebook and Instagram are popular nowadays.

Environment

Green consumerism is on the rise. Half of the consumers say that environmental concerns impact their purchasing decisions.

Personalized

People shopping online want help to find the products that they need, and they value a more personalized experience.

58,8%

of the world's population is online. More than 52% of the traffic is mobile devices. Mobile is now the new desktop.

Ethical

Consumer demand for ethically produced products has intensified in recent years.

COMPETITIVE ANALYSIS
HMC
ZARAC
SHEINC
UOC
TGTC
PROVISIONAL PERSONAS
Student-2
Lazy-Shopper
Fashion-Guru
Young-Hipster
Parents-1
INTERVIEW

Due to Covid-19, I did a remote interview via Skype with 5 friends from different locations and backgrounds. The goals are to identify what frustrates people when shopping, what they care about, and learn how they navigate a clothing website and.

Interview Brief ➝

Key Findings

The interview result shows that most participants have an interest in online shopping. They require the consistency of website and app interface; good filters; easy shipping and returning policy; accurate size suggestion. Most importantly, consumers want to know how the products actually look like. They want high-quality photos, videos of the model wearing it, and a virtue fitting room to imagine how the product looks on them.

Mobile

Mobile phone is mostly used for shopping but not a preferred device.

In-store

Most participants prefer in-store
shopping to online.

Consistency

Website and app should be consistent for easy navigation.

Pricing

Pricing and style are decisive factors, including shipping fee.

True-to-size

Participants want true to size as well as high quality images and videos.

Trust issues

One thinks using laptop is more accurate and safe to purchase.

PERSONA
personax
EMPATHY MAP
Empathy-Map2

2. Define

In this stage, I start to put together the information from the Empathize stage to reframe the problem in a way that is simple to understand and insightful. To make sense of all the data I have collected, I create project goals and product roadmaps.

BUSINESS GOALS
pj-1
FEATURE ROADMAP
Roadmap-mirror
INFORMATION ARCHITECTURE (IA)

An open card sorting was conducted online by using Optimal Workshop. 5 participants were asked to sort 30 cards into categories that make sense to them, and label each category themselves. It’s an invaluable source of qualitative insight into how people order categories. This helps create a sitemap as well as task flow and user flow.

This IA below is made for the purchase journey.

Sitemap-IA-1
TASK FLOW
Task-Flow
USER FLOW
User-Flow

3. Ideation

I sketched a few ideas to visualize how it would look and started wireframing on Figma.

Sketch
WIREFRAMES
Wireframes

4. Prototype

From the wireframes and UI Kit I made in the previous steps, I came to these high-fidelity frames for the prototype. I created a journey for users to search and purchase a red dress in user testing.

UI KIT

Since Mirror wants to re-design their branding elements in order to attract all types of people and styles, I’ve made their logo looks like a letter in heart shape, which can be friendly, welcoming, and easy to remember.

UI-Kit-mirror
VISUAL DESIGN

Below is 2 versions of the prototype.

5. Testing

I recruited 5 participants who may share similar characteristics with my persona and target demographic: budget-fashionista. Participants have the habit of online shopping at least once a week or month.

The test was conducted online by using Maze linking to Figma prototype, from which I can see the heatmap and how participants navigate when they do it on their own, not being distracted by someone observing. The goal is to know how easy it is for users to navigate the website using search and filter, any confusion as well as their feelings and thinkings about the design. 

Participants had to complete 3 tasks and giving feedback. The tasks include:

  1. How would you find a women’s red dress in size small with a budget of 50$?
  2. How do you find the right size?
  3. How would you buy a red dress?

SUCCESS
  • 4 participants complete the tasks really fast.
  • Rating: 8/10
  • All of the participants like the design.
  • No complaints about navigation.
  • No problem with the filters.
  • It basically looks like other popular websites so it’s easy to understand.


PAIN POINTS
  • Had to scroll down to look for shipping information.
  • The product image is big and the font size is small.
  • The font size of categories might be too small for older people.
  • The font size of the Size section on the product page was small.
  • After adding the product to the cart, there's no popup notice indicating the product is successfully added. 

REVISIONS
  • Shipping information should be visible nearby the product so it's easier to check the fee before adding to cart.
  • The discount condition should be clear. Better having the coupons auto-applied.
  • The website should have the estimated size function such as ask the customer about the height and weight, from there the website can give the customer the right size of clothing.
  • Adjust the photo and font size.
  • Add the popup notification to indicate that product was added.

Next Step

All the precious feedbacks received from the usability testing can be taken into account. After updating the prototype, another test will be conducted for further improvement of the product.

Thank you for your time!