Founded in 1994, Mirror is a fictional successful clothing store trying to make any kind of clothes accessible to everyone. After deciding a few years back to not invest in digital, they finally made the decision to create an online shopping experience for their customers.
Mirror
E-commerce Web Design
Introduction
Process
Research
Competitive Analysis
1:1 Interviews
User Persona
Empathy Map
Storyboard
Information Architecture
Card Sorting
Site Map
Task Flow
User Flow
Interaction Design
Sketches
Low-Fi Wireframes
High-Fi Wireframes
Prototyping
User Testing
UI Design
Logo
Style Tile
UI Kit
Research Insights
After accomplishing the research phase, I was able to identify the goals required by the users.
- Various filters: Effective search = easy shopping.
- User friendly website: Good flow, easy to navigate.
- Focus on photos: Multiple photos, body measurements, and accurate sizing information. The research phase showed that one of the scariest parts of online shopping is getting the wrong fit.
Visuals
With the brief and my user goals in mind, I created a style tile and UI kit that conveyed the clean, modern, and fresh style wanted by the brand. I then used them with my wireframes to create high-fidelity mock-ups of the Mirror website.
Moodboard
Color Palette
#000000
#FFFFFF
#E2E2E2
#979797
#FFA561
#464E92
Wireframes
Final Design
Conclusion & Next Steps
Usability tests were conducted with the final designs, and users were able to complete the task given with a 100% error-free rate.
As my first time designing a responsive e-commerce site, this project was such a great learning experience. I was fascinated by the creation of wireframes and building the style tile and UI kit for the brand. If given more time, I would have loved to work on the missing pages, the checkout process, as well as dive deeper into the creation of the size recommendation tool I created.