Mirror  cover.png
 

Client: MIRROR

Role: UX Research, UI Design & Prototyping

Duration: 2 Months

 

BACKGROUND

Back in 1994, Mirror was a clothing store targeting all ages looking for cheap clothing for everyone for any occasion.

Today, they own over 400 stores around the world in 32 countries. Successful with in-store, Mirror is deciding to move part of its inventory in an online store. 

 

PROPOSAL

  1. Design a logo for the company that is modern and neutral enough to attract all types of people and styles. 

  2. Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, style and others. 


 
 

RESEARCH

Competitive Analysis

Market Research

Research Interview Plan

Research Results

Creating a Persona

 

Competitive Analysis

 For my competitive analysis, I compared the strengths and weaknesses of each competitor’s UI Design on how one is better than the other. It was surprising on how the competitors differ from each other despite having the same kind of product.

 
Screen Shot 2020-08-24 at 12.16.49 PM.png
 

Market Research

  • Online shopping is growing so fast that the global online shopping market size is predicted to hit 4 trillion in 2020

  • The U.S. alone, we’re expecting to have 300 million online shoppers in 2023.

  • 77% of digital window shoppers make impulse purchases. And 70% of them will come back and make a purchase from their device within the first hour of seeing the products.

 

Research Interview Plan

  1. Interview 4-5 people 

  2. Find out what customers expect when shopping online.

  3. Find out what pain points for customers when shopping

  4. Identify how users use the navigation filter function

Research Results

 

Goals

  • Finding the right size

  • Find deals without being distracted by other items

  • Easy navigation on website

Pain Points

  • Bombarded by ads

  • Inaccurate size charts

  • Lack of customer service

Needs

  • Fast customer service response

  • Sizing comparison on models

  • Easy filter navigation

 

Creating a Persona

Creating this persona, I wanted to understand some of the goals and frustrations an average person would have while having to undergo the online shopping process. I wanted this persona to not look for brand name clothes but comfortable and affordable.

 
 

INFORMATION ARCHITECTURE

 

Card Sorting

Page Sketches

Site Map

Card Sorting

I chose to go with the card sorting method to quickly organize products and put them in their properly named category. While looking through the card sorting results, I found the similarity matrix to be useful on grouping items on how often they were common by the interviewee.

 Page Sketches

Sketching up my homepage, I wanted all the important information to be the first thing the user sees before clicking anywhere else. I wanted the links to be accessible and save the customer time rather than scrambling all over the site.

Site Map 

 

INTERACTION DESIGN

Task Flows

User Flows

Responsive Wireframes

Wireframe for Desktop Prototype

 Task Flows

 
 

User Flow

 
 
 

 Responsive Wireframes

Grabbing trends from other competitor’s websites, I created my own responsive design to help cater to my stakeholder’s needs. With these wireframes the users can go from end to end with minimal to no problems.

 

UI DESIGN

Hi-Fidelity Tablet Prototype

Responsive Design

UI Kit

Next Steps & Final Thoughts

Hi-Fidelity Tablet Prototype

 Responsive Design

FINAL THOUGHTS

 
 

During my course of this project all I wanted was to make a well designed product. While conducting numerous interviews and testing out my prototype, I learned that it will takes time to produce a product. Instead of always trying to reach perfection in the design, I wanted to also attain functionality to better the user experience even more. Understanding the users’ wants and needs, helps mold and continuously build a user-friendly product.

 

“Perfection is not attainable, but if we chase perfection we can catch excellence.”

-Vince Lombardi

 

Next Steps for Mirror

  1. Creating more accurate sizing charts to cater to different body masses.

  2. Create a 360 degree turn around on products for faster viewing.

 
Previous
Previous

Pam Am Airways