Mirror

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.

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 Challange

For the past 25 years, Mirror has conducted business simply as a brick and mortar store. While they have built a great base of loyal customers, they are finally ready to take the leap forward and have an online presence. The challenge is developing an online experience that will provide the same level of familiarity and ease as walking into the store provides.

Research

Market research
Competitive analysis
user interviews
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

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.
View Asset

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.

Define

EMPATHY MAP
PERSONA
STORYBOARD
PROJECT GOALS
FEATURE ROADMAP
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 target user.

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.
View Asset

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.
View Asset

Storyboard

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

Project Goals & Feature Roadmap

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. We complement the project goals with a feature roadmap, a list of features based on our user research each given a priority level.
View Asset

Ideate

CARD SORTING
SITEMAP
TASK FLOW
USER FLOW
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

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.
View Asset

Task & User Flows

To better understand how users will navigate through the site to make a purchase, I produced task and 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.
View Asset

Design

SKETCHES
WIREFRAMES
LOGO DESIGN
BRANDING
I began the process with sketching out different versions of the home page based on the user feedback from previous activities and research of competitor websites. 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

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

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.
View Asset

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.
View AssetView Asset

Prototype

HIGH-FIDELITY PROTOTYPE
USABILITY TESTING
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 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 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.

Iterate

AFFINITY MAP
REVISED PROTOTYPE
UI KIT
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

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.
View Asset

Final High-Fidelity 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 Asset

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.
View Asset

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 and data. 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

Let's work together

Contact
Contact Form
Résumé
Download PDF
Message
LinkedIn Profile
DribbbleLinkedIn
2022 © Crafted in Alabama by Drew Binkley