Mirror

Rebranding and website for clothing brand

Info

Role

Lead Designer

Timeline

2 months

Project

Mirror is an international clothing brand with over 400 stores. Customers provided feedback that they want to shop online and have access to expanded inventory and a seamless shopping experience.

Overview

Problem

Mirror has an existing customer base and they are wanting to have the flexibility to shop online and find the sizes/styles they need. The Mirror leadership is also wanting a complete rebrand. How can I provide the Mirror customers with a responsive web design that allows them to shop from anywhere?

Outcome

I created a new logo and brand identity, conducted user research, and delivered high-fidelity mockups and prototype for Mirror.

Research

Finding Quantitative Data & Metrics

To understand the e-commerce space, I conducted secondary research to determine market size and users’ wants.

81%

Of online shoppers seek a seamless transfer between devices throughout the purchase journey.

78%

Of consumers value convenience as one of their top priorities

38%

Of consumers feel online reviews are critical to help make decisions while purchasing

Competitive Analysis

Once I understood the existing market, I compared websites of various primary and secondary competitors to Mirror. To establish a baseline for the expected features for an e-commerce site.

Conducting User Interviews

Interviewed 3 different participants to understand their goals, motivations, and frustrations with online shopping

Conducted 30-60 minute 1-on-1 virtual meetings

Demographics of participants

The age range of participants was 18-37
Male and female
Student and professionals

Define

Defining the users’ needs, goals, and frustrations based on research findings

I took all my interview notes and transformed them into digital sticky notes. The sticky notes were organized based on connections that emerged between my participants.

Motivations

Stores they can trust
Enjoy browsing
Want product reviews and photos
Easy return process

Frustrations

Sizing inconsistencies
The filters not being sticky
Not having a customer support line

This persona was my guide for creating the Mirror website because she is an experienced shopper who shops for her family. Her needs, motivations, and frustrations help me design for a broader audience.

Understanding Mirror’s Information Architecture

I started this process by conducting a heuristic analysis to develop the sitemap. Task flow and user flow were based on the user interviews. The most essential task flow was determined to be the checkout process because it is the primary need for business and customers. Despite this being one flow, it addresses multiple pages that would need to be created for the website.

Product Roadmap

Finalizing and prioritizing the solutions for the product

The product roadmap acts as a guide for the product’s lifespan and makes sure the highest priority solutions are designed first. Decisions were based on user research and competitive analysis.

Ideation

Low-fidelity sketches, ideas & flows

I ideated over potential solutions, and user flows via brainstorming and crafting how might we statements. I used sketches to solidify ideas and draw out how I wanted the interactions to work.

Initial wireframes needed to allow users…

to shop via different methods (search bar, navigation menu), scrolling, trending items
to access savings (promo banner)
to see reviews of products (new arrivals, trending)

Design

Wireframes

After some initial sketches, I created wireframes to build out interactions and flows to test with users.

Hi-Fi and Prototype

Bringing the design into an interactive state

I decided to create hi-fi wireframes for the prototype because I wanted feedback on the imagery, mood, and UI elements of the design in addition to the UX elements.

Branding

Logo Design

I rapidly sketched 20 ideas that I felt reflected the brand words. After feedback from fellow designers, I narrowed down to 4 options. The 3rd option was selected because it conveyed modern and neutral due to the weight and sans serif font. It also showed a little bit of fun with the mirrored circles.

Mood Board

Testing & Iterations

Usability testing, findings & iterations

I conducted a small usability test with 4 individuals. I was looking to test the flow of adding a jacket to their shopping cart and how they would navigate back to the homepage

1. Color Palette Update

Before

Feedback during the usability study was that the palette was very muted and lacked contrast. The buttons did not stand out.

After

Just a simple change of the primary color resulted in a more impactful CTA.

2. Product Page Update

Before

Feedback from the usability testing was the dropdown for the size selector was not user-friendly. Also users did not like that there was only one image of the product.

After

I updated the clothing size selector, making it easier for the user to immediately see what sizes were available.

3. New Features Added

Mini shopping cart

Quick add feature

End Result

Final application designs & solutions

4. Mirror Product Description with Reviews

Reflecting on the project outcomes

01

More user research

I had a low number of participants, and I would have liked to recruit more participants for more reliable data. I also should have created a customer experience map to better understand the user shopping experience.

02

Be insight-driven, not process-driven

I focused too much on the end product and needed to allow the user research to guide me. I was focused on completing UX processes instead of thinking - “so, how does this fit into the bigger picture?”

03

Do not fall in love with a design

I used a color palette that I liked but did not meet accessibility guidelines. I need to remember that I am designing for the customers and not for myself.