Role: UX/UI Designer
Span: 4 weeks
Tools: Figma
Skills:
- User research
- Wireframing
- Prototyping
- Usability testing
- A/B Testing
Role: UX/UI Designer
Span: 4 weeks
Tools: Figma
Skills:
OLENS is a leading colored contact lens company based in South Korea with a large international market. This case study is a personal project and an overview of my design process in creating a more convenient online shopping process for purchasing colored contact lenses.
Purchasing colored contact lenses online can be a challenge, especially when it comes to deciding on the right color. Additionally, for users with different prescriptions for each eye, navigating the customization process on a colored contact lens website can be confusing and time-consuming, leading to frustration and uncertainty during the purchasing process.
How might we personalize the experience of purchasing colored contacts online for global OLENS consumers in order to alleviate uncertainties about choosing the right lenses?
My solution offers OLENS customers a chance to virtually test out different colored contact lenses through the use of AR filters. As users engage with the AR technology on the OLENS mobile app, they may appreciate the convenience and accessibility it offers, allowing them to try on multiple lenses from the comfort of their own homes without the need for physical samples.
Research Methods
User Persona
Michelle
Graphic Designer
New York
Aspirations
"I would like to purchase beautiful colored contact lenses that suit my look."
Frustrations
"I don't like when my order turns out to be different from what I was expecting."
“I have different prescriptions for each eye so I need to place two orders with different prescriptions, which can be confusing and take more time.”
Interests
Beauty and skincare products
Once the pain points and opportunities were identified, I ideated my solution through low-fidelity wireframes. I then took feedback from user testing and incorporated these inputs, making iterations to the wireframes accordingly.
01
02
03
New feature information on an onboarding screen vs modal
Users preferred to be informed of the new "Try On" function via a separate onboarding screen, rather than a modal.
Simpler filter function on Contact Lens screen
Redesigned to include a simpler dropdown option for three main categories: sort by, color, and size.
Virtual Try-On screen too small
Resized Try-On screen to be an overlay that covers the entirety of the screen.
Onboarding Screen
Users are introduced to the new "Virtual Try-On" function via an onboarding screen, which explains where the new feature is located and how to use it.
View Prototype
Virtually Try On Lenses
Access the "Try-On" button on the bottom right image of a product page to launch the AR filter.
Align, Capture, and Save
This feature allows users to line their eyes up with the filter to preview how certain colored contact lenses might look on them. As users explore and save different looks, they can choose the best fit for them.
Customize Power Selection
Instead of placing separate orders of the same colored contact lens with different prescriptions, users can save time by selecting a specific eye power for each eye within the same product page.
This project was a fun opportunity to improve an existing brand's buying process by thinking about possible features or solutions that could be implemented. One challenge I encountered during this case study was addressing user pain points while maintaining certain business decisions. Being able to come up with potential design solutions to these issues without making significant changes to these business decisions turned out to be tricky, but rewarding in the end.
If I had more time, I would think about how the app could develop a system to curate a list of suggested lenses based on previous purchases or the satisfaction of users with different lenses tried on using the AR filter.