top of page
Mazen Eyewear
Eyewear e-commerce designed from scratch, with a web and a mobile responsive version.
Duration
2 weeks
Team
Agatha Leung
Bell Chan
Ben Lau
Role
UX/UI designer
Work
User research
Competitor research
UX design
UI design
Overview
MAZEN is a Hong Kong-based eyewear manufacturer that operates globally. Under the pandemic, they would like to redirect their business to B2C and would like to create their product line. Their target is the low-end market, accommodating the young population who might not have a high budget.
What we did?
Our job is to create an e-commerce platform from scratch. To ensure its viability, we conducted primary and secondary research on the current market, and dig deep specifically on their competitors. The deliverables of the project include everything from user research to final high fidelity interfaces.
Understanding the trend
To find out what potential users would expect from an eyewear e-commerce, we conducted interviews and an online survey.
I believe that understanding and satisfying users' needs are conducive to business success. By conducting interviews and surveys, we would be able to comprehend their wishes and concerns, and thus be able to design accordingly.
Interviews
10
interviewees in total
5
have bought eyewear from online platforms
8
have quality concern over low-end eyewear
10
prefer physical try-on before purchase
Survey
53
respondents in total
90%
agree that trying on is a must before purchase
75%
agree that free return is a decisive factor
85%
would buy more than 1 pair if quality is guaranteed
Interpreting our findings
Affinity Mapping Time!
After collecting all the data from interviews and surveys, we came together and did the affinity mapping to amalgamate our findings. By visualizing the data, it helps us better understand and organise what we have gathered.
AR fitting sounds cool as it helps us visualize the frame. But physical try-on is decisive. I will be happy to buy online if these are provided.
- Kit, eyewear addict with more than 10 frames at home
Painpoints
Accuracy
Eyewear brought online do not always match with their expectations, in terms of the quality and the design
Time-consuming
People would like to try on products immediately, instead of being held up with the long delivery
Low Pricing
People are worry about the quality of the eyewear if the selling price is lower than what they expect
Problem Statement
How might we guarantee a promising shopping experience for our customers?
We would like to assist customers in visualising their desired eyewear products and at the same time build trust on our low-end pricing.
Solutions
1. Home Try-On
3. Customization
.png)
2. Virtual Try-On
4. Review
To gain an objective overview of the current market and the strategies used by our competitors, we did a UX competitor analysis.
How are our competitors doing?
It is better to refer to existing solutions to user's problems, as we do not want our users to work too hard trying to understand how our site works. Instead, we want the design to be as intuitive as possible.
Competitor Analysis
Competition Mapping
-
Users are reassured with the quality of our products with our free virtual and physical try-on
-
We provide customization of eyewear to bring in fun and creativity to the whole shopping experience
Defining our target audience
Personas
Characteristics
Users who are used to online shopping
Users who are not used to online shopping
User journey
Wireframing the solutions
Then we proceed to create wireframes from the ideas that we have come up with.
Wireframing is a way for us to define and plan the information hierarchy, and it helps us create the flow on how we want our users to interact and process information.
.jpg)
Landing Page
AR fitting Page
.jpg)
Product Detail Page
.jpg){kind=tracking}
Order Tracking
Try-On Confirmation
.jpg)
Payment Detail Page
Branding
We would like to build a trusting platform with a hint of fun and youth.
Brand Identity is something we need to work on as well. We want Mazen to stand out among competitors and as a new platform, we hope to catch as much attention as possible.
Moodboard
Design System
Usability Testing
_HEIC.png)
Let's see how our potential users think!
We treasure users' feedback. It is essential for us to know how they like and do not like our design, so as to make improvement accordingly.
We understand that usability testing need to be conducted repeatedly but due to the time limit, we conducted it once and gained a certain amount of insights. Based on their recommendations, we did some minor touch-ups on our wireframes and then proceed to prototyping.
How it works
1. Home Try-On
Users can order 5 pairs of eyewear at once and they would receive them for free. They have 5 whole business days to try on the glasses before sending the unwanted ones back.
2. AR Fitting
Many other websites also provide users with virtual try-on. There is an existing API for eyewear try-on and it is easy for Mazen to adapt.
3. Customization
Users like the idea of customization but they wish only to make minor changes like picking colours of frames.
We found that showing reviews is a way of gaining trust from potential customers. That's why we are putting review session under every product.
4. Review
5. Clear Description
We introduce our special features in detail, in the hope of helping users better understand how our site works.
Results and major takeaways
What I learned
Importance of Usability testing
Usability testing is important as it helps us find out how potential users like or dislike about our design. It assists us in making sure our design is efficient and effective enough to satisfy users' needs.
MVP
Businesses might not have the time and budget at the moment so there should be a strategic plan to launch an MVP. We should put more effort into features that deliver the highest value for our users.
Prototyping
Web version
View the prototype in action or click here to interact with the website.
Responsive version
We understand that people are now spending more time on their smartphones and therefore we go further to develop a responsive version.
Click here and start playing with the mobile version.
Brief
Current Trend
Findings
Competitors
Development
Our design
Results
bottom of page