Lucia Liu
0-mockup.png

Mirror

 

Mirror

E-commerce Web Design

 

Client: Mirror

Timeline: Aug - Sep 2018, 4 weeks

Deliverables: Website prototype, Branding

Team: Self-directed, with feedback from mentor and peers

Role: UX/UI Designer

Tools: Sketch App, Illustrator, InVision, Zeplin

 
 

THE CHALLENGE.

Mirror is a successful clothing store that has expanded to 32 countries with over 400 stores since 1994. The company believes that clothing should be accessible to everyone, in a variety of styles and at affordable prices. Due to a demand for online services and a need to sell remaining inventory in warehouses, Mirror has decided it’s time to launch a brand new online store and to revamp its outdated brand.

This is a speculative project, and Mirror is a fictional clothing brand.

Objectives.

  • To design an e-commerce website for Mirror customers

  • To update Mirror’s logo and brand as a company that sells clothes to everyone

  • To create an intuitive and efficient shopping experience for users

 

Process.

 

 

01. RESEARCH

Goal: To research the current market and audience of online clothing stores

Process: Market Research / Competitive Analysis / Contextual Inquiry Interviews

 

Market Research.

To start off, I researched general information about the e-commerce clothing industry and noted the common trends and pain points of online clothing store websites. This secondary data helped me gain perspective about the subject matter and potential needs of current shoppers.

 

Competitive Analysis.

Since there are many clothing stores, it was important to understand how Mirror compares against competitors. Therefore, I evaluated the websites of Mirror’s direct and indirect competitors by their strengths and weaknesses. This allowed me to better understand customer expectations and how Mirror can position itself against competing companies.

 

Contextual Inquiry Interviews.

To gain primary research from shoppers, I conducted contextual inquiry interviews with 7 participants about their shopping methods. The interviews consisted of open-ended questions about their in-store and online shopping experiences. By the end, I was able to learn more about how shoppers behave and see patterns emerging.

  • Number of Participants: 7

  • Gender: 2 male / 5 female

  • Age: 15-52 years old

 

02. Define

Goal: To define the target user and understand their needs, goals, and frustrations

Process: Empathy Map / Persona / Storyboard

 

Empathy Map.

To synthesize the data, I constructed an empathy map by organizing the data points from each interview participant into groups. Then, I was able to deduce the user needs based off of the most common patterns within the user data.

 

Persona.

Next, I created a persona “Tiffany” to represent the findings synthesized from the empathy map. Tiffany reflects Mirror’s target customers and is characterized by the most common traits and behaviors from the interview participants. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.

 

Storyboard.

To further understand the user and problem space, I drafted a short storyboard illustrating the persona’s online shopping experience. This quickly communicates a perceived user problem and how Mirror’s website can pose as the solution to this problem.

 

03. IDEATE

Goal: To ideate information architecture and flows

Process: Card Sorting / Sitemap / Task Flow / User Flow

 

Card Sorting.

An open card sorting activity was conducted with 3 participants and consisted of 62 categorical terms commonly found on online clothing stores. Through observation and feedback, I was able to understand how the participants structured information in their minds, which informs how I should then design the information architecture of Mirror’s website to be intuitive for the user.

Main findings:

  • There are various ways people categorize clothing terms

  • Most objective way is to categorize by where the clothes are worn on the body

  • More subjective methods, such as by personal usage or function, indicate potential value in allowing more personalized ways of organizing content

Based off of these findings, I hypothesized that the most universally understood way to organize clothing terms was by where the clothes are worn on the body. However, in future iterations, there is potential value in presenting clothes in more personalized ways such as by usage or function.

One of the card sorting rounds.

 

Sitemap.

Next, I created a sitemap based on existing design patterns for e-commerce sites and the findings from the card sorting activity. By visualizing the information architecture and identifying key relationships between screens, we can better understand the flows and interactions throughout the site.

 

Task Flow.

Since one of Mirror’s goals is for customers to be able to order products efficiently, I constructed a task flow breaking down the necessary steps for a user to get from the landing page to the order confirmation page. Creating the task flow helped identify which pages were required within the customer’s process and forced me to think through the customer experience in more detail.

 

User Flow.

To further analyze the flow, I explored the possible paths that users could take while ordering products in a user flow diagram. Creating the user flow diagram allowed me to organize which pages were required and how they should relate to each other based on user decisions.

 

04. DESIGN

Goal: To design the UI and branding of Mirror’s website

Process: Sketches / Mid-Fidelity Wireframes / Branding

 

Sketches.

I began designing the UI by sketching low-fidelity wireframes for the pages. By presenting annotated sketches to my mentor and peers, I was able to quickly gain feedback about my designs and make improvements for the next iteration.

 

Mid-fidelity Wireframes.

I then created mid-fidelity wireframes in Sketch, which helped me focus on the basic layout and visual hierarchy of the UI design before adding the styling. I was also able to present these wireframes and gain valuable feedback. Below are the wireframes of some of the main screens.

To practice prototyping, I made a mid-fidelity prototype in InVision.

 

Branding.

Before moving into high-fidelity wireframes, I created branding guidelines to make sure the branding is cohesive and targets Mirror’s main audience. First, I gathered inspiration in a mood board and brainstormed logo ideas. Since Mirror brands itself as a clothing store with styles for everyone, I wanted the branding to be welcoming but also refreshing and stylish.

 

05. PROTOTYPE

Goal: To prototype Mirror’s website and gain usability feedback

Process: High-Fidelity Wireframes + Prototype / Usability Testing

 

High-Fidelity Wireframes + Prototype.

Using the branding style, I created high-fidelity wireframes in Sketch. I then created a prototype in InVision to prepare for usability testing. Below are the designs of some of the main screens.

 

Usability Testing.

Objectives:

  • To determine if the website meets expectations of users who have shopped online before

  • To identify areas that cause confusion and/or hesitation for users

  • To test if users can browse and buy products and efficiently

User Tasks:

  • Sign into account

  • Browse for a product and view information about it

  • Learn if the product is in stock at nearby stores

  • Add the product to shopping bag and apply a discount

  • Purchase the product

Results:

I conducted usability testing with 6 participants who have similar backgrounds to our persona, Tiffany. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.

Recruiting participants at a coffee shop.

 

06. ITERATE

Goal: To iterate upon the design and identify key improvements

Process: Affinity Map / Revised Wireframes + Prototype / UI Kit

 

Affinity Map.

I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. Then, I drew insights from the synthesized information, which informed recommendations for the next iteration of the design. Since all of the insights involved usability issues within the checkout process, I knew I had to make improvements to those pages for the next iteration. Feel free to view the full affinity map here.

 

REVISED WIREFRAMES + PROTOTYPE.

Finally, I revised the wireframes and the InVision prototype based on the recommendations drawn from the affinity map. The changes are shown below. Feel free to interact with the revised prototype using the button below.

 

UI KIT.

While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Additionally, I prepared handoff deliverables in Zeplin in case I needed to share the design with developers.


 

Reflection.

Building a website for Mirror was a relatively straightforward project because many features have well-established design patterns. Therefore, I gained much experience in researching best practices and determining which solutions were best based on user needs. Additionally, since many people have used e-commerce websites before, user expectations are more concrete, which makes it even more important for the website to reflect common e-commerce design patterns. As I learned from this project, usability testing can be a big help in discovering areas that are inconsistent with user expectations. Overall, I gained much perspective and understanding about the e-commerce experience.

Next Steps.

  • Prototype other features based on the persona’s user needs

  • Identify areas of improvement through user feedback

  • Design the UI for mobile and tablet screens

  • Continue organizing design deliverables for handoff