Mirror

A responsive e-commerce website that transitions a brick and mortar fashion boutique to the online retail market.

 

Overview & Challenge

Design a responsive e-commerce website that will help client successfully transition to online retailer, and provide customers with a positive experience similar to visiting the storefront.

My Role: Branding, UX/UI research and design

Research

Research Goals:

Identify online shopping habits and preferences

Learn about competitors’ advantages and disadvantages

Identify consumer frustration with online shopping

Interviews:

Participants were fashionable young professionals, who see shopping as an activity that they enjoy. It’s important to them to follow trends and stay up-to-date with fashion without spending a lot of money. 5 people were interviewed: males and females between the age of 25 and 35. Questions asked include:

 

  • Do you prefer online or in-store shopping?

  • What influences your online buying decisions?

  • Can you tell me about the last time you bought something online?

Findings:

  • 40% prefer shopping at a physical store to make sure the fitting is appropriate.

  • 50% don’t have time to go shop at the mall and they think is very convenient to shop for their needs online.

Common Problems:

  • Always worried about size and fitting

  • The product doesn’t match the image or description

Persona:

Common Needs:

  • Good quality with affordable price

  • Convenience

  • Good fitting

Buying Influences:

  • Ads and social media

  • Sale

  • Free shipping and returns

Empathy Map:

Information Architecture 

I did an open card sorting interview in which participants organized the cards in a way that made sense to them and gave each category a name. For this research, I had 5 participants who shop online regularly. They all completed the task with very few questions asked. I had total of 48 cards to organize. Then, I analyzed the findings and put together a sitemap for all the main sections of the website.

 

Sitemap:

Interaction Design

Annotated Wireframes:

Userflow:

Testing

I found that developing mobile prototypes in Marvel and Adobe XD to facilitate testing was helpful in cleaning up some user interface and flow issues before initiating the first test. I conducted testing in-person on basic site functionality: I asked testers to place an order as their main task. Taking the time to clearly outline tasks and objectives was not only useful for me as a facilitator, but also for the users completing the test, and it also helped me analyze the results afterwards. In testing, we achieved 100% success rates and received a lot of positive feedback about the experience, as well as plenty of insights to improve the experience further.