gallery Mockup board2 @3x.png

Mirror

 

Mirror is a global clothing brand with 300 stores in 34 countries. They offer various styles of clothing at an inexpensive price. Clothing for everyone. While they have been in business since 1994, they have never had a digital presence with the ability for their users to shop online. My challenge was to create a responsive digital experience and updated brand identity for the company.

 

DISCOVER

The Research

I conducted competitive analysis and secondary research to better understand the current state of global clothing e-commerce. I then surveyed and interviewed people to gain insights on their pains, processes, behaviors, and emotions when shopping.

Qualitative Insights 

Quantitative Insights 

Quantitative@3x.png
Pains@3x.png
 

DEFINE

Empathy Mapping 

Information Architecture 

I created a sitemap to organize and create structure.

I conducted a card-sort with 4 users to better understand the mental organization of the products and I used it to create hierarchy within the menu and subcategories of the products.  

 
 

DESIGN

Responsive Wireframes

I first sketched out wireframes on paper, and then created low fidelity wireframes in Sketch for mobile, tablet and desktop.  I created a prototype and conducted a user testing with Invision and Skype. 

Low-fidelity mobile wireframes

Low-fidelity mobile wireframes

Low-fidelity desktop wireframes

Low-fidelity desktop wireframes

Usability Testing

I conducted a usability test with Invision and Skype. The main objectives for the test were to test the flow and navigation of adding a product to the cart and checking out. I paid close attention to general usability heuristics. During the testing, it was discovered that the users struggled to edit their items in the shopping cart and needed clarification about sizing. I iterated quickly and created the UI.

 

DELIVER

A New Visual Identity

I created a new identity that unites the brand experience across all platforms. I wanted to keep brand consistent with the look and feel of neutral, clear, modern and fresh. 

Mockup Ads@3x.png
 

A Responsive UI

 

An Easy Checkout

It was discovered during the research that auto-fill forms are highly desirable. There was a 70% chance that the cart would be abandoned if the checkout was not easy. I created a task flow to determine the shortest checkout process and designed the UI with auto-fill in mind.

mockup-Menu-Desktop.gif

CONCLUSION

The Mirror e-commerce experience unites the brand across all digital touchpoints. I learned the importance of responsive modular design when working on this project.

Next Steps

At this stage of the design, I would:

-continue to iterate and optimize the mobile checkout flow

- create and develop flows for wishlists and social sharing

-A/B test different product page designs

-Conduct another card-sort with deeper levels of the inventory