Harriet Xu
OPen
bilibili live display interface
Web Design
Interface Design

Provis

Provis is an eyewear sales website. In this project, we designed website pages according to the client's specific requirements, providing high-fidelity prototypes and dynamic demonstrations for web design.

Roles & Responsibilities

Research: Background research, Competitor Analysis, User Research
UI&UX Design: Web-based Flow Chart; Sketches, Wireframing, High-fidelity prototype, Usability Testing

Duration

5 Months

Tools Used

Figma
Miro

Overview

Client Brief

Provis aims to design and develop an online retail store specializing in the sale of blue light glasses.
For each pair of glasses sold, we will donate $20 to the global ophthalmic charity "Sight for All", supporting individuals with impaired vision.
Our goal is to provide high-quality, stylish blue light glasses and, through our charitable work, raise awareness of visual health.

Research & Strategy

Background Research

Market Overview and Trends

Aging population in Australia leads to increased demand for vision correction.
Growing e-commerce trend in Australia, especially during COVID-19.
Increasing use of digital devices drives the demand for blue light-blocking glasses to reduce eye strain.
With over 60% preferring socially and environmentally responsible brands.

Consumer Behavior Analysis

Purchase decisions are primarily influenced by brand reputation, price, frame design, and lens technology.
Consumers typically replace their glasses every 2-3 years, showing relatively high brand loyalty.
Key factors influencing online shopping experience include free try-on services, user-friendly interfaces, and clear product images.

Technology and Innovation

AR try-on technology is becoming increasingly popular, allowing consumers to virtually try on glasses before making a purchase.3D printed eyeglass frames are also entering the market, offering customizable options.

User Needs for Products

Comfort: I want the frame and nose bridge to fit comfortably without causing pain or slipping.
Safety: The lenses should be scratch-resistant, impact-resistant, without magnification, and the glasses should be hygienic.
Health: Glasses should filter blue light and protect against 100% UVA/UVB rays to prevent eye fatigue and headaches.
Sleep aid: Blue light glasses should improve sleep quality.Fashion: I want a variety of styles to complement my attire and enhance my appearance.
Portable: The glasses should be foldable and come with a keychain screwdriver, cleaning cloth, and storage bag.
Charity: I'd like a portion of my purchase to go to charity and ensure the glasses are eco-friendly.
Cost-effective: I hope for a good discount to get value for money.

Persona

Design

Flow Chart

After a thorough evaluation, we recognized key design areas that require improvement on the home page, shopping page, and product details page. Consequently, we plan to revamp the entire interface, ensuring a seamless user experience from the homepage to the shopping cart page.

Web-Sketches

Wireframes

Click to see more details

Iteration

Display issues in the comment section
The product user review area, originally consisting of irregular and information-limited card pages, has been iterated into a dual-column comment layout.

Build a grid system and add VR try-on functionality
Add the VR try-on functionality based on user preferences discovered during the preliminary research to the basic purchasing process. Additionally, include eyeglass care-related products on the checkout page.

High-fidelity Prototype

Display the web implementation corresponding to the researched requirements in Figma.

Heuristic Evaluation

Use this form to describe your project
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.