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.