MIRROR

DesignLab UX Project - User Research Case Study

CHALLENGE

Mirror, established in 1994, is a successful clothing retail chain has lagged behind in spreading to e-commerce world. They sell affordable and stylish clothing for children, men and women. Over recent years, they have recognized the benefits of e-commerce for both the business and their customers.
Mirror seeks to modernize their brand and develop an online presence for its target market, the working adult who seeks to both lead and keep up with current fashion, joined with basics and timeless pieces.

Solution

Develop a responsive e-commerce website (compatible on mobile, tablet, and desktop) where customers can easily browse and purchase apparel. I also refreshed Mirror’s logo and branding to reflect the changes made to the website.

Overview

Project type: UX/UI, Responsive Design, Branding
Timeline: 80 hours
My Role: User Research, Strategy, Interaction Design, UI Design, Prototyping, Usability Testing
Tools Used: Sketch, Illustrator, InVision, Zeplin
Note: This is a project I completed for Designlab’s UX Academy. Mirror is a fictional clothing company but the research is organic and the design is based on real user voices, in combination with mentor and fellow student feedback

design process

Research

REsearch goal

I aimed to define the target market and to identify behaviors, pain points, and goals of online shoppers. Additionally, I sought out to understand how the look and feel of a brand affect users when they are shopping online.

RESEARCH COMPONENTS

  • Secondary research
  • Competitor analysis
  • Customer interviews
  • Contextual observations
  • User surveys
  • User interviews

Research Plan

The Research Plan was created in order to help define the target market and to discover their behaviors and views on online shopping.

Research

SECONDARY RESEARcH

Though an established brick and mortar store, this was Mirror's first time breaking into the online market. I began with a competitor analysis and looked at sites of Mirror's competitors to identify the strengths and weaknesses of existing online clothing stores. I also created provisional personas to understand who might make up Mirror's user base.

Primary Research

To better understand the pain points and goals of those who shop for clothing online and to test my assumptions, I developed an interview script and conducted user interviews with participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their online shopping habits and preferences.
"My biggest fear when shopping online is that I will buy something, it won’t look anything like it does online."
"I love the convenience factor of ordering online! I get nervous things won't fit, but it's worth it to me to not have to drive out to the shops as long as they have a decent return policy."
"I don't bother ordering if there aren't any reviews. It's just asking for a hassle."
I also created and distributed a questionnaire to 84 participants.

To view users in action with the online shopping experience, I conducted a user observation, asking the user to walk me through the process of browsing for an item on an online clothing store they frequently use. During user interviews, I recorded the audio of each and took notes as I asked questions and observed.

Through my interviews, surveys and observations, I discovered that pop-ups and poorly placed advertisements dampen the online shopping experience, so this should be carefully managed in the design. Reviews are essential and relied on by online shoppers, decreasing the doubt and uncertainty of fit. Furthermore, an accurate size guide and description can reduce the hassle of returns.

Where to now?

Based on the findings, I decided that Mirror’s new website and branding should include:
  • Highlighted deals and promotions
  • Product reviews that focus on fit and sizing
  • Clean and modern interface designs appealing to both men and women

Define

Empathy MAP and PERSONA DEVELOPMENT

After identifying user behavior and need patterns and establishing research-based guiding principles, research was synthesized into a set of deliverables, which would guide all stakeholders in keeping the users as a priority in the user-centered design process.
To further explore relationships and develop the persona that emerged from the data I’d gathered and mapped, I created an empathy map made up of observations and statements from my user interviews.   This helped me understand the emotional state of the user and the world they live in. It also allowed me to discover common patterns within user data from which insights could be identified.

Based on my research, I created my primary persona, Danielle. Danielle enjoys wearing contemporary and fashionable clothing at a reasonable cost. She works full time and appreciates the convenience of being able to order clothing so she can enjoy and appreciate a work-life balance.

These personas served as continuous reminders of the characteristics of the kind of people who would visit Mirror throughout the design process.
Following the personas, I drew a story board to illustrate how Mirror would fit into Danielle's life and pose as a solution to her online clothing shopping problem.
A product goals chart was also in order to determine where the users’ needs and the company’s needs overlap. This chart was designed with the intention to help keep all perspectives in mind in order to create a product that is beneficial for everyone.

Ideate

TasK flow

Using our (thus far) findings and developed personas, I was able prioritize features for the site and chart a task flow. The task flow show's the most common path for a user from their entry point to the final end goal of purchasing an item.

USEr flow

I then took the task flow and predicted various ways a user would end up on the site and what possible actions and decisions they could make, providing a user flow. Mapping this user flow helped me understand the key screens to prioritize as I began wireframing.
Click to view the full user flow

WIREFRAMES

I began to wireframe key pages informed by my user flow. This set of initial wireframes shows the site pages that a user would encounter as they progress from entering the site on the home page towards purchasing an item of clothing (specifically for this flow: purchasing a pair of women's size 12 jeans).
I also developed wireframes for tablet and mobile to reflect the adjustment in screen size.

VISUAL DESIGN

LOGO DESIGN
As part of the branding refresh, I iterated on several logo designs: first brainstorming with hand sketches, and then digitally.

In creating a logo for Mirror, I sketched ideas which incorporated ideas of reflection with symmetry in shapes and letters. I also explored more simple and straightforward designs that used wordmarks since so many of the brand attributes alluded to a neutral, simple and modern feel.

While sketching, I kept the logos of the competitors I had researched in mind and considered how Mirror's identity would position in that context.
The initial explorations shown above gave me a choice of directions I might pursue. Reflecting once again upon Mirror's brand attributes, I determined that a sans-serif wordmark best conveyed the feeling of a brand that was chic yet modern and neutral. I felt that it stood out from the direct and indirect competitors I'd identified in the initial phase of the project, while also providing it a look that fit within the fashion market. Lastly, I felt it would be a good match in terms of appealing to users like Danielle's persona, as well as the broader customer range that Mirror aims to attract.
STYLE GUIDe and UI Kit
With the logo designed, I then created a Style Guide and UI Kit to effectively guide me in working on the interface design. The user interface design processes included collecting inspiration in a Pinterest moodboard, designing icons set to supplement communication between the webpages and users, incorporating Mirror’s new brand logo and a brand style tile to showcase Mirror’s new design elements.

Prototype

MOCKUPS

I incorporated the branding and UI into the wireframes and made significant revisions based on feedback.
Images were gathered from Anthropologie, J. Crew and Madewell sites.

Test

USABILITY TESTING

overview & Goals
I created a high-fidelity prototype of the main user flow through Invision in order to test the usability of the website. My main goals were to:
Through a variety of methods including in-person usability tests and remote tests with Google Hangouts screen share, I was able to assess the user experience according to my test goals.

I tested the Mirror prototype on a total number of five participants. The task was for each user to browse, select hi-rise crop jeans, navy, regular, size 12 and add the item to their cart. The test was done remotely for three users (using screens-hares via Google Hangouts, and in-person for two (using my laptop). You can see the full usability test plan here.
KEY FINDINGS
Overall, users were able to navigate the site smoothly, find items efficiently, and navigate to checkout successfully. Feedback was related to both the browsing experience as well as the UI and aesthetics. 2 of the users expected the item to be in the pants section until they noticed a separate denim section.

Overall impressions: Intuitive, straightforward, clear and neat.

I compiled all of the usability test data into an affinity map to visually represent successes, points for improvement and recommendations.

NEXT STEPS

Because of the short time frame, I only designed the key pages including the home, results page of a particular type of item, and checkout flow for desktop, mobile, and tablet. Next steps would be to complete all other pages of the site. With further usability testing, I would be able to gather feedback to improve the product prior to handing off the design to a developer.

Reflections & Looking Ahead

This was my first user experience design project and it was quite exciting! Throughout the process I learned many techniques from interview best-practices, to UI design, to prototyping and everything in between. Although this was a fictional company, I followed the same process that I would for any other UX project. In future iterations, I hope to explore designing and prototyping an intuitive and easy checkout process once a user has finished adding all desired items to his or her bag. Working on a fictional project may have its drawbacks, but experimenting on Mirror, a realistic sort of project, was both exciting and gratifying. 🙂

see more of my work

NETFLIX SOCIAL

Adding a feature to an existing app

TAL TOURS

A redesign for a boutique travel agency

BHUKU

Designing an  iOS app for book lovers