Mirror Clothing Co.

Allowing customers to clothes shop online with ease

E-Commerce Responsive Web Design

A mockup of the Mirror website on a Macbook Pro.

Roles

UX/UI Designer
UX Researcher

Tools

Figma
Optimal Workshop
Whimsical
Maze
‍

Duration

12 Weeks

Project Overview

Background

Mirror is a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. Due to no online presence, they are missing out on sales to other competitors with online stores. They also aren't able to clear the overstocked products sitting in the warehouse as efficiently.

Design Challenge

Since their website was outdated and didn't allow customers to shop online, the main task was to create a site that was easy for customers to use and purchase items. The company also needed a new logo to create a more modern brand image.

Design Objective

Research

In efforts to understand the market and the target audience, I analyzed the websites of companies that were direct or indirect competitors. I created some competitive and comparative research and conducting interviews to test my hypotheses and find blind spots.

Secondary Research

Market Research Trends

The target audience is more socially conscious than past generations.

  • Users want to support businesses that have similar values and beliefs and fund organizations they believe in.

Users are more aware of what good sustainable and ethical business practices look like.

  • Customers are intentional about giving their business to companies who are careful about their carbon footprint and kind to their workers.

Competition is based more on who can give the customer the best experience than the best clothes.

  • Customers have many retailers to choose from that offer similar things. Their decision comes down to whose site is easiest to use and whose shipping process is the smoothest.

Competitive Analysis

Primary Research

User Interviews

Collected from 3 live interviews and 43 survey responses
Ages 18 - 54 years old

Summary‍

  • Participants want to be able to initiate returns easily
  • They hate websites with too many popups / ask for info or account too early
  • They wanted accurate size charts and body type matches from past customers
  • Participants want reviews and photos
  • People love a website with good usability

Card Sorting

During the card sort, I found that Gen-Z and Millenials would categorize certain products differently which affects how the filtering function would be created for occasions.

Define

Next I took our data from our research and created an idea of what the ideal experience and user would be like. This helped me set goals and timelines going forward.

Persona

Project Goals

Ideate

The purchase flow being the most important flow to both the business and the users was my main focus when I began to brainstorm about the design. I also took into account that users would be entering the site in many different ways whether through Instagram ads or Google search. Lastly, I kept those key findings from the research stage as I began sketching and designing in order to create the best solution possible for all parties.

User Flow

Task Flow

Sketches

UI Kit

Prototype

After creating the first version, I slowly narrowed down what product would be best for the user and would create an experience that was enjoyable and efficient.

Site Map

Low Fidelity Prototype

High Fidelity Prototype v1

Test

In order to create the best possible version of the website for the users, I ran some usability testing and found what could be improved so that the experience could be heightened.

Affinity Map

Pros

  • Easy navigation for users
  • Aesthetic is pleasing to the eye
  • Good sizing for buttons and font for usuability (especially those with visual impairments)

Cons

  • Undeveloped search filters
  • Missing search bar function
  • Poor subcategories in results pages and home categories

Priority Matrix

Next Steps

Final Prototype

Final Prototype