MIRROR

An e-commerce and brick & mortar luxury retailer.

Project Overview

Bring MIRROR online and include a brand refresh.

Deliverables

Responsive site, Branding

Role

UX/UI Designer

Timeline

4 Weeks

INTRODUCTION

MIRROR is a premium apparel brand, complemented by a selection of exclusive internationally sourced products. They have their finger constantly on the pulse of fashion’s beating heart. The collection range of the company covers all age groups and offers high-quality apparel and accessories for women, men, and teenagers. Although MIRROR is extremely successful offline, they are lacking an online presence with only an outdated info website. We are here to take your business online with a new logo and ecommerce website.

01 Research

Empathize with users through research and observation

02 Define

Using our data to define our goals and create potential features.

03 Ideate

Gaining a POV perspective of our users and creating the base of our design.

04 Design

Creating a brand identity and bringing our work to life.

05 Test

Follow ups and updates.

01 RESEARCH

The most vital part of the entire process. It’s where place ourselves in our users shoes and try to understand their POV. Empathy helps us gain a deeper appreciation and understanding of people's emotional and physical needs, and the way they see, understand, and interact with the world around them. To achieve this, I created a detailed research plan which includes the use of competitive analysis, market research, and user interviews. But first we need to identify our goals.

Goals:

- Identify users pain points and favorable experiences when shopping online.
- Identify users goals when shopping online.
- Understand users online shopping expectations.
- Discover what makes MIRROR unique, and how we might stand out from our competitors.

COMPETITIVE ANALYSIS

To get a better understanding of the competitor landscape, I conducted an analysis on five of the most popular apparel retailers on the market. This allowed me to study some of the practices they employ and determine what works and what doesn’t. From the data gathered, I was able generalize what features and elements I should incorporate into MIRROR.

MARKET RESEARCH

- Experts predict that retail ecommerce sales will reach $4.13 trillion in 2020.
- Online shoppers make purchases via mobile more often than on PC.
- Free shipping is the most important factor for consumers when choosing a retailer.
- The average shopping cart abandonment rate is around 68.8%.
- Gen Z and Millenials are most likely to make a purchase influenced by social media.

USER INTERVIEWS

Interviews are great way to go in-depth about something with an existing or potential user, and they can result in quantitative data and qualitative data. It helped us identify and validate user demographic and understand their goals, needs, and pain points when shopping online. We interviewed a total of five people with different backgrounds.

Needs:

- Fast shipping
- Organized and clean website
- Discover new clothes to wear
- A way to gain outfit inspiration
- Ensured quality goods
- Fast checkout

Pain points:

- Surprise shipping costs
- Sizing issues
- Website crashing on release date
- Unorganized webpage
- Unfriendly return policy

USER PERSONA

From all the research we gathered, we created a fictional but realistic representation of our user persona.

02 DEFINE

After our research phase, we took a look at the data and thought about our business, user, and technical goals. We created a projects goal diagram to sort and identify the same goals between the three. We were also able to identify which features and elements to prioritize for our roadmap. With these core features in mind I created a sitemap which help me visualize how users might expect the content to be organized and displayed.

PROJECT GOALS

I listed out the overall business, user, and technical goals for MIRROR and then put them together to find the overlapping similarities. This will help us prioritize and define the goals we'd like to achieve from all 3 perspectives.

FEATURES ROADMAP

By reviewing our research findings, we identified and prioritized several features that can pose as solutions towards the user’s goals, frustrations and needs.

SITE MAP

We first started with listing out must-have features from our roadmap. Once we were satisfied with our selection, we slowly filled out the main touchpoints with categories and subcategories.

03 IDEATE

TASK FLOW

To understand the decision making process of making a purchase on MIRROR, we created a task flow with each step in mind.

USER FLOW

Using our persona and task flow, we tried to imagine the decision making and thought process when users shop on MIRROR. It begins with our persona arriving at the homepage and ending with purchasing an item at the checkout page.

WIREFRAMES

When creating the wireframes, I wanted to make sure MIRROR would use a lot of imagery. From our research, we discovered that users rely on visuals when shopping for garments. They want to see how a clothing item would look and fit on a body as well as inspiration for outfits. To cater towards my user group, I made sure the focus on most of the pages were towards the images. An example of this would be the product page. Models wearing the product are displayed front and centered to showcase garment.

An interesting and debatable design choice I made was the hamburger menu. Since MIRROR is more than just your average retailer, there were additional elements and directory on the webpage. During my research phase I discovered that there were some luxury brands that chose to use the hamburger menu as well. Some of these brands include Maison Margiela, Issey Miyake, Undercover, and Yohji Yamamoto.

04 DESIGN

LOGO DESIGN

STYLE TILE

We created two separate style tiles with different moods in mind. We wanted MIRROR to be associated with luxury and premium therefore, we went with the first version. Black is often representative of power and elegance while white represents simplicity and minimalism.

PROTOTYPE

We brought the wireframes to life by combining it with the style tile.

05 TEST

USABILITY TESTING

By conducting usability tests, I was able to refine what users were finding useful, and completely change up what they didn’t react well to. The users were asked complete a few scenario-based tasks that would test the main features of the app, and were asked how they felt about the prototype in general.  The results of the usability tests were recorded and analyzed.

Goals

- Observe usability and flow
- Observe how easily users find clothes
- Identify points of confusion
- Document length of time for tasks

Participants

- 3-5 participants
- Ages 18-35
- Fashion minded individuals

AFFINITY MAP

FINAL PRODUCT

REFLECTIONS

This was my first UX design project and it was an amazing learning experience. I was engaged in every step of the design process from start to finish. Looking back, I see how valuable research and user feedback is. It's important to create designs that align with users' needs and wants. From my initial research I was able to identify two types of shoppers within our user base, mission-driven buyers and browsers. To satisfy both groups, I introduced editorials and lookbooks to assist browsers with visualizing garments. For mission-driven buyers, I created a fast and efficient search function paired with a checkout process that requires no commitment.

If I had more time, I would've taken another stab at the usability test. I think the initial results weren't substantial enough. I would've also loved to recreate MIRROR with the second style tile!

TLDR: User research and user feedback is important.

Thanks Anna?

ALL PROJECTSNEXT PROJECT
© CLDESIGNS.STUDIO