Overview

Mirror is a well known global clothing store. They have over 400 stores around the world in 32 countries. Mirror has different styles such as casual, business, sport, party, etc targeting different demographics (female, male, kids).  Mirror focused on providing cheap clothing for any occasion but in pretty good quality.

Problems

Design Process

1. Empathize

Competitive Analysis

To kickstart the project, it was important for me to gain insight on Mirror’s direct and indirect competitors. There are so many e-commerce clothing companies, gaining insight on other clothing companies and experiences would help me understand user needs, demonstrate a need for better products, map a design space, and gain a grasp on trends and standards. This research goal was to better understand the current market and features other e-commerce stores were offering.

Competitors

Research Insight

Interviewing Users

Interviewing users to help better understand the needs of Mirror’s users and their current shopping habits.

5 users have participated in this1:1 interview about online shopping base on their habits and thought. Their age between 22 to 35.We interview through the phone and they answer the survey that we created in order to know more about how shopper reacts when they shop in order for us to collect data and create a better online shopping experience for Mirror.

Interview Key Findings

2. Define

Persona: Let’s meet Rebecca

Based on the information i gathered during my research, I created this user persona, Rebecca. She represented my prospective users and help me keep her in mind as I was working on my design.

Project Goals

Based on research and users findings, then combine the two to see the connections between them and dive deeper into the goals to create a great design

Card Sorting

I conducted a card sorting exercise to better understand how users classify and group various clothing items. 10 participants were asked to group 30 different clothing items and assign their own labels for each grouping.

Site map

3. Ideate

Task Flow

I created a task flow of the users purchasing process to identify the key pages that we would need to focus our designs on.

User Flow

Sketching

Wire framing (Lo-Fi)

Once I identified target user and screens that I am going to design, I outlined low-fidelity wireframes based on the sketches and quickly arrange the ideas into a more visualized solutions. From what I learnt so far during Empathy and Define phase, I have put the necessary contents and components as a draft layout before going to digitalize the design.

Branding (New Logo)

As the request of the Mirror, I created a new logo with a responsive design to roll out with the new e-commerce site. I focused on a clear world mark with an easy to distinguish logo.

Final Logo:

Sketches:

UI Kit

Before going to create hi-fidelity wireframes, I have all UI elements available which set the tone of the website and have a consistent branding identity throughout the website.

4. Prototype

Prototype

A simulation or sample version of a final product, which is used for testing prior to launch. The goal of a prototype is to test products (and product ideas) before sinking lots of time and money into the final product. Also, gain insight on potential pain points and areas to improve before further developing product.

View Prototype

5. Testing

Usability Testing

Testing phase is the opportunity to improve our products by studying how users respond and interact with out ideas using the techniques below. In my Usability Testing Plan, I created 3 scenarios and recruited 5 users to participate remotely via Discord screen sharing. The overall goal of the test was to identify pain points, understand the user flow behind basic tasks, and ensure a clear path for all users.

Affinity Mapping

After conducting my usability testing, I decided to run the affinity map method to organize the thoughts and comments from each participant. I divided each section by successes, problems, and other to know what I did right and what I can fix for the final version of my project.

Reflection

Next step