Mirror

Shopping made easier

THE STORY

Mirror is a clothing store. They’re an affordable and versatile and targeted at millennial consumers.  We have been contacted by Mirror to help them take their business online.  Mirror wants to start with a new logo and an e- commerce responsive website where they can sell their products online.

Disclaimer: this was a concept project done during a design Bootcamp, Mirror is not a real company.

GOALS

Design a logo that is modern and neutral.

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

COMPETITIVE & MARKET ANALYSIS

I performed market research to look at current trends in e-commerce for apparel.  I found that the top trends are (1) Mobile shopping (2) artificial Intelligence and (3) the Uber-zation of shipping.

I also examined other similar apparel e-commerce sites and created a feature matrix to help prioritize what we need for Mirror.

USER RESEARCH

Methods

Five participants were recruited for a contextual research study, three males and two females.

Participants were first asked a series of questions including:

Demographics - Age, City, Occupation

Shopping habits and behaviors - personal clothing style, where they shopped, concerns/fears about shopping online, describe a nice online shopping experience

Then, participants were asked to imagine that they were invited to a wedding and they need a new shirt or dress.  They were asked to shop for the item online and talk out loud about their thought processes

Conclusion

Shoppers are motivated by saving time and money while looking good.

Shoppers want clothes that are affordable, nice quality and easy to find.

When shopping online for clothes, consumers are concerned about fit, price, spending too much time and if the item will get to them on time.

Site features consumers enjoy include lots of pictures with models, filtering, and fit descriptions

Check out the full user research finding presentation in this Google Presentation.

PERSONA

Persona Development_Module3.png
Persona

Empathy Map_Module3_v2.png
Empathy Map

Storyboard_Mirror_UXModule3_v2.png
Storyboard

ARCHITECTURE & INTERACTION

Since an e-commerce site contains a multitude of categories,  I conducted a Card Sorting exercise to help with categorization and organization of content.  Seven anonymous participants sorted 30 different clothing items into categories.

Trends & Observations:

Most participants has the category "Accessories", this seems to be the most agreed on category

Participants grouped items into "Tops" and "Bottoms"

Participants grouped items into "Casual" and "Formal"

"Sports Jersey" was the outlier where it was sorted into a variety of categories or in its own category

For more details, please refer this Google Spreadsheet.

User Flow

Site Map

Affinity Map

LOW FIDELITY WIREFRAMES

Wireframe1.1_Mirror_Module5.png
Homepage

wireframe2.1_Mirror_Module5.png
Dresses Page

Wireframe3.1_Mirror_Module5.png
Product Page

HIGH FIDELITY WIREFRAMES

HomepageMirror2_UXA_Mod7.png
Homepage

ResultsPage_Desktop_UXA_Mod6.png
Dresses Page

Product Page_Desktop_Mod6.png
Product Page

USABILITY TEST

Objectives

Test the how easily it is for users to navigate and flow throughout the site

Test how users prefer to search for clothing and if they are able to complete their search

Test how easily the user can find and purchase a specific item of clothing

Test how easily users can get customer service if they need help

Observe any challenges the user faces

Findings

In general, participants found the website meeting standards of what they would expect from an e-commerce site.  The overall experience was smooth and participants found the site easy to use.  The participants all completed the tasks of (1) searching for dresses (2) purchasing the dress (3) using the Live Chat without much issue.

BRANDING

Mirror Brand Logo_UXA_3
Mirror Brand Logo_2
Mirror Brand Logo_1

PROTOTYPE

For full case study, please refer to this Google Presentation.

Protype Link
Click image to play with the prototype in InVision

Other projects: