top of page

Mazen Eyewear

Eyewear e-commerce designed from scratch, with a web and a mobile responsive version.


2 weeks


Agatha Leung

Bell Chan

Ben Lau


UX/UI designer


User research

Competitor research

UX design

UI design


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. 



interviewees in total


have bought eyewear from online platforms


have quality concern over low-end eyewear


prefer physical try-on before purchase



respondents in total


agree that trying on is a must before purchase


agree that free return is a decisive factor


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



Eyewear brought online do not always match with their expectations, in terms of the quality and the design 


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.



1. Home Try-On


3. Customization

pablita-face-id (1).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 

Mazen Competition Analysis.jpg

Competition Mapping 

Mazen competitive mapping.jpg
  • 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



Users who are used to online shopping
Users who are not used to online shopping
Mazen Michelle.jpg
Mazen Jimmy.jpg

User journey

mazen User journey map.jpg

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.  

Mazen Landing Page (wireframe).jpg

Landing Page

Mazen AR fitting wireframe.jpg

AR fitting Page

Mazen Product details (wireframe).jpg

Product Detail Page

Mazen Delivery tracking (wireframe).jpg

Order Tracking

Mazen Home try on confirm.jpg

Try-On Confirmation

Mzen Check Out (wireframe).jpg

Payment Detail Page


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.


Mazen moodboard.jpg

Design System

Mazen Design System.jpg

Usability Testing

IMG_8192 (1).HEIC

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

mazen _home try on page.jpg

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

Mazen - Product Details

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

Screenshot 2021-01-14 at 1.08.53 AM.png

5. Clear Description

mazen Home try on page.jpg
mazen AR fitting page.jpg

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. 


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.   


Web version

View the prototype in action or click here to interact with the website.

Responsive version

mazen 1.jpg
iPhone 11 Pro Max.jpg
iPhone X Flying.jpg

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.

Current Trend
Our design

Coming Next: Learning App for SEN student 

bottom of page