Optical Shop Website Study Case
Time
July 2021-Aug 2021
Duration
2 Months
Tools
Adobe XD, Miro,
Media encoder
Project brief
Hong Kong has hundreds of physical optical stores. With the advancement of technology many customers are interested in buying eyewear online. Our goal is to create a website that provides customers with an online shopping experience that is better or at least equal to physical store.
Role
UI/UX designer
Interact designer
Teammates
Kelvin
Tom

Projected outcome

After the website is designed, customers will be able to explore and purchase new glasses more easily. Additionally, the website will offer a platform for customers to learn more about the optical shop brand.

Main challenges
Challenge A
Optical shops typically offer a wide range of eyeglasses, sunglasses, and other eyewear products.
Challenge B
Customers who are shopping for eyewear online will want to know detailed information about the products they're interested in.
Challenge C
Like any website, an optical shop website must be designed with accessibility and usability in mind.
First, understand the problem

User research

We start by asking users who bought eyewear from the physical store questions in order to understand what they would like to see if they are to buy online. Some of the questions asked:
‍
-  What motivation do you need to visit online optical store?
- What information are you looking for?

Point A
Most customers clearly differentiate between prescription glasses and sunglasses 
Point B
Some customers said they get confused when they maneuver websites
Point C
Many customers would like to be able to track status of delivery
Map journey and opportunities

Journey mapping

According to the user research, we should separate three type of glasses for each pages. We believe that having a navigation bar to organize the website is essential. Additionally, the website should include a paper to explain how the flow work.

Test ideas with wireframe & prototypes

Wireframes

After completing the journey mapping, we created the main page of wireframes for desktop and mobile. Additionally, we have create a few pages for reference.

Prototypes
Goals
1. Adding the navigation bar on the top to guide the user to explore the shop.
2. Adding personal features like an account sign-in to save the user’s record.  
Features
1. Starting from the main page, there are three types of glasses for the customers to choose.
2. Having a navigation bar on the top will make it easy for customer to find more information about the store, like the background of the shop or how the flow works.
3. Add personal icons on the top right corner, such as for sign-in, search, and more.
4. Also add information inquiry on the right up corner and bottom, like location, and Q&A.
Interactive prototype
Finalize
Account feature
In the top right corner, there is a login icon button that allows users to log in or sign up for an account, which will enable them to view their order history and points.
Different information pages
We have set up various information pages such as Q&A, About, How it Works, and more in the navigation bar (or hamburger menu).
Smooth payment method
Payment is the most crucial aspect of the Optical Shop. Therefore, we have established a simple and easy-to-understand payment system.

Projected result

After the website is designed, we anticipate that it will attract young customers to purchase new glasses and also draw more customers to visit our physical store. This will enable the Optical Shop to better understand the needs of our customers.

Next project →

Indigenous Website Study Case

Contact me