Mirror is a global clothing retailer. I designed a responsive ecommerce website and gave the Mirror brand a new look.

Find out how

Overview

Established in 1994, Mirror is a successful clothing company with over 400 retail stores around the world. They’re all about providing clothing that’s accessible for everyone with good prices and a variety of styles. Mirror has so far relied on physical locations to conduct business, and now wants to focus on building an online store to make shopping more convenient for their customers. They also want to rebrand the company with a modern, neutral, and fresh look.

Goal

To refresh the Mirror brand and build a responsive ecommerce website that meets the needs of their customers and business.

Solution

Empowered by user research and user testing, a responsive website was designed and Mirror was given a fresh, new look.

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 ✌️

Research & empathize

The first step was to uncover the needs, desires, and pain points of customers that shop for clothes online.

To help me discover these things, I analyzed industry competitors, conducted user interviews, and developed a user persona.

To cultivate empathy for the user, I also created an empathy map and storyboarded a typical scenario for accessing the future site.

Questions to answer

  • What features do users want clothing sites to have?

  • What problems do users struggle with when shopping for clothes online?

  • Why would a user choose one clothing site over another?

  • What sorting filters are most important to users when looking at clothing online?

  • Why do users prefer shopping for clothes online instead of in a store (or vice versa)?

Information architecture

Once I understood users’ needs, I set out to determine how to organize the website in a way that makes sense and helps acheive both user and business goals.

This involved conducting a card sorting exercise and creating a sitemap.

Interaction design

The research and components I’ve done up until this point can now inform how the site will be used and what an interaction with the site actually would look like.

This phase of the project involved creating task and user flows in addition to low-fidelity wireframes.

User interface design

Next it was time to jump into the actual UI of the website. Not only did this involve mockups of pages at various screen sizes, I also created a UI kit complete with design patterns to aid in the development and future iterations of the site. Since Mirror also wanted a simple brand refresh, I also designed a logo, prepared a mood board, and selected a new color palette and typography to match their brand values.

Bringing it all together

Complete high-fidelity designs of several pages were created in Sketch for desktop and mobile screen sizes and later implemented into a prototype using InVision.

Usability testing

Details

Implemented using InVision

Three participants

Ages 27–30

Participants were asked to complete a series of tasks while I took notes on their actions and asked questions to understand their decision-making process. These tests were conducted in person.

Objectives

Observe and measure usability on:

  • General site navigation

  • Finding specific items

  • Adding an item to favorites

  • Adding an item to the cart

  • The checkout process

Task Completion Rate

100%

Goals

  • Measure user success, failure, and pain points in completing the tasks

  • Discover ways in which the site design could be improved or changed in future iterations

Task Error-Free Rate

85%

What I've learned from this project

Design for people

Before designing anything, you must empathize with the people that will be using the product, and understand their needs and pain points. You need to define your own assumptions and hypotheses and discover if they’re correct or not and why. Otherwise, you might be designing a solution to a problem that doesn’t exist or a solution that nobody likes.

Function over form

A pretty interface uninformed by research, empathy, and common design patterns probably isn’t very usable. Follow usability heuristics.

A design can always be improved

Particularly with digital products, iteration is a necessary part of the design process. Even if you think a design is “final” and fulfills all of your user needs and stakeholder goals, there is always room for more testing and iteration. You’d be surprised how much your own assumptions can be misguided or just plain wrong.

More Projects