Mirror

Mirror is a very successful offline global clothing chain. They want to make any type of clothing accessible to everyone and believe clothing doesn't have to be expensive and last forever, that we should be able to change styles as we need and please.

UI/UX Designer
May 27, 2019 - June 30, 2019
Self-Directed (Mentor/Peer feedback)

Note: Mirror is a fictitious clothing company. This project was part of a course assignment through Designlab’s UX Academy. All research and design is based on real user interviews as well as feedback from mentors and fellow students.

The Challenge

Mirror is a global clothing chain with over 400 locations around the world in 32 countries. They came to us with the task of rebranding to a more modern feel and taking their product online with a responsive e-commerce website.

The Solution

• 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 that allows customers to browse through all products and filter by size, color, style and others.

PHASE 1

Research

To begin, it’s necessary to understand the market you are dealing with and the user associated with that market. I researched the online clothing industry, looked at direct and indirect competitors within the space and conducted user interviews. Below are my findings.

Market Research
Competitive Analysis
User Interviews

Market Research

With market research, I was able to get a better understanding of the online shopping industry. This includes demographics, trends and pain points.

Competitive Analysis

With the online clothing industry being such a large market, it is critical to understand both direct and indirect competitors. This will help Mirror set themselves apart from their competition.

User Interviews

I conducted several user interviews in order to collect information about their overall shopping experience - both in-store and online. Of the interviewees, 2 were female and 2 were male. All the interviewees fall between the ages of 21 and 46.

PHASE 2

Define

In order to define the target user and cultivate empathy, I first constructed an empathy map based on the interviews performed. From here I was able to see the users' needs and most common patterns from my users. This allowed me to create a Persona as well as a Storyboard to further understand my user.

Empathy Map
Persona
Storyboard
Project Goals
Feature Roadmap

Empathy Map

After conducting interviews, I was able to take those findings and organize them with an empathy map. This allowed me to clearly see user needs and common patterns.

Persona

Once I organized the data using an empathy map, I was able to create a persona. This persona reflects the target user for Mirror. With "Katie", we can better empathize with the target user throughout the design process.

Storyboard

Storyboards are a great tool to quickly illustrate the persona's online shopping experience. This helps us further understand the user, the user's pain points and how Mirror can help provide a solution.

Project Goals

From here, it's good to take a step back and combine the business goals with the user goals to form a project goals diagram. This allows us to have clarity and align all parties involved before making feature decisions.

Feature Roadmap

Next we complement the project goals with a feature roadmap, a list of features based on our user research each given a priority level.

PHASE 3

Ideate

Through the activity of having several participants perform an open card sort, I was able to gather enough information to further understand the users' organization techniques. From here I was able to apply those findings to generate a sitemap as well as both task and user flows.

Card Sorting
Sitemap
Task & User Flows

Card Sorting

I conducted an open card sorting exercise with 3 participants, 2 female and 1 male. There were a total of 49 cards of common clothing and e-commerce terms. Each participant was given as much time as they needed to perform the exercise.

Sitemap

I created a sitemap based on two things - existing e-commerce websites and findings from my card sort exercise with participants. This gives us a clear understanding of sections of the website and how they relate to each other.

Task Flow

To better understand how users will navigate through the site to make a purchase, I produced a task flow. This allows us to think through different scenarios and make sure all possible pages are developed to help the user complete a purchase.

User Flow

I also created to user flows. These allow us to think through different scenarios while a user explores and ultimately completes the check out process on Mirror's website.

PHASE 4

Design

I began the process with sketching out different versions of the home page based on the user feedback from previous activities. I then proceeded to add more context to these sketches through mid-fidelity wireframes. I also established the new look for the brand by designing the new logo and branding guidelines for Mirror.

Sketches
Wireframes
Logo Design & Branding

Sketches

To begin generating ideas for layout of the website, I sketched out several low-fidelity wireframes focusing on the home page design. I added annotation so that sections were clearly defined allowing me to gather quick feedback from testers and peers.

Wireframes

I took my low-fidelity sketches and reproduced the chosen layout in Sketch to create a mid-fidelity wireframe. Going through this process helps me think about overall hierarchy and visual layout of the website. I also used this prototype to test with users.

Logo Design & Branding

To wrap up the design phase, I focused on the logo and branding for Mirror. To help with this process, I created a mood board using Pinterest and chose some adjectives to help define Mirror's brand.

PHASE 5

Prototype

During the prototyping phase, I applied the elements from the logo and branding assets to the mid-fidelity wireframes in InVision App to create a high-fidelity prototype. This is the prototype I had participants test, going through a few different user tasks.

High-Fidelity Wireframes + Prototype
Usability Testing

High-Fidelity Wireframes + Prototype

Next step was to take my mid-fidelity wireframe and combine those with the logo and branding assets. Once I had this completed in Sketch, I created the high-fidelity wireframe prototype using InVision. Now I am ready for more user testing.

Usability Testing

I conducted 6 in-person interviews and had each participant perform certain tasks. I was able to collect valuable feedback from each participant helping me further develop the high-fidelity prototype.

Test Objectives
• Evaluate how users interact with the website
• Identify pain points for improvement
• Determine what can be done to better usability of the site
‍
Tasks
• Purchase a shirt as a Guest
• Purchase a product as a Member
• Sign into your existing account

PHASE 6

Iterate

Taking the results and findings from the affinity map, I was able to come up with a few recommendations for improvement on the website. I applied these recommendations and further developed the prototype as well as the branding assets/UI kit.

Affinity Map
Revised Wireframes + Prototype
UI Kit

Affinity Map

After conducting the usability testing, I was able to take my notes and findings and create an affinity map. Based on these findings, I was able to identify key insights and generate the top recommendations from test users. Taking these recommendations, I now had areas of the site I could improve upon, making for a better user experience.

Revised Wireframes + Prototype

Next, I applied the recommendations from the test users that I discovered from my affinity map to my high-fidelity prototype and made some other adjustments to further the product.

View High-Fidelity Prototype

UI Kit

Once I began the logo, branding and prototyping, I also generated and maintained a UI kit throughout the process. This document keeps all of the UI elements and patterns in one place for easy reference. I also prepared handoff deliverables using Zeplin so that developers involved with the project would have a good reference to styles.

Wrapup

I learned a great deal about the online clothing industry - both design patterns and the users related to the market. Performing the different research techniques has made me realize how effective and necessary it is to establish every project on hard facts. If I can understand the industry and the target market I am designing for, the more effective the end product will be. Sounds simple, but getting to that point takes hard work and sound techniques.

Next Steps

• Continue to improve on the UI kit, adding elements to complete the design
• Improve the prototype, progressing the functionality available to the user in order to get a more complete functioning site
• Continue conducting user testing of the prototype to discover more areas of improvement