MIRROR

Responsive eCommerce website for a clothing brand

Overview

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. 

Product   

Role        

Client   

Tools     

TIimeline

Responsive e-Commerce Website, New Logo   

UX Researcher, Interaction Designer, UI Designer

Mirror

Figma  |  Zeplin  |  Photoshop

4 Weeks

The Problem

Increasing demand for online shopping has affected the traditional method of buying clothing from physical retailers which led to closing down many retail stores.

Also, the recent shutdown because of the Coronavirus proved that by not having an online store Mirror is missing many opportunities. 

The Overview of My Problem Solving Process

Empathize

Jumpstarting Research

The first step for me was to discover and learn about the users, and get more insights into a better understanding of the problem space. That is why I started my design process by conducting user research.

Research Goals

01

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

02

Identifying user’s needs, interests, and pain points when shopping online for clothes.

Research Methadologies

Primary Research

  • Customer Interviews - Gain knowledge about the user's goals, frustrations, motivations, and analyze the scope improvement by empathizing with the user.

  • Online study of the industry shopping trends.

  • Competitive Analysis - Identify major competitors and research their products, sales, and marketing strategies.

Secondary Research

Primary Research

User Interviews

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 each of the provisional personas defined. I gathered as much as I could from the end-users to understand the challenges they face.

The Young Professional
The Trend Follower
The Bargain Hunter

Secondary Research

COMPETITIVE ANALYSIS

Identifying the Key competitors and evaluating their strategies to determine their strengths and weaknesses helped me find some opportunity areas for our product and which threats should be mitigated

Fig: Competitive Analysis to identify best practices and opportunity areas.

Research Findings

After conducting user interviews and competitive analysis I came up with valuable data:

01
Fit can be the difference between a good experience or a bad one and comprehensive customer reviews about "fit" can help users to choose the right size.
03
Free shipping and flexible return policies are necessary. The worst-case scenario is a bad fit + bad return policy.
02
Product recommendations based on their shopping history can help users to have a more convenient shopping experience.
04
Reliable and complete product information is crucial. Also, users would like to see products from all angles. 

Insights for Innovation

After conducting user interviews, competitive analysis and analyzing the gathered data,

I was able to categorize the insights into these 3 categories

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

Efficient

Time saving and easy to use. The user wants to receive the right amount of information without feeling overwhelmed

Convenience

Being able to view a variety of options, and place an order seamlessly is what attracts the user to the brand

Research Analysis

After getting insights from user research I had a clear understanding of who my target user would be to create a persona. The aim was to help me understand the experiences of users within a broader context — physical, social, and emotional. It also helped me to better ‘define’ what the user's needs are in order to build the desired product. 

User Persona

By synthesizing data from the research debriefs and 1-1 interviews, I created a fictional but realistic representation of the target user group and I referred to her throughout the entire product development process. Emily is a millennial and wants to express her individuality through fashion and she is more of a conscious shopper.

MEET EMILY

Define

Identifying & Aligning User Goals with Business Goals

After interviewing potential users and competitive analysis, I aligned their needs with Mirror’s business goals to develop a common understanding, find compromises, and formulate user goals. This helped me gain full clarity and aligned all parties involved before making feature decisions.

Product Development -Feature Roadmap

Based on my user research conclusions, the business’ needs, the persona, and all the other data gathered I created a feature roadmap. Given the time constraints, the product roadmap helped me to prioritize the features that were needed for the MVP. Click on the thumbnails below to see the features roadmap.

Evaluate the Information -Card Sorting

After identifying the major features of the site, I set out to make decisions on the organization and navigation on the site. To dig a bit deeper, I turned to OptimalSort for an open card sorting study. Users in Mirror’s target demographic were provided 30 cards containing various clothing items to categorize.

RESULTS

  • Most of the participants ended up sorting the clothes by type (tops, bottoms, accessories, ...) with some difference in names.

  • One person considered sorting items by occasion, but when asked about finding items she mentioned that she prefers to have both sortings in type and style.

  • Based on the result all the items will be categorized by type of clothing on Mirror’s website. Also, sorting by occasion will be included to cover both options.

Sitemap

After the card sorting insights, I roughed out a site map to help me focus on the users’ mental model of the site. The frame of reference is always “what does the user need? What will make this process easier and more pleasurable for them?”

Task Flows

Creating Task Flows helped visualize how Emily, and eventually the target user audience, might interact with the website. The idea for the task flow was to map the happy path for the task of buying a new sundress.

It's All in the Flows

The user flows were an opportunity to go deeper into the user needs. It helped me understand how might users interact with the website to complete various tasks based on different scenarios. I created three different scenarios based on the research result and also by considering Emily and her needs.

Ideate

Iterate, Iterate, Iterate

After throwing ideas and flows onto paper, I began designing variations in Figma. At this point, I ended up editing options from the various approaches together when I moved on to mid-fidelity wireframes. 

At this point in the design process, 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, multiple filters, style suggestions, and big images that show product details. I first began with sketches to get rough ideas on paper before diving into the details. 

 

Low-fidelity homepage wireframes

To make the website accessible to users, I created a responsive webpage for Mirror by adapting it to different screen sizes - desktop, tablet, and mobile. With the user in mind, designing for different screen sizes helped retain the consistency of the pages and created a better user experience.

Product Page Wireframes

Homepage Wireframes

Desktop HD: 1440 px X 1024 px

Tablet: 834 px X 1194 px

iPhone 8:  375 px X 812 px

Once the wireframes were created it was then time to work on visuals. The re-branding of Mirror was done to be more modern, minimal, luxurious, and inviting. I wanted Mirror to feel fashion-forward without alienating the mass market. Keeping these brand attributes in mind, I defined/designed the small visual parts, to help build the large structures. I started by creating a logo and then brand style tile in order to outline the color palette and typeface.

Then I defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the Mirror Brand. Mirror Design System was built to accommodate scalability, so components can work well alongside each other, at the same time, render well on various device resolutions. 

Prototype

High-fidelity Wireframes and Prototypes

With Mirror’s branding established, I designed high-fidelity mockups of Mirror’s homepage, category page, product details page, and shopping bag page. Then, I created a prototype using Figma to allow participants to interact with a functional prototype during usability testing.

SCENARIO:

TASK 1:

TASK 2:

Your friend’s birthday is in two weeks and you want to buy a gift for her. You’ve been shopping with Mirror before and want to explore the dress category on the website to see if you can find a one that you like for her.

Sign in to your account and then explore the dresses category.

 

Locate "Floral Mini Dress" and add it to your bag in size 2 and proceed to checkout. 

Mirror prototype.png

Test

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

01
02
03

Determine how easy it is for users to complete basic tasks the first time they come across the design

Identify features of the site that create confusion, difficulty, or frustration for the user

Determine ways to improve the website for more optimal user experience

The project resulted in a responsive eCommerce website with a new logo and branding that is relevant in today’s marketplace. The website has easy navigation, feature prioritization, and content organization. Also, users can browse through all products and filter them by size, color, style, and fabric.

The research will act as a foundation to build upon for future iterations - getting closer to users' needs.

  • Simplicity is strength. As a designer, we are often lured by attractive, trendy, and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems, and then come up with a design that solves it.

  • A UX Designer should consider marketing and business aspects as he/she works on design as well. 

More research and analytics would uncover additional pain points and would lead us to make better design decisions. Also, creating multiple user and task flows, creating multiple paths in the prototype, and conducting a second round of usability test using the updated prototype.