MIRROR

Responsive eCommerce website for a clothing brand

BRIEF

Mirror, started back in 1994, believes in making good quality but affordable clothing accessible to everyone. They’re a brick-and-mortar business with a global chain of 400 stores around the world that provide different styles of clothing for everyone. 

To keep up with the age of digital transformation, they decided to invest in an online store. 

Why?
Huge opportunity for online sales
Customers demand an online shopping option
Getting rid of the remaining inventory in their warehouses

GOALS AND OBJECTIVES

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. 

ROLE              UX Research, Product Design, UX/UI Design

CLIENT          Mirror

TOOLS           Sketch  |  InVision  |  Zeplin

TIMELINE      4 Weeks

How might we create an online presence with a fresh brand identity and an online store for Mirror while meeting both, the business and the user's goals?

EMPATHIZE

Research Goals
Research Methodology
Research Finding
Insights for Innovation
Research Analysis

DEFINE

User and Business Goals

Product Dev - Feature Roadmap

Card Sorting

Sitemap

User and Task Flows

IDEATE

Low and Mid - Fidelity Wireframes

Branding

Responsive Designs

Design Systems

PROTOTYPE

High - Fidelity Wireframes

Prototyping in InVision

TEST

Usability Testing

Affinity Mapping

Handoff to Developers

THE DESIGN PROCESS

ITERATE

Repeat the process - Ideate, Prototype, and Test

 

EMPATHIZE

USER RESEARCH

RESEARCH GOALS

Identify the target users and learn about their experience while shopping online.

01

Understand preferred shopping modality of users, i.e., what do they prefer to shop on - their phones, desktop, or tablets? Why?

03

Learn about the competitors and what they do well or can do better in providing a great shopping experience

02

Understand the technology (Augmented and Virtual Reality) trends and user demands to make the product future proof.

04

RESEARCH METHODOLOGIES

PRIMARY RESEARCH

Customer Interviews and Contextual Inquiry:  

User research was conducted through 1-on-1 interviews with 5 users to learn about their experiences and patterns they follow while shopping for clothing items online. I tried to cover participants from five provisional personas defined previously. I gathered as much as I could from the end-users to gain knowledge about their goals, frustrations, motivations, and analyze the scope improvement by empathizing with them.

THE YOUNG PROFESSIONAL
THE TRENDY MILLENNIAL
THE GRANDPARENT

SECONDARY RESEARCH

Competitive Analysis and study of trends online:

Identifying and analyzing some of the major competitors their products, sales, and marketing strategies helped gain some insight into the industry shopping trends.

INSIGHTS FOR INNOVATION

After conducting user interviews, contextual inquiry and analyzing the gathered data, three common insights emerged.

CONVENIENCE

The luxury of being able to view a variety of options at anytime-anyplace, and place an order seamlessly is what attracts the user to the brand

CONFIDENCE

Through interface design and/or service delivery, the user desires to be extremely confident about the size and quality of the product before buying the product online

EFFICIENCY

The choice of having faster and/or cheaper means of product delivery and product return affects the user’s decision of buying from the specific brand

RESEARCH ANALYSIS

Based on the secondary and primary research findings, the results were used to create several deliverables to better understand and empathize with our users. 

 

The aim was to help us understand the experiences of users within a broader context — physical, social and emotional. The goal was to be able to better ‘define’ what their needs are in order to build the desired product.

To better understand the target audience, to create empathy, and to give the user base a more ‘human’ feel, I created a persona. Jessica was more of a conscious shopper.

By synthesizing data from the research debriefs and 1-1 interviews, we created a fictional but realistic representation of the target user group.

USER PERSONA

EMPATHY MAP

To enter into a more human-centered mindset and to organize the research into a coherent vision, an empathy map for Jessica was created.

STORYBOARDING

Based on Jessica's persona, I also created a storyboard, showing how she would enjoy the benefits of shopping from Mirror. 

 

DEFINE

DEFINING THE PRODUCT

IDENTIFYING PROJECT GOALS

Based on the analysis achieved through research and empathizing with our users, the next step was to define the information architecture of the website.

 

For that, at this point, it was important to re-visit the original design brief to chart out the business goals and user goals gathered from the research. Identify where they overlapped, and where they differed.

Based on all the data gathered and understanding the goals it was now time to hone detailed requirements and prioritize by creating a feature roadmap. Given the time constraints, the product roadmap helped me to prioritize the features that were needed for the MVP.

MUST HAVE FEATURES

NICE TO HAVE FEATURES

SURPRISING FEATURES

FEATURES THAT CAN COME LATER

List of features mapped against the interaction/page

HOMEPAGE

PRODUCT DESCRIPTION

CUSTOMER EXPERIENCE

CHECKOUT

SEARCH AND NAVIGATION

ACCOUNT CREATION

Being an e-commerce website, Mirror would be extremely heavy on information. It was crucial to lay down the overall structure of the website.

 

Based on the results of the card sorting exercise, a sitemap was created to show the relationship between the content on the website. I broke down the product categories into subcategories, to assist in understanding the filtering criteria.

USER AND TASK FLOWS

Created User Flows and Task Flows helped visualize how Jessica, and eventually the target user audience, might interact with the website to complete various tasks based on different scenarios.

 

IDEATE

At this point in the design process, I began creating low-fidelity to mid-fidelity wireframes and then responsive wireframes. I tried to emphasize priorities that arose from the user research and the client brief keeping in mind the product development roadmap: a clean and intuitive website with options to see product reviews, blogs, multiple filters, and many other features.

RESPONSIVE WIREFRAMES

Desktop HD: 1440 px X 1024 px

Tablet: 768 px X 1024 px

iPhone 8:  375 px X 667 px

BRANDING AND UI KIT

Once the wireframes were created it was then time to work on visuals on the Mirror brand. The re-branding of Mirror was done to be more modern, luxurious, and inviting. The logo, typography, color palette, and imagery was worked out. 

 

Thereafter, based on the principles of Atomic Design by Brad Frost the idea was to define/design the small, independent - atomic - parts, to help build the large molecular structures.

Defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the Mirror Brand.
 

Source: Atomic Design Icons

by Marivi Carlton - Dribbble

 

PROTOTYPE

HIGH-FIDELITY WIREFRAMES AND PROTOTYPES

After creating high - fidelity wireframes, I create a prototype in InVision for the user to accomplish a defined task.

Scenario: You want to buy a dress for your friend that she can wear to work or any formal event. 

Task 1: Add a navy Blush Pink women’s formal dress of XS size to your favorites list. Task marked completed on the Favorites Page.

Task 2: Proceed further to purchase the same product. Task marked completed on the Shipping Info Page.

Show More
 

TEST

USABILITY TESTING

Once the interactive prototype was designed, we conducted usability testing to study how people respond and interact with the design. 

TEST GOALS:

To see how users react to the design of Mirror Prototype.

01

To spot the elements on the website that create frustration or confusion to the user while they perform the required task.

02

To examine how much time does the user take complete the task.

03

To observe where the user is able to predict the upcoming step while purchasing a specific product.

04

Individual data points gathered were categorized as seen in the image. Based on the insights gathered from the affinity map, the highest priority revisions and prototypes were created on the website. 

TEST RESULTS AND DEVELOPER HANDOFF

TEST RESULTS

SEARCH FUNCTIONALITY PREFERRED TO BE THE FIRST OPTION WHEN LOOKING FOR A PRODUCT

Next steps: To build the search bar auto-complete functionality in the prototype to assess the user's navigation pattern and user's confidence in finding the desired product.

EMPHASIS ON USE OF FILTERS 

Next steps: To enable all of the filter options and create multiple search paths using different scenarios.

CONFUSION ABOUT NAVIGATION/ACTION DUE TO INACTIVE BUTTONS ON THE PROTOTYPE

Next steps: To enable all of the buttons in the prototype and hand off the design to developers. 

DEVELOPER HANDOFF

Using Zeplin a developer handoff document was created. Click to view the document here.

NEXT STEPS

Given the time constraints, the second round of usability testing could not be conducted. The next steps would include creating multiple user and task flows, create multiple paths in the prototype, and conduct a second round of usability test using the updated prototype!