Visual Defects UI/UX Design, Illustration
view site
  • Client


  • 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.

Screens showing the layout of information and a diagram of a myopic eye that the user will be able to interact with by moving the slider

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.

Slider showing how the shape of the lens changes with the prescription and how the lens converges light back towards the retina

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.

Different scenario showing an example of a hyperopia defect

Hyperopia Correction

Interactive diagram of an astigmatic eye

Presbyopic eye compared to a normal eye