OPO (UX/UI Design) — MaryDesign

OPO

Online Eyeglasses Shop

Project Overview:

Summary

At UX-Land school, we designed an online shop website as a conceptual project for a teamwork assignment. Our website is user-friendly and responsive for both desktop and mobile. Opo is an online store that sells sustainable eyewear. These frames are made from recycled water bottles. The store aims to attract more customers by offering sustainable products.

Mobile Prototype

Desktop Prototype

Role:

UX/UI Designer

Business Needs

Design Goals

Team:

Group of 5

Duration:

2 months

Creating an e-commerce website with an attractive user experience to sell eyeglasses and sunglasses.
Encouraging users to choose sustainable frames.
Delivering the value of the business.

Conducting surveys and interviews to understand the user’s needs and concerns.
Exploring a way that users encourage to buy a sustainable frames.
Demonstrating the quality of our frames.
Helping users to find suitable lenses for their needs .

Tools:

Figma, Photoshop

Design Process

Survey

Based on our findings, we realized the website should provide customers with a store-like experience and have readily accessible information.

Also The website should be designed in a way that motivates all customers to take action. interviews, we obtained valuable insights that revealed the users' needs. With these results in hand, we initiated the first steps of the design process.

Interview and Affinity Diagram

Discover

Competitive Analysis and Comparative Analysis

Throughout the design process, we conducted various analyses with similar websites. In the comparative analysis, we focused on comparing CTAs, icons, and user pathways.

For instance, we found that it's better to use the "Try On" button instead of "Shop Now" on the eyeglasses page or Using a heart icon on pictures allows users to find their favorites more easily.

In the competitive analysis, we realized the importance of designing based on business value and creating a user-friendly and intuitive pathway for users.

Discover

Based on the repetition of their needs and preferences, we created an affinity diagram.

Through user interviews, we observed their concerns and needs.

Users prefer to purchase high-quality glasses.
The size and appearance of glasses on an individual's face are one of the important results.
One out of every four users prefers not to buy sustainable frames.

Challenges

Showcase frame’s quality
Picture the fit of these glasses on a face
to encourage them to purchase sustainable frames

Solution provided

To showcase FDA approval, ratings and reviews
virtual try-on feature similar to a mirror
showing the benefits of using sustainable products

Persona

Define

Based on the information obtained from surveys and interviews, we created personas that represent the users.

User flow

Card Sorting

We did several card sorting tasks by users and And based on their input, we performed categorization.

Site Map

We made the sitemap based on our data and analysis.

Sketch and Wire Frames

We created and iterated on mid-fidelity sketches for both desktop and mobile, refining the wireframes through multiple versions to reach the final result.

Mobile Sketch:

Mood Board and UI Kit

We realized that the user wasn't aware of the CTAs being clickable on the hero image. Therefore, by hovering over the hero image, the user became aware that it was clickable.

Home Page

Usability Test

We noticed that we should upload the version before checkout so that, in case of insurance approval, the total amount will be deducted.

on the mobile page, users had to scroll a lot to enter their eye prescription. As a result, we redesigned this section, making it larger and allowing users to input their eye prescription manually.

A/B Testing

Home page

Based on the nature of sustainability of the products and the feedback we received from users, we have chosen the colors and make a mood board, which can represent the color of the sky, the sea, and water bottles.

After high-fidelity design, we conducted some usability tests and noticed some points. We made some iterations based on the feedback, and and we achieve the final result.

During the AB testing in the design process, we realized that users prefer to see the glasses on the models' faces first and then view other details of the glasses.

Users expressed their desire to minimize scrolling while viewing products on mobile. They preferred to see more glasses at once on the screen, allowing them to view a larger selection of eyewear.