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

Discover

Understand the product, clarify initial assumptions, and discover user pain-points.

Define

Define

Synthesize the research with empathy for the user, understand the problem and map into diagrams.

Develop

Develop

Ideate and develop concepts based on identified opportunities.

Deliver

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.


Personas
Affinity Map

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.
Wireframe

Visual Design

Mood Board
Website Design

We defined the design system and designed the final screens with Figma.

Website Design

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.