Responsive Web . Rebranding

Mirror Clothing

Project overview

Project Background
Mirror is a very successful offline clothing company. They have over 400 stores around the world in 32 countries. They target a budget-minded audience who are looking for affordable clothing for all the occasions. They are late for the digital transformation but they see a huge sales opportunity for selling online. They are looking for a rebranding and responsive website where they can sell all their products.

High-Level Design Goals and Objectives
• Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
• Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, ​style, etc.

Process Review

Empathize

Methodologies: Market Research, Competitive Analysis, 1-on-1 Interviews

In our very first stage, it’s very important to empathize with user to understand to gain a deeper understanding of their motivations, pain points, and needs. To achieve this, a few types of research were conducted, including secondary research, competitive analysis, and user interview. Here is the summary of findings from secondary research and competitive analysis:

​Market Research & Competitive Analysis

1-on-1 Interviews

Due to Covid-19, I did a remote interview with 3 friends from different locations and backgrounds. All participants shopped online clothing in the past 30 days. The goals were to identify the frustrations and needs of people who shop online clothing.

Needs
• Free shipping
• Free return
• Fast shipping
• Affordable price
• Promotional/Sale event
• Simple to use app
• Solid return policy
• Diversity and inclusivity of models

Persona Development

Based on all the information from the research, I developed a persona to understand users' needs, experiences, behaviors, and goals.

Storyboard

One step further was to create a storyboard that illustrates user behaviors and reactions to help externalize the knowledge about users. In this story, my user is a student who invited to her friend’s graduation party. She only has 4 days and is looking for affordable, casual but trendy clothing. She sees Mirror Clothing AD online and clicks on it. On the homepage, she sees 50% OFF, free 2 days shipping, and trendy clothes.

Define

Project goals, Feature Roadmap, Sitemap, Task Flow, User Flow

I started Define stage by gathering all the information from Empathize stage and created a Venn Diagram of the business goals, user goals, and technical considerations. Also, I was able to identify the prioritization for the feature and elements in my roadmap. Then, the next step was sitemap which helped me to visualize the expectation of users about the content format and display.

Venn Diagram of the business goals, user goals, and technical considerations

I listed out the overall business goals, user goals, and technical considerations for Mirror Clothing. Then, I created a Venn Diagram to mainly find the overlapping similarities. The information from overlapping list was helping me to prioritize and define the goals for this business.

Features Roadmap

Based on the user research and project goals, I created the features roadmap to identify and prioritize the features that can be solutions toward Mirror users’ goals, frustrations and needs.

Information Architecture

An open card sorting was conducted online by using Optimal Workshop. 3 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.

Sitemap

I used my findings from card sorting to create the sitemap that matches the users' mental models so users can easily find items they are looking for.

Task Flow & User Flow

I created task flow and user flow to visually show the potential steps a user might take on the site. It helped to gain the better understanding of the user’s decision making and thought process while purchasing an item on Mirror.

Task Flow: In the task flow user is looking for a comfortable pants to wear both at work and when she is home.

User Flow: In this user flow, user has two paths to take. The first one is that the user is a returning customer and got an email about the holiday sale. She doesn’t know what she wants to buy but she is here to find a good deal. The second one is our user is invited to a party and looking for a dress. She saw Mirror’s AD on here instagram feeds and clicked on it to find a party dress.

Ideate

Lo-Fi Wireframes, Logo, Style Tile, Mood Board, UI Kit, Hi-Fi Screens

Wireframes

To create the wireframes, I referred back to the research to make sure my designs kept in my the user's goals and needs. I initially sketched out different layouts for the homepage using paper and pencil. Once I determined the elements and direction of the homepage, I digitized the sketches for desktop, tablet, and mobile.

Logo & Style Tile

Mirror wants to re-design their branding elements in order to attract all types of people and styles. Mirror's brand attributes are modern, accessible, trendy, friendly, and stylish. The color palette and typography tries to evoke these feelings in their users.

Prototype

Hi-fi Screens

I brought the wireframes to life by combining it with the style tile.

​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 black skirt.

TEST

Usability Test

Participants: 3
Ages: 21 to 32
Occupations: Graphic designer, nurse, student
Methodology
Remote testing of prototype over a video call using screen share
option and think-aloud protocol
Objectives
• Search for the product and add the item to the shopping bag
• Sign up/Sign in and checkout
• Observe for any confusing area and pain points

Affinity Map

Iteration

Base on the result of affinity map, these are the changes I made:
• Corrected clickable part of search bar
• Changed the search suggestions
• Added quick view for “Midi Wrap Skirt”
• Color option on the single color product is already selected
• Added guest checkout
• Updated the Shipping/ Billing page inputs
• Added shipping-billing_return-customer-checkout page
• Added “Forgot password?” and some other edit options in the shopping bag
• Added Review Order page before confirmation

Click here to see my final iteration

Reflection

Mirror Clothing was my first UX design project and it was an amazing learning experience. I was engaged in every step of the design process from start to finish. In this project, I realized the value of research and user feedback. It was interesting to see different behaviors of shoppers toward the same task. I learned I need to focus on users’ needs and I am designing for them not myself. So, it is very important to create designs that align with users’ way of thinking and solve the problem based on their frustrations/motivations.