E-commerce Website | Mirror

Mirror is a successful clothing brand that wants to bring affordable clothing to any occasion.

 

They saw the opportunity for taking their successful offline brand into an E-commerce setting. Mirror wanted to bring their vision of bringing clothing accessible for everyone while having good prices and various styles.

Roles

UX Researcher

UI Designer

Interaction Designer

Programs Used 

Google Analytics 

Adobe Suite

Figma

Timeline

4 Weeks

Design Process

(1) Research

- Interviews Findings
- Competitive Analysis

(2) Structure

- Card Sorting
- Task & User Flows 
- First Iteration Wireframes

(3) Design 

- Brand Logo Ideation
- UI Kit
- Responsive UI

(4) Iterate

- Prototyping
- Usability Tests
- Affinity Map
- Next Steps

 

Research

1. Find out what the key friction points in the customer online shopping experience
2. Identify features and functions
3. Define who are the main competitors, and what they are doing
4. Find ways to enable Mirror to shine from competitors

 

Interviews Findings

Device/Interface

  • The majority use their computers as the primary mode to purchase clothing 

  • The user uses their phone for quick items because it’s easier. 

Lifestyle

  • Most buy for how they want to portray a particular lifestyle.

  • Others look at how the clothing is marketed. Is it sustainably made? Did the animal have a good social network?

Price to Value

  • All participants expressed that they look for clothes that have an excellent price to value.

Realistic Sizing Guides

  • Most interested in having real reviews or actual models in a video walk around to show the exact fit.

Competitors Analysis

Direct Competitors

H&M

Strengths

  • Clean and easy to use

  • Sustainable products

  • Empowers community

Weaknesses

  • Font and weight are inconsistent

  • Images are too large, can’t see the text, making for more scrolling

Gap

Strengths

  • Has a large variety of clothing/brands

  • Lots of images

  • Accessible to different size people

Weaknesses

  • Flow gets interrupted by the modularity.

  • Font and weight are inconsistent.

  • Poor customer service

Old Navy

Strengths

  • Customer involvement

  • Categories are clearly laid out.

  • Accessible in many forms (shipping or pick up)

Weaknesses

  • Lots going on fonts and colors (busy)

  • Style is the same as GAP

Why?

All three competitors have their pros and cons. At first, I looked at general stores (H&M, GAP, OLD NAVY) to see how they organized their products because they have streamlined the organizational process. 

We do not re-invent the wheel; therefore, learning from other companies will help with our design decisions later on. We want consumers to feel at home with the mirrors website.

Structure

  1. Task & User Flows 

  2. First Iteration Wireframes

 

Task & User Flows

  • Task Flow helped to map out functions that needed to be addressed

    • Checkout Menu​

    • Search/Categories 

    • Product Page​

  • User Flows showed the multiple avenues that the consumer could take

    • Segmented paths 

      • Yes ​

      • No

      • Alternate 

        • How might we help the user get to the place they want to go to?​

How might we help users get to where they want to go?

How accessible is the site?

Worried that the user will feel pressured to sign up.

NEED to build trust 

First Stages Low/Mid Fid Wireframes

I started with the main header. Then one thing led to the next. Looking at competitor websites and other website inspiration, I sketched out some ideas. I'll go down a variety of avenues, then stop and look back to see what worked. From that, I'll write down the certain layouts that could work together. It's a lot of trial and error, but in the end, I'll have narrowed what I need to get done.

Landing Page Iterations

Landing Page Iterations

Putting myself in other's shoes

My research showed that more girls than guys will peruse the shop's online store. Therefore, I wanted to challenge myself and try designing for women. 

Women's clothing is far more complex than men's' clothing. It would be a great opportunity to learn from.

Landing Page

Wanted to empower to consumer. Reflecting, Empowering You

Product Page

Used a curved line to help guide the user through the experience

Product Page should flow, where one thing leads to the next. 

The thought process behind curve was to give the user a visual guide through the site. It ends by curving upwards for an uplifting feel.

Search Page

How might we make the experience one that is easy to use yet that all the right information?

Use a masonry grid, because my research showed that it keeps the audience engaged. 

 

*menu when sliding down would be fixed, I later change this, so it would move with the scroll. 

Landing Page should be clear and concise, allowing consumers to get the information they need quickly. 

Design

  1. Brand Logo Ideation

  2. UI Kit 

  3. Responsive UI

 

Brand Logos

Before I start any project, I'll develop some logos because it helps me get in the right mindset. It helps me put a face to the company.

Mirror Logo Ideas

Thought Process:

I started by playing around with the meaning of a mirror. Changing the letters into a mirror, making the r's as "shoulders" for the head (letter o).  The goal was to make it centered around "You" or the User/customer. 

UI Kit

As a logo brings a face to a brand, its colors bring emotion/feel. There was much decision when it came down to what sort of fonts and color styles we were going to go for. We decided to use sans serif fonts and softer colors to make the site feel homier/cozier.

Thought process: 

Simplify the beginning allowing the user to easily find what they are looking for then get more detailed.

Responsive UI

Responsive UI

I started with the website interface, then the tablet, and finally, the phone. I realize I should have probably done it the other way around

 

I wanted to keep it consistent throughout each device, so it doesn't affect the user's learnability and memorablilty.

Iterate

  1. Prototyping

  2. Usability Tests

  3. Affinity Map

  4. Next Steps

 

Prototyping

5 people completed the usability tests. There were four tasks. After each test, I went back and made more frames/ iterations, enabling the user to complete the given tasks more easily. 

* I understand that I should have waited to make the changes, but they were easy fixes, and I could iterate my prototype between tests.

Image by Hannah Morgan

Usability Findings

More Subcategories in the Menu

Research showed women section has more variety than men's

Revamp Filtering in Search/ Categories Page

Reorganizing Visual Hierarchy (Size, Color, Type)

Be able to edit their cart, wherever on the site

Gives user more control over their experience

Change the Product Card Layouts

There wasn't enough information on each card resulting in users being disinterested

Affinity Map

The map helped to prioritize what my next steps were to be. For the affinity Map, I reorganized the summary points into different areas of concern and improvement. I could've also color-coordinated by demographic/user. 

Affinity Map

Next Steps

1. Iterate prototype from usability test feedback

2. Conduct usability test on updated prototype

3. Repeat cycle until team approves and is ready for launch

Mirror | Reflecting YOU

Here is the Final Prototype

 
VP header.jpg

Voth Productions | Web Design & Development 

woman-holding-iphone-xs-mockup-perspecti

Let's Hang End to End Mobile App

ReBlock COver.png

ReBlocks Responsive Website Redesign

as.jpg

TechnoHUNT | Web Design & CMS

black-mockup – 45.png

Onewheel Security Features Add-on