Mirror

 

Overview

Mirror, a thriving clothing company, sells their clothing in over 400 stores spanning 32 countries. They sell fashion-forward clothing at an affordable cost. Right now, Mirror sells their clothing in brick and mortar stores, but they are hoping to take advantage of making sales online. In order to do so, Mirror plans to launch a user-friendly e-commerce website to sell their clothing online.

 

Challenges

  • Understand what influences a person’s decision to shop online versus in a physical store

  • Determine who are potential customers for Mirror

  • Discover what are current points of frustration in online shopping

  • Determine what makes an online shopping experience enjoyable

 

Research

SECONDARY RESEARCH

I first implemented secondary research in which I examined the websites of direct competitors of Mirror (Old Navy, H&M, Forever21) as well as other potential competitors (Urban Outfitters, ASOS) to better understand the e-commerce market. While most of these competitors had strong UX and UI design, there were some flaws and gaps in the market that I felt I could fill with Mirror. Many of the websites were too busy with distracting messages and content or didn’t provide enough information regarding size recommendations. Another flaw I came across multiple times was filter and sorting categories that did not make sense.

 

INTERVIEWS

To better understand the needs and frustrations of online shoppers and to test my hypothesis, I conducted user interviews with potential users of Mirror who fulfilled the requirements that I had established. Using the interview guide I made, I asked each participant a set of questions regarding their shopping habits both in physical stores and online. As a result of these interviews, I found that shippings costs can make or break whether or not somebody shops online and inaccurate photographs or product displays is immensely frustrating. Being able to determine the size and fit accurately and to be able to categorize clothing and products quickly is essential to a pain free shopping experience.

MOVING FORWARD

Based on these findings, I ultimately decided that the website and brand for Mirror should include:

  • Very clear product descriptions with large high quality photographs of products from a variety of angles

  • Filters that allow users to view products based off of preferences (size, color, style, etc.)

  • A design that is modern and easy to navigate

 

Persona

As a result of the data that I collected from my research, I developed the persona of Lizzy Stevens. Lizzy works in the marketing department of a tech company in Boston. She enjoys experimenting with clothing, but stores often run out of her size quickly. This persona supplied a constant reminder throughout the design process of the attributes of the type of person who would be visiting Mirror’s website. When designing the Mirror website for a user such as Lizzy, it was important to remember necessary elements such as detailed product reviews, accurate size guides, and the option to create a user account with the company.

 
 
 

Information Architecture

Once the research was complete, I created card sorting activities that allowed me to understand how potential users categorize apparel. Most participants organized clothing into categories such as tops, bottom, accessories, etc. Some, however, organized clothing into seasons or outfits. As the majority of participants chose to put clothing into basic categories (tops, bottoms, etc.) I created a site map for Mirror in a way that reflected results of the card sorting activity.

Interaction Design

Using the findings this far, I prioritized features of Mirror into a task flow. This showed the way a user would enter the website and ultimately purchase an item.

Using the task flow, I developed a user flow that depicted the ways and decisions a user makes when searching for a product, adding it to their shopping cart, and purchasing the item. Mapping out the user flow allowed me to better answer questions such as does a user need an account in order to purchase an item or what does the checkout process look like? I used this information to determine what screens would need to be designed while wireframing.

The key element of the user flow that I came across in my research was the option to create an account with Mirror or to check out as a guest. Unless a user shops from the company frequently and wants the benefits of customer loyalty (discounts, membership points, etc.), most people choose to check out as a guest to avoid going through the process of entering or choosing a username and password. This was a choice that I wanted to be available to users.

 
 

Wireframing

All the while keeping my user flow in mind, I designed low-fidelity wireframes for the pages that the user would come across while entering the Mirror website and purchasing an item of clothing. I ran a preliminary round of usability testing on these wireframes, in which I had the participant search for a dress under $30.00 and add it to their shopping cart. I also designed tablet and mobile versions for these screens. The challenge here was ensuring that all the necessary information included in the desktop/laptop versions transferred to the tablet and mobile versions.

 
 

Branding

After completing the low-fidelity wireframes, I began working on logo design as part of refreshing Mirror’s brand. I wanted a logo that was striking but minimal at the same time. The new brand that I planned for Mirror was minimalistic, one that focused on the products.

With the logo designed, I then built a style tile and UI kit to help me effectively design a clean modern look for Mirror. I ultimately decided to go for mid-century colors on a stark white background with complementary sans serif typefaces. During my research phase of this project, I found that many websites were often too busy and disorganized so I really focused on a style that let the products speak for themselves.

User Interface Design

Using the style tile and UI kit as reference, I created hi-fidelity responsive wireframes and built a prototype using Figma to show the process of a user finding an item of clothing, selecting the desired color and size, and adding it to their shopping cart. I also designed tablet and mobile versions of these pages.

 

Usability Testing

Using the prototype I created with Figma, I had a total of 3 participants work through the flow of the prototype. My main goals were to:

  • Exam how users navigate the site and perform given tasks

  • Establish whether or not users can successfully accomplish the tasks with ease

  • Observe how a user would recover from an error in the unlikely event that they encounter one

  • Identify any areas of the site that are confusing or inconsistent

 

Key Findings

  • Online shopping is more convenient than going to a physical store

  • Being able to search for products based off of needs, interests, and and preferences makes the whole experience more enjoyable

  • Shipping costs can add up and can be a deciding factor in whether or not a customer makes an order

  • Customers want high quality products at a reasonable price

 

Next Steps

Because I only designed the pages that were needed to work through a task flow, next steps would be to complete all other pages of the site. Once completed, I would be able to perform more usability testing which would allow me to generate more feedback to make improvements to the site before handing it off to developers.