UX + interface design case study

Eye test kiosk

Client
Eyebot
Role
Lead UX and UI designer
Team
RocketFarm Studios
Format
Two screens and a glasses tray
Stage
Minimum viable product
Dates
May–June 2024
Three kiosk screens on navy: the eye scan, with a hot-air balloon on the top screen and Focus on the balloon above on the bottom screen; a large teal check mark above Put your glasses back on to see your results!; and a progress screen reading Your prescription and report are being generated
The challenge

A fast, simple eye test

Create a 90-second eye test for crowded stores and malls that is fast enough for shoppers between errands and simple enough for someone who’s never used a kiosk.

The process + technical requirements

Mapping the full flow

Three different versions of the test:

  1. People with glasses
  2. Contact lens wearers
  3. People without glasses or contacts

Glasses wearers had the most complex test:

  1. Intake
  2. Letter identification
  3. Glasses and eye scanning

The test used two screens:

  1. Top: The eye test and eye scan
  2. Bottom: Instructions and user input

Users had to stand in a specific location and distance from the screen.

Process flow for the kiosk test: default state, initiate testing, onboarding questions about glasses, contacts, or nothing, then visual acuity, lensometry, auto refraction, results, and eCommerce paths, with sticky-note questions from the design team along the way.
Scroll to see the full flow, or open it full size
The setup

The MVP kiosk

The initial setup included a screen for the eye test, a second screen for user input, a tray for glasses scanning, and headphones for audio instructions.

A marker on the floor showed users where to stand. The kiosk could sense their position, so if they were out of place, the screen told them how to adjust.

Later versions dropped the headphones. Eyebot wanted audio to enhance the experience without the test depending on it.

Kiosk in its default state: a tall navy unit with a top test screen, a bottom touchscreen, headphones hanging at the side, and floor decals reading Stand here to begin.
Default state, between users
A user wearing headphones stands at the kiosk; the top screen says Get started on the screen below, and the touchscreen reads See the world more clearly.
A user starting the test
The test

Three parts, two screens

1

Intake

Using the bottom screen only, users enter basic information, such as whether they wear glasses and if they have any issues with their current prescription.

Guiding the eye

Only light up the screen that matters

The next two parts of the test required both screens, so we needed a way to direct users from one screen to the other. We explored several solutions, such as color and arrows, but they weren’t intuitive enough and needed explaining.

We landed on the simplest approach: we kept only the active screen fully lit. Turning a screen on immediately drew users’ attention where we needed it.

When users needed to work with both screens, simple text prompts and visuals told them where to look. You can see our solution in the next step.

Early draft of the top screen: Get started on the screen below, with stacked arrows pointing down.
An early draft of the top screen using arrows to point users to the bottom screen
2

Letter identification

The second part looks a lot like a traditional eye test: users identify letters on the top screen and give their answers on the bottom one.

3

Glasses and eye scanning

In the final part, two scans happen at once. Users take off their glasses and place them in the tray, where the kiosk confirms their current prescription.

At the same time, they watch a balloon animation on the top screen while the kiosk scans their eyes.

Contact lens wearers and people without glasses had a shorter test. Their final part was just the eye scan, with no glasses in the tray.

Instructions you can follow without your glasses

For the third part, users with glasses had to take them off, which meant we couldn’t rely as heavily on visuals.

So while users still had their glasses on, we gave them an overview of what came next. Then we repeated the instructions one action at a time. First, they placed their glasses in the tray. Next, bold visuals and audio cues directed them to an animated balloon on the top screen. By the time the eye scan finished, the glasses scan was done too, and they could put their glasses back on.

To keep error states readable without glasses, we made them large, color-coded, and high-contrast, and built them around simple icons. A mistake or problem brought up a large red exclamation mark and a negative audio cue. Each successful step got a large teal check mark.

Eye scan error: a large red exclamation mark on the top screen; the bottom screen reads Whoops! You stopped looking. Focus on the balloon on the screen above until the prompt.
Error: the user looked away during the eye scan
Glasses scan success: a large teal check mark on the top screen and an oversized white check mark on the dimmed bottom screen.
Success: the glasses were scanned
Glasses scan error: a large red exclamation mark on the top screen; the bottom screen reads Whoops! We were not able to scan your glasses, with a photo showing how to place glasses in the tray.
Error: the glasses could not be scanned
Results

From MVP to the mall floor

The finished test took 90 seconds, right on target. We tested mostly in the office with colleagues standing in for shoppers. My work ended with the MVP, and Eyebot took it from there.

Free Vision Test kiosk installed in a building atrium, its touchscreen reading 90 second vision test, tap to get started.
Shoppers walking past a Free Vision Test kiosk in a mall corridor.

The MVP went from design to working kiosks at four New England locations, including stores, malls, and campuses.

Eyebot secured a $6 million seed round in June 2024.

It raised a $20 million Series A round in August 2025.

Have a project, a role, or a class in mind?