Mazen Group
An eyewear e-commerce website with smart AR and try-on features
Overview
Design an e-commerce site for Mazen to sell its own brand product.
Responsibilities
- Interview and Survey
- Affinity Mapping
- Pain Point Analysis
- Persona Creation
- Competitor Analysis
- Moodboard
- Wireframes
- UI Design & Prototyping
- Usability Testing
About
Mazen is a well-established eyewear manufacturer with more than 4000 employees, OEM-oriented across East and South Asia. They would like to launch an e-commerce platform to promote their own brand and products.
The Problem
Mazen is new to the online B2C market. They need to build their own brand identity and make their platform stand out from all competitors.
The Process
Following the Design Thinking approach, we came up with a plan divided into four stages:
Discover
Understand the product, clarify initial assumptions, and discover user pain-points.
Define
Synthesize the research with empathy for the user, understand the problem and map into diagrams.
Develop
Ideate and develop concepts based on identified opportunities.
Deliver
Iteratively prototype and test concepts with potential users.
Research and Problem Definition
User Research
Through user interviews and surveys, we proved our hypothesis and gained user insight. We interviewed 10 people and conducted a survey with 53 respondents. All of them have shopping experience in physical or online eyewear store.
Results
- 0% haven't shopped eyewear online
- 0% agreed free return is a decisive factor of purchasing
- 0% agreed try-on is a must before buying
- The concerns over eyewear online shopping are
- Hard to picture product
- No Real-time try-on
- Tedious return process
- Imprecise expectation
What our interviewees said
AR fitting is a cool idea to visualize and pick the right frame. But try-on is decisive. I will be very happy to buy online if those are provided.
What I want is a chance to regret. That’s why I want to have free return.
Customization is nice, but changing some basic things like color is enough for me.
Persona
Based on the user research we set up two personas.
The information about each persona focused on its goals and frustrations with the product as well as their buying behavior with it, which affected our design decisions.
Pain Points
We condensed the pain-points into 2 main categories.
- Imagination VS Reality
Products do not match with expectation - Price and Quality Concern
Low selling price = Low quality?
Problem Statement
How might we provide a promising shopping experience for customers?
in the way of assisting customers in visualizing the products and building trust on low-end eyewear
Design Exploration
Ideate
We brainstormed some solutions to tackle user's concerns
- AR Fitting
- Home Try-on
Wireframe and Testing
We used figma to make the screens and build an interactive prototype that were necessary to reach users' goals. We tested some user stories with two different individuals.
Findings
- Users value the home try-on and AR fitting features.
- Users want to know that they were required to input payment information before checking out for a free home try-on.
- Users asked for the option to change payment method when confirming home try-on.
Design solutions
- Explanation on the needs of payment information was added.
- An option to change payment method was added to the home try-on confirmation page.
Visual Design
We defined the design system and designed the final screens with Figma.
Mobile Version
Conclusion
What I have learned from this project?
Personas are powerful
Being aware of users’ needs and pain points helped us to create a seamless, end-to-end experience.
Usability Testing is important
Conducting usability testing and evaluating users feedback helped us to determine whether visitors understand how the site works and don't get confused.