MIRROR: Design E-commerce Clothing Store

• ROLE: Lead UI/UX Design (Research, Interaction Design, Visual Design).

• CHALLENGE: Design a robust and responsive e-commerce clothing store.

• CLIENT: Mirror (A Fictitious Company)

Project Goal

1. Design a logo for the company that is modern and neutral enough to attract all types of people and styles.

2. Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others.

My Design Process

Empathize

As a first step, it's crucial to gather information that helps me define the problems, understand the users, identify the opportunities. On top of this, I analyze the pros and cons of buying the clothes on an e-commerce website vs in-store. 

Market Research and Competitive Research 

Mirror's brand-awareness is very successful in the clothing market. However, at this time their marketing objective is to clear their remaining inventory through the online store. Therefore, I started off with Market Research to learn more about the market and demographics as well as help Mirror identify opportunities in the market, uncover potential problems and track ongoing trends.

Next, I analyzed the competitors’ e-commerce website in a bid to identify their strengths and weaknesses to understand the competitors’ strategies and how they are successful in the market. Mirror has three direct competitors I have identified which are H&M, Zara, Old Navy and two indirect ones; Amazon and Macys. During the analysis, I broke my research down into categories showing  the strengths, the weaknesses, the UX analysis, the marketing profiles,  the marketing metrics. Through this, I learned which site is running the business effectively with the highest conversion.

Interviews

To understand pain points, user needs, and the user goals of online clothing shoppers,  I spent a whole day conducting one-on-one interviews with seven participants in a local shopping mall. I used open-ended question to encourage them to share their stories about online shopping and in-store shopping experiences.  

Research questions:

• How is Mirror positioned compared to their competitors?

• What do customers think about online shopping vs in store?

• What do the customers expect to see when they go to a store or vs when they buy clothes online?

• How do the customers interact with the websites before they make their purchase decision?

• What are their goals for their online shopping?

• What do they need on online shopping?

• Which factors influence the online shopping experience?

Assumptions to validate:

• The modern lifestyle has made people to be too busy to go to stores to look around and try new clothes.

• Shoppers who always stay current with fashion trends fall in love with Mirror brands.

• Many old people (maybe older than 70 years old) are not tech savvy, so it is difficult for them to buy clothes on online stores by themselves. However, they can ask their children to buy clothes for them.

Information gathered during the discovery process helps me capture customer insights, user needs, and which elements make users frustrated in their shopping experiences. 

Empathy Map

To sum up my research findings and further develop user persona, I created an empathy map that consists of five quadrants reflecting what users Do, Think, Feel, Hear, See and Say.  I used many sticky notes to fill out the Empathy Map by listing user quotes, keywords, user behaviors, user thoughts, and user feelings. Then I looked for patterns, trends and contradictions across my observations. Ultimately, I synthesized user insights and user needs to help me define and solve the design challenge.

Insights

• Most users use their laptop to make their final purchase, but they use mobile to browse their favorite clothes before placing an order.

• Most users feel it difficult to compare the prices, the sizes and the images on one page.

• Most users have trouble finding information about their correct size, the clothing description and the material details..

• Most users are reluctant to buy online clothes because of the hassle of returning the products.

• Most users are influenced by beauty guru on Instagram and Youtube.

User Persona

Looking back over the Insights, the Needs and the Pain Points from Empathy Maps, I developed Persona that not only represents every possible audience member but also addresses the major needs of the most important user groups.

Define

Synthesize business goals & user goals

I collected the business goals from the project briefing and the user goals from both the user research and my analysis report. With this, I defined the overlaps of both business goals and user goals. Also, I took the technical side into account because technical considerations is the third pillar of any product (next to business and user-centric design). 

Feature Roadmap

A feature roadmap is a high-level visual summary that maps out the vision and communicates the why and what behind what I plan to build. Therefore, I listed the key features that would be included in my product’s design based on Mirror-user-research-conclusions, the business needs, the persona, and the market I analyzed. Afterwards, I prioritized the features on the list based on their importance to the business and the users. 

Cart Sorting

Before I started with card sorting, I did a content audit and research of identified competitors of Mirror. This step helped me get to know the structure and the information architecture of clothing websites. I used OptimalSort to create the cards for users to see how they group them into the categories. Then I applied hybrid card sorting method to 5 participants that reflect Mirror persona. I had 10 categories along with 30 various items in card sort. I picked some cards that sound unfamiliar to shoppers to see how they know the card names and sorted them into established categories. 

Site Map

Based on those results of Card Sorting that helped me evaluate the information architecture and organize the contents into categories, I created a sitemap that includes all of my proposed screens and user flow in order to help me understand the structure of the site and show the relationship within the content on Mirror’s site

Ideate

This phase incorporates information architecture and usability to define how a product will behave. The discovery phase and Project Strategy shed  light on designing effective interactions for the Mirror site. Detailed flow and interaction design was now required to bring the experience to life. 

User Flow

I created the user flow to identify the different paths that a user would take through their product to complete each task. I sketched out how flows differ for different personas to answer a few questions such as what is their point of entry?  What are their searching behaviors like? What’s going through their head when they make a selection? How is the sign up process? 

Sketching Low Fidelity Wireframes

Using paper and pencil, I drafted three different versions of the homepage before moving into digitizing the wireframe. I looked at similar sites to get some ideas on what content they display on the landing page. This homepage opted for different users that may be looking for when getting there.

Mid-fidelity wireframes

Before creating mid-fidelity wireframes, I read over my sitemap and user flows then created UI Requirements that contain my own to-do-list for each wireframe. I focused on the buying process from when the user arrives to the homepage all the way to the checkout process..  Based on UI Requirements, I built out 5 key pages for Mirror by using a grid, in monotone (shade of grays) to help me walk through the structure of Mirror site. These wireframes represent the process how the users enter the site, look for the items, add them to cart and click to place the order. 

Responsive Wireframes

People shop all the time in all kinds of ways,  so redesigning a responsive website keeps the customer’s loyalty and attracts more users as well as increases the higher conversion rate for Mirror business.

I created layouts for different viewports from existing wireframe - mobile and table. Looking back at the desktop version, I tried to simplify every element on tablet and mobile version.  

Mid-Fidelity Prototype 

Wireframe and prototypes were tested and iterated to determine the user flows. Making lightweight prototype helped me test the product faster before building a complete site. To test my design , I used Invision to  upload my wireframe to conduct interactive test with live and virtual test users.

User Interface Design

Brand Logo

Mirror wants to update their logo to one that is modern and neutral enough to attract all types of people and styles. Before jumping right to creating the logo, I thought back to Mirror’s business goals. I wrote down a few keywords that are also suitable for the target audience preferences along with business objectives: Modern, Neutral, Minimal, Stylish.  I sketched pages of my concepts on paper. I then picked some logos for Mirror site and digitized them with Illustrator. Ultimately, I chose one or two that I thought would work and the refine them to create the best logo. 

Brand Style Tiles & UI Kit

I initiated my brand style tile for the website. I  arranged the logo with different background colors and scales and I showed typography hierarchy, color palettes, and images I could use for Mirror site. A UI Kit  is the guideline to help  save time and keep consistent across the product for its next prototype. Therefore, I created a UI Kit for Mirror site. After going through a lot of sites and finding the UI patterns, I came up with the UI Kit that lists the core elements in Mirror site.

Responsive UI Design

Beside the desktop version, the users also need to search for the information on their mobile or tablet. Therefore, designing responsive UI is the best way to reach more customers in the market. Looking over the user flows, responsive wireframes and style tile, I created a Responsive UI Design for Homepage and Category Page for Mirror. 

Prototype

After testing mid-fidelity prototype, I used Sketch to create the high-fidelity mockups  of the key screen and prepared for usability testing. 

Clickable Prototype

After updating the high fidelity mockups, I used Invision to create the hi-fi prototype by importing my design and using the hotspot to link all pages. This clickable prototype helps me test the Mirror design to explore the frustration of users when they interact with Mirror site.

Usability Testing 

I created a test plan based on Erika Hall’s method to help me test the usability, the functionality, and the problems of Mirror  sites. The task flow I used was made up of tasks identified to be most commonly executed by users when they go through the purchasing process. 

Then I recruited 5 participants to test my prototype, 4 female and 1 male; 3 in person and 2 remotely to test usability problems, user frustrations that  were when they performed the tasks. I used Skype and shared my Invision link and asked them to share screen to see how they interacted with my prototype. Also for in person test, I used my laptop and asked other people to test my design.

Based on usability testing planning, I encouraged the participants to think out loud as they navigated the site. Through this, I could hear and see what they are thinking to understand why some things that are obvious to me are confusing or frustrating to users.

• Overall Test Completion Rate: 100%

• Overall Error Free Rate: 86%

Affinity Map & Iteration  

Creating Affinity Map is to help me improve my design by defining the problems and suggesting the solutions. I generated sticky notes to write down my observations each on one sticky note. Afterwards, I organized the notes in groups to find the patterns which came to the insights. Eventually, I prioritized each note to determine the recommendations in the next steps. 

Problem #1: Product Page

1. .Users struggled with Remove/Edit the items in shopping bag notifications.

2. Size Guide Link was not prominent enough for users to recognize so that users could not complete the task or it took them a while to finish the task .

3. Users were confused with Model Fits in Item Description

My solution: 

1. Add a Edit/Remove feature in cart notification pop up so that users can remove or edit the items in modal window.

2. Add a Ruler Icon next to Size Guide link and change the color of the text so that users can find their correct sizes.

3. Remove the Model Fit Link as well as change the header color in Item Description.

Problems #2: Shopping Bag Page

1. Users were confused with Edit link to adjust the size and the color.

2. Users did not want to go back to the home page to find promotion code and fill in the form in checkout process.

3. After removing the products, it took time for users to find that product again and left them in the shopping cart.

My solution:

1. Change the color of Edit text so that the users can recognize it.

2. Add the promotion code in the top banner.

3. After users remove the product, it still shows the link underneath so that they do not need to go back to the previous page to find that item again.

A few next steps:

• Test: carry out the usability testing on a revised prototype.

• Iterate: Analyze the user behaviors and define their problems when they interact with my revised design. Based on feedback from my evaluation, I will iterate my design work to solve the highest level issues.

• Deliver: create documentation to hand off to engineers and produce the MVP for market.