top of page
286.jpg

Duration

4 weeks

Focus

User Research

Market Analysis

Ownership

Deliverables

UX Flow

Prototype

Desktop Design

Responsive Design

Rebrand

Industry

Retail / E-commerce

Introduction

Mirror is a global clothing store that sells multiple styles such as casual, business, sport, party, and formal for a cheap price but with good quality. Mirror has 400 stores around the world in 32 countries.

Problem

Mirror's existing website contains information about locations, promotions and the company, but does not an online store. Customers have been asking for online sales for their convenience.

Goal

The goal is to expand sales channels, offering convenience to customers through our new

e-commerce store with a new brand identity and increasing sales.

How can Mirror offer a great experience on their website, bring existing customers, and appeal to new buyers?

wave.png

Step 1: Research

The objective of the research will be to understand people's habits, behavior, frustrations, needs, and how to communicate with them. Additionally, our goal is to attend to online customers properly and offer a great experience on Mirror's website.

Competitive Analysis:

marketing.png

Research Questions:

How often do people buy clothes?

Do people buy them online?

Hearing about their experience of you buying online. (How was it?)

Do they feel safe giving personal information and making payments?

What makes people buy online? (Why?)

Why do people add items but not make any purchases?

Do they think shopping online is more convenient than trying on clothes in physical stores?

User Interviews:

Through a fluid call interview with four participants, I tried to absorb their emotional, social, and irrational motivators that affect the way our users behave, focusing on their current problems or pain, and their goals. These were a few main points that interviewees expressed during the sessions:

chatting.png

Insights

Goals and Needs:

 In general, people find that purchasing online is convenient 

Reward programs and discounts incentive users to buy more for less  

Users like fast shipping services and options to track orders

Users value websites that provide enough information about the product

• Some users do research on Google when they do not know the brand for security

Pains and Frustrations:

• Online stores do not provide specifications of products, such as size, durability, and description.

• No reviews from past buyers

• No tracking services for consumers and logistics do not work efficiently

• Some systems allow users to add in the cart an unavailable item in stock

• Many steps to purchase, such as registering and personal information • Limited payment options

wave.png

Step 2: Define

Users Personas:

Based on insights from user interviews, I was able to define a persona that represents a user's behavior, needs, frustration, personality and goals. Nathalia is also a Mirror's target.

Persona.png

Project Goals:

In order to better understand the process and make the best decisions during the design process,

a diagram was created to show the project goals for a useful website.

goals.png

Card Sorting

I recruited six participants to help in the process of Information Architecture, to see how users categorize and organize items on Mirror’s website through their intuitive insights.

 

card1.png
card2.png

In this graphic is possible to see the percentage of participants that inserted products under related categories.

Sitemap

A sitemap was created to provide information about the pages, categories, and other files on the website.

card.png

Task Flow

In Task Flow, we can see the high-level steps that a user would take to get to a specific goal to conclude a task on Mirror's website, starting with the home page until making a purchase.

task-flow.png

User Flow

In User Flow we have a path that the user took to conclude a task, making a purchase on Mirror's website.

user-flow.png
wave.png

Mid-Fidelity Wireframes

I started creating outlines in desktop and responsive versions. The objective would be to start with the sketch and improve with the development of the project.

Subcategory.png
Product Page.png
Home (11).png
Product list + filter.png

Step 3: Ideate and Prototype

Brand Design:

I looked for inspiration from visual concepts and typography that would be ideal for the brand.

Building a responsive logo was one of the top priorities of the creative process.

estudo-mirrror.png
sizes.png
typography.png
Buttons
icons.png

Desktop

Product list + filter.png
Search.png
Product Page.png

Responsive:

Product list + filter.png
Product list + categories.png
Product list + open filter.png

High-Fidelity Wireframes:

Home.png
Home.png

Step 4: User Testing and Iterations

Objective:

I promoted remote testing with screen sharing with four participants in order to better understand how users complete tasks and find out what are their difficulties. 

Affinity Map:

After a few hours of testing the website, I gathered qualitative information about users and grouped it by category to understand their experience.

affinity.png

Adding a back-to-top button in order to make it easier to navigate on long scrolls.

zoom1.png
page3.png
zoom3.png
zoom5.png

More specific checkmark: Making the shipping address as default for the next purchases.

Having the shorter checkout process.

Next Steps

Iterations:

Based on users' feedback, we gathered information on what could be improved in the existing layout for all devices, such as:

Inserting a filter inside of customer reviews facilitates the research of negative and positive reviews instead of navigating on the pagination. 

image2.png
page1.png
zoom2.png

• Create more pages and flows for a better experience

• Prototype new pages

• Create multiple scenarios for users to complete tasks

• Do more users tests with real sales/checkout process

• Keep gathering feedback from users

• Include additional features such as Accessibility in order to expand access to people with disabilities

bottom of page