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

 
 

 What do the people currently do and like?

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.

 What are our competitors doing & HMW learn from them. 

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

  Th🤔ught Process:  

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.

 

 How do our consumers act, and why? 

  • 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, we would write down 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 👠

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. 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. 

 

 Reflecting YOU 

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
  Th🤔ught 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. 

 Ze 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.

MAJOR 🔑 = SIMPLICITY

 

 Iterate, Iterate, Iterate

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

Our 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

 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