-
Client
Specsavers
-
Timeframe
6 weeks
-
Role
UI/UX Design, Illustration, Front & Backend design
"20:20 vision is a popular term used to describe well-functioning eyesight. Ideally, light should converge at a single point on the retina, found at the back of the eye. But what happens when it doesn’t?" — Visual Defects Module
The Visual Defects module was designed to teach new team members at Specsavers the basics of eye defects and lens correction. Throughout the design process I researched the topic and worked with subject matter experts to make new training material that will help users understand visual defects more effectively through interaction design.
General Format & Interface
An interactive slider was used as part of the UI so the users could change the eye's focus point and see the diagram change in real time. With a combination of svg animation, timeline plugins and blur filters, moving the slider would cause various elements in the diagram to change to show how the visual defect is caused.
Correction & Lens Design
In addition to showing how the defects are caused, sliders were also implemented to show users how they could be corrected with different lens designs.
