0-mockup.png

Mirror

 

Mirror

E-commerce Web Design

 

Client: Mirror, a fictional clothing brand

Timeline: Aug - Sep 2018, 4 weeks

Deliverables: Website prototype, Branding

Team: Solo, with mentor guidance

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.

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 learn general background of the field and to gain a sense of current behaviors of shoppers, I started with market research. I found general information about the e-commerce clothing industry and noted the common trends and pain points of online clothing store websites.

 

Competitive Analysis.

I then 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 data, 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 gather qualitative data 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.

I organized data points from each interview participant into an empathy map in order to empathize with users. I then rearranged the data points into related groups to gain insights about the target user’s needs.

 

Persona.

Next, I created a persona “Tiffany” to represent the user needs synthesized from the empathy map. Tiffany’s goals, motivations, and frustrations also reflect the majority of data points collected from 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 analyze how the participants structured certain information.

Feel free to access the raw data here.

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

A snapshot of one of the card sorting rounds.

 

Sitemap.

Next, I created a sitemap in order to visualize how the information can be structured such that the user can intuitively navigate throughout the website.

 

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.

 

User Flow.

To analyze the flow in more detail, I explored the possible paths that users could take while ordering products in a user flow diagram. This 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 started by sketching ideas for Mirror’s home page to get a sense of how the content should be structured.

 

Mid-fidelity Wireframes.

I then created mid-fidelity wireframes in Sketch and imported them to an InVision prototype, which demonstrated the basic layout and interactions of the website. Below are the wireframes of some of the main screens.

 

Branding.

To develop the branding, I gathered inspiration in a mood board and brainstormed logo ideas. Since Mirror branded 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: Prototype / Usability Testing

 

Prototype.

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

 

Usability Testing.

Objectives:

  • To test if users can accomplish tasks successfully

  • To identify areas of difficulty and inconsistency within the website design

  • To determine the overall usability of the website

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, gathering data from direct observation and audio recordings. The overall completion rate was 100% and the error-free rate was 83%.

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. I then used this data to draw insights and recommendations for the next iteration. I ranked the recommendations from high to low priority based on the severity of the problem.

 

REVISED WIREFRAMES + PROTOTYPE.

Finally, I revised the InVision prototype based on the recommendations drawn from the affinity map. Feel free to interact with the prototype by clicking 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 designs with developers.

 

 

Reflection.

In the end, we were able to design the UX/UI and branding for Mirror’s budding online presence. By keeping the target user in mind and building upon e-commerce design patterns, we began the process of creating an intuitive and efficient online shopping experience. With more time, I’d aim to gain more insights about the user through research and discover areas of improvement through the iterative design process.

Next Steps.

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

  • Identify areas of improvement through user feedback

  • Design wireframes for mobile and tablet screens

  • Continue organizing design deliverables for handoff