Mirror

Project Overview

Background:

Mirror is a traditional brick and mortar clothing company looking to develop its eCommerce market. They have achieved success by selling a wide range of clothes at low cost to people of all shapes and sizes. Mirror has recently been looking to expand its eCommerce presence. Additionally, with the expanded market, the company is looking to refresh its brand image.

Challenge:

Mirror’s online launch needed to tackle two main challenges. The first to develop an eCommerce platform that is both easy to use and highlights their extensive offerings. Secondly, Mirror needed to develop a feature that would allow them to differentiate their company.

Role:

UI/UX Designer

Project Goals:

Develop an in-depth understanding of the fashion ecommerce standards and practices, as well as their user’s behaviors and experiences.
Identify common user pain points and design a digital solution that addresses underserved needs.
Synthesize research into a design for an ecommerce platform for a fashion brand that specializes in affordable clothing for a wide audience.

Deliverables:

Summary of expert interview and competitive research
Brand guide, user flow & wireframes
Mid-fidelity desktop prototype
Results of 1st round user testing

Process:

Competitive research to establish industry standards and opportunities
Interview industry consultant to identify possible pain points
Generate proto-personas to establish baseline understanding of what we currently know and understand about our users

Create user personas to synthesize research
Establish project goals, generate feature road map, identify key features
Build out sitemap and task/user flow

Generate concepts for the logo and define mood board
Refine concepts to a singular approach. Create digital wireframes and apply established brand and UI standards to design
Iterate designs and finalize key wireframes for user flow

Build mid-fidelity prototype based on user flow/testing requirements
Planned and carried out user testing
Compile findings and iterate on user flow/wireframes

1. Research

In order to meet these challenges, competitive research and user interviews were conducted. The goal of which was to answer the following

Competitive Research: Identify what are industry standard services. Assess relative strengths/ weaknesses and identify possible routes to differentiate Mirror.
User interviews: Conduct 1:1 interviews to identify common shopping habits and potential pain points when buying clothes online. Additionally aim to identify what motivates users to choose between instore and online clothes shopping.

There is a great deal of potential in the online clothing market. All interviewees liked the convenience, privacy, and versatility of shopping online. All participants also experience many frustrations in dealing with brick and mortar stores. The most common complaint being available inventory in the right size for customers. Additionally, aggressive sales tactics and lack of desired items were also cited as deterrents. In comparison, online shopping is viewed as being easy and a time saver.

Research Takeaways

All interviewees stated that they were concerned about their order being true to the product listing. Of even greater concern, all interviewees expressed doubt that the product they order would be the correct size. Proper sizing was the 1st or 2nd most important factor for all interviewees. Three interviewees also stated that they expected to have to return an item at least once before they found the right size. Online size charts and other current measures are considered not enough to fix this problem. Concerns were also raised about data security, shipping time, and product quality.

Observed User Desires

Effective help in finding the right size.
Clear site navigation/ ease of browsing and viewing items.
Established trust that products will be true to listing.
More product information, photo angles, model shots.
Detailed and timely shipping information.
Broader representation of body shapes.

2. Define

Mirror needs to provide an experience that makes clothes shopping more efficient and enjoyable. To achieve this, Mirror must undertake the following:

Project Goals:

Improve the shopping experience by optimizing site navigation to minimize user confusion, bounce rate, and improve product discovery.
Design a solution that addresses user uncertainty regarding product quality and accuracy of a perfect fit.

These goals will set Mirror apart from the competition. Our key value to our customer is to be a place where clothes shopping will be an enjoyable experience.

Feature Road Map

An extensive list of features was generated from an overview of industry standards and user-identified needs. This list was then refined to key priorities for this iteration.

Key Features:

Size guide— An adaptive size guide that translates different clothing lines’ sizes into an expected measurement.

Clear navigation— Allow users to navigate through the site architecture efficiently.

Filter-based product catalog— Allow users to quickly find the products they are looking for.

Product recommendations— Provide users with recommendation based on their view history, orders, and favorites.

Detailed product information— Provide information about materials, care instructions, conservation information, and user reviews.

Users look for an article of clothing. They navigate through the catalog and then select their size/ utilize the size guide. Then proceed through the checkout process.

Users move through the homepage > catalog > product > checkout page. If users are signed in, their measurements are automatically applied. If not, new users can add theirs through the Fit Finder.

3. Design

Mirror’s brand is a mix of accessibility and refinement. It serves a wide audience while providing a finely crafted service. It requires a clean layout with bold friendly color accents. In addition, it needs an emphasis on photos, with neutral backgrounds and highlights of color to bring in upbeat energy.

The Mirror logo was based around the duality of standing out while still fitting in. The contrast created by the color inversion is meant to signify a bold independence while still being in harmony with one's surroundings.

A stately navy blue is used as the primary brand color to convey the sense of refinement and assurance of quality. Beyond the more energetic cerulean for highlights and CTA’s, white serves as the secondary color. This provides the contrast needed to put a spotlight on products and brand imagery.

Source Sans Pro is utilized to provide high readability for UI components, while also maintaining a modern humanist element.

Early sketches established a baseline structure that would highlight the main divisions in the product catalog. Additional real estate was allocated to promote marketing campaigns and additional services. Top level navigation was also drafted at this stage.

Additionally, at this stage the initial design of the product cards and menu were drafted. The quick add feature would be later refined to allow users to select their desired size and move the item to their cart.

As the wireframes went through revisions, greater emphasis was placed on ensuring that the catalog and product pages were minimal in design. The menu options were simplified and designed not to distract from the product.

4.Test

Overview:

Five people sat down to test the Mirror website. Three women and two men were given the task of finding a navy blue blazer, and identifying what size they would need. They separately sat down at a laptop and went through the site, with me in the room writing notes. After they completed the task, followup questions were asked based on what they said during the test.

Observations:

All participants navigated to the item product page in less than 1 minute, with the average time being 47 seconds. All users were able to identify a size they thought would fit them in three minutes.
There was 1 person that got stuck in a loop regarding the prototype that needed to go back to the home page.
3 users used the quick add feature to add to the cart while 2 went to the product page directly
4 users went to the blazers section of the catalog directly from the top menu.
All users clicked through to the Find my Fit page, all through the link on the product page.

Improvements:

The Fit Finder provided only instructions on how to measure and required the user to refer back to a size chart.
Confusion arose when the reference chart split the measurements for the recommended size.
Product recommendations based on size and body shape, additional style filter to be added to catalog page.

Next Steps & Revisions

Users were able to quickly locate the item of clothing they were looking for. Simplification of catalog page and improve the Fit Finder feature to allow for recommendations.

The most desired addition was to a size recommendation to provide users with greater confidence in their orders.

5. Takeaway

This project’s challenges and opportunities were tied to how diverse users’ experiences and behaviors were when it comes to shopping for something as personal as clothing. The main challenge was to develop digital solutions to a service that many consider to be best done in person. This solution also had to address prior negative experiences when shopping online.

However, this also proved to be the best opportunity to differentiate Mirror from the rest of its competitors. Overall, the Fit Finder did address the main concern about accuracy of sizing. Furthermore, in testing it proved to be a desired feature. This further proved to me that directly addressing issues unique to a service are often the best opportunities to improve that service.

The next big step for Mirror would be to further develop the Fit Finder. Ideally more options could be devised to identify the perfect fit, that would not be dependent on having a specific tool on hand. Additionally, there is a possibility to restructure the site around the Fit Finder service. Possibly providing stylist services and recommendations.