Background

Mirror is a global clothing company that has over 400 stores worldwide. It has been offering affordable and good quality clothing to women, men and children at their brick and mortar shops. As e-commerce shopping grows in demands, they want to focus on their online site to increase sales and refresh their logo and company image.

The challenge

Mirror is already late in the digital transformation games.  It still believes that online shopping service solves inventory problems and other sales problems by maximizing the user's experience on the responsive platform. We want to develop Mirror's brand image to appeal to its customers and bring a new look and delivered Mirror's voice effectively.

The outcome

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

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

Role

UI/UX designer responsible for user research, strategy, UI design, prototyping, visual design, usability testing, and branding within a Lean UX framework.

Research

In order to gather insights on the subject, I have conducted two rounds of research. A competitor analysis to better understanding of e-commerce website landscape and, 1:1 interview which helped me to identify costumers’ needs, pain points, requirements and to identify opportunity areas to design against.

Competitive analysis

The competitive analysis was conducted to get a better understanding of already existing platforms, including both direct and indirect competitors, and to identify key features and requirement.

Summary of finding

Some of the best practices I identified include: having models wearing the product in natural context by providing shooting from different angles, suggest matching or related items and avoid clutter to create a seamless experience.

1:1 Interview

Research setup

Interviewing 3 participants for about 30 minutes over the phone. They are all married women between 30 and 40 years old who shop online for convenience.

Define

From the research phase, I was able to gather insights which were synthesized into a persona that will later be used as a basis to design against. Then. I created a storyboard based on the persona to identify possible user scenarios.

Persona

Maria is the primary persona that I have created based on the research findings. Maria is an account manager and a mother of three children. She loves shopping for new clothes, but she’s very busy and it is very difficult to find the time to go in-store. Maria shops online mainly for convenience, however, she’s always worried about getting the right size and the ease of the return process. She appreciates websites that make this clear and easy for her. Moreover, she doesn’t want to miss out on products on discounts which allow her to save some money.

Storyboard

The storyboard focuses on Maria’s experience of purchasing clothing online of the wrong size. Maria ordered a dress from an online shopping store (not Mirror) and she gets the wrong size, the returning process is extremely complicated for her. She's very frustrated about it and she decided to return the dress at the physical store. When she goes back home, her daughter tells her about Mirror and the option to try first and pay later! Maria decides to try right away. She finds it easy and straightforward, exactly what she needed.

User flow

After defining the pages in the sitemap, I have started creating an user flow to define possible journeys and paths Maria might go through. This helped me to identify the most important screens, identify possible scenarions and outline how those are connected with each other

Style guide and branding

After having defined flows and page structure, I went through a few iterations to decide a design language and visual direction for the website. I wanted to create a design style that represents Mirror as modern, affordable and stylish to its customers.

Refine

Within this phase I have created a prototype to test with consumers and gather input for improvement. The participants were given the task of

• Buying a sweater and jeans that recommended by Mirror.

• Pink dress for your mother’s birthday and adding Medium size for her to try on.

• Ordering an elderly neighbor’s grandson a jacket

Usability Testing

3 participants were asked to walk through the prototype. I asked each participant to complete ordering a document through the steps according to the information in the scenario with a few steps I provided. I observed each and took notes as they navigated the site and ask questions after they finished.

Test Finding

I was able to find 3 participants and schedule a test. They were family members and friends. They were 3 participants ranging in age between their 30s to 50s as well as myself as moderator.  From the start to finish, sessions last about 15- 20minutes. 100% of participants were able to complete their tasks to check out and buy their products. Most errors were minor due to the limited functions of the platform.  For examples different ways to return to pages by using breadcrumb or click brand name or their habit to use a back arrow. They were confused with Try-on button and suggested it needs more explanation of its purpose.

CONS

• Confusion of Tryon Buttons

• Unclear size chart

• Weak promotion
  

Next steps

Through findings from user testing, I need to improve a couple of problems below

• Find a way to increase Tryon button’s functionality

• Size chart that can be personalized as tailor shop

• Replace icons on the top menu

• Add an announcement bar in the header to notify information quickly

Takeaways

The most interesting part of the project is the research process. Directly interacting with users and getting feedbacks from them is driven me to upgrade the platform.