Project Vision — Accessible vision test at home
Experience design meets medical diagnosis
Project Vision is a convenient way to test for myopia and astigmatism at home. It DOES NOT REPLACE professional diagnosis by optometrists. However, it can be an affordable preliminary exam before consulting a doctor, especially for those who are less fortunate.
PART I: Research
The Outbreak
Uncorrected myopia can lead to serious developmental and vision-threatening disorders.
Medically speaking, myopia is nearsightedness of -0.5 diopters or higher.
In plain English, that means if objects inside 2 meters (6.5 feet) look blurry, you might have myopia.
Myopia is the most common refractive disorder worldwide. A quarter of the global population is thought to have myopia, and 42 percent of Americans are myopic.
What happens if you leave it uncorrected?
Mild-nearsightedness might seem like it doesn’t require immediate action. Symptoms like squinting, rubbing in the eyes, and headaches from eye strain, feel more like inconveniences than dangerous signs.
However, uncorrected myopia can lead to serious developmental and vision-threatening disorders.
- A Berkeley study found that if myopia isn’t treated, the eyes will interpret nearsightedness as being the normal state. Without intervention, myopia will worsen more rapidly and severely.
- Vision disorders can mimic symptoms of attention deficit disorder. A recent study found that children of ages 4 to 17 with uncorrected vision problems were two times more likely to develop ADHD than their peers.
- It can also affect adults. The American Optometric Association says, “If left untreated over time, myopia can put the eyes at risk for vision-threatening conditions like retinal detachment, early cataract development, macular degeneration, glaucoma and even blindness.”
Hurdles to routine vision tests
When I was ten, my mom noticed that I was squinting and took me to an optometrist. I read the letters off of a glowing chart, sat down in a dark room with big formidable machines, and walked out with a pair of glasses.
Walking into a clinic for something as simple as a vision test had always been a quick and easy process — and I took that for granted for a long time.
In college, I needed a new prescription as my eyesight got worse. Unfortunately, my student insurance didn’t cover vision care.
I had to pay $120 for a vision test.
I am not trying to discredit licensed professionals. After all, I did end up with a full prescription for my contacts.
But even a simple vision checkup without prescriptions would cost around $50-70 in the US, and many healthcare plans don’t cover this.
Experts say you should take routine vision tests every 1–2 years to check the symptoms, slow down the progress, and prevent further disorders. For younger (18 and under) and older individuals (65 and older), that becomes at least once a year.
While eye exams are very affordable in some countries, there are more places that don’t offer the same privilege.
Price isn’t the only obstacle. For some, the nearest clinic is hundreds of miles away, or the existing ones are understaffed with hours of wait times. According to a WHO report in 2017, at least half of the world’s population cannot obtain essential health services.
Existing services and room for improvements
From vision tests already available online, these were four most common user obstacles I found.
- Create an account
Sign-up with email can be a huge barrier for services that people use only once in a while. Especially for elders who don’t use emails often, this can be an impenetrable wall.
Mandatory sign-up becomes even more problematic for private services like medical test. A lot of users will be skeptical about sharing their personal information — “Collecting user activity for better experience”? What’s the point if you scare the users away?
- Inaccurate setup
A lot of instructions specify a numeric distance on how far to place the device. However, people don’t carry around yardsticks everywhere they go.
Simply providing a numeric length without any relative measures will result in inconsistent setup for the test..
- Complicated instructions
It was common to see a long string of instructions, sometimes to a point where learning the instructions itself felt like a test.
Information overload should be avoided at all costs to retain user’s attention, especially online where people’s attention span tend to be even shorter. The more steps there are in one page, the more chances of distraction and misinterpretation.
- Too responsive
When using a vision chart, there are two ways to create a consistent testing environment:
- Keep the testing distance and chart-size identical on all devices.
- Change the testing distance and chart-size according to the screen size.
In other words, if a website is responsive and the size of the chart changes, the testing distance must also change accordingly. This wasn’t the case for most online testing experiences — the chart sizes were very responsive yet the testing distance remained the same.
PART II: Goals
A full eye exam at the optometrists consists of more than just simple vision test. The purpose of this test is not to replace a full professional eye exam.
Instead, it will provide estimated measures of vision (sphere, cylinder, and axis), less accurate but hopefully good enough to serve as a routine precautionary test.
Most importantly, the test will be accessible to all. The essence of the project is about allowing more people to check their vision without barriers. People regardless of their age, economic status, or disability should have equal access to the test.
Part III: Planning
Architecture
The test is divided into two main areas that resemble a real-world visit to an optometrist: The lobby, and the testing room.
- Lobby: The lobby is where you get greeted and get informed on the basics. You will see some medical magazines around (Conditions), and you can ask simple questions about the test or the facility at the reception (About, Contact).
- Testing room: The actual test happens in a separate testing room (Begin test). As you walk in, you will interact with the doctor (Setup, Instructions) to actually take the test. Test will be carried out in the order of myopia, astigmatism, and color blindness.
Note that there won’t be a “create an account” or “sign-in” — Users can enjoy the experience more quickly with full privacy.
Design system
Each section has its distinct theme — a darker theme for the lobby, and a much brighter theme for the testing room.
- The Lobby
Some lobbies can feel intimidating and induce panic. On the other hand, there are lobbies that are soothing and help people relax.
Lobbies should be comforting, yet not too shabby. A quiet spacious room, not too filled with people, with soft low light with touches of warm color sounded like an appropriate experience.
- Testing Room
The doctor’s office usually radiates a much different energy than the waiting room. There is a little bit of tension that alerts patients. It is often extremely clean that you can even smell it in the air. Brighter colors in shades of white were used to simulate this effect.
Text and Image Format
With online self-diagnosis, there’s always a risk of looking too tacky and unofficial. Being too modern and flashy might make it seem like “just another thing on the internet”.
Medical tests must give a sense of reliability, and a more traditional environment can definitely help achieve that.
So for the headers and titles, which are the two most noticeable text elements, a more classical looking Serif typeface was used (Abril Fatface).
However, when classical style dominates the theme, it can look outdated. So for smaller elements and body texts, a more modern Sans-serif was used (Nunito Sans).
Disclaimer: Consider all embedded texts within images as sample texts. Please don’t squint to read them!
Color
Using easily recognizable theme can provide a comfortable experience. According to the National Health Service of Wales, blue and green in white background are universally popular in hospitals around the world and can evoke sense of good hygiene and familiarity.
- Background: #1E2226 (dark), #FFFFFF(light)
- Text & Active Elements: #F9F9F9 (dark), #555555(light)
- Inactive Elements: #888888 (dark), #777777 (light)
- Highlights: A blend of blue and green (sea blue, #6dc6d6)
All color combinations were tested for readability and accessibility (contrast ratio of 4.5:1 or better). The only non-safe color were the blue highlights in white background, which was therefore mostly used for diagrams and solid fills.
Layout, Grid, and Spacing
Three standard spacing blocks were set in stone to achieve a more uniform structure and better aesthetics.
For a more visually consistent vertical spacing, I incorporated the amazing 4px baseline grid method analyzed by Ethan Wang.
Buttons / Microinteractions
All buttons and touchable interfaces are at least 48px long on one side, and have minimum of 30 pixels of vertical and horizontal spacings for more accessible interaction.
EXTRA LARGE FONT for accessible instructions
For the test, users will have to position the screen at distances farther than how they would regularly use it. At such distance, even large headers can look blurry to people with lower vision.
Inevitably, there will be instructions during the test that users must keep up with. Repeatedly pulling up the screen to read the instructions, and pushing it back to take the test will not only be inconvenient, but can compromise the accuracy of the test.
So I chose a much larger and thicker font dedicated for in-test instructions, so that all users can read it at a testing distance without having to get closer to the screen every time.
To determine the optimal font-weight, a simple experiment was carried out. I applied different object blurs to fonts with varying font-weight to simulate different magnitudes of blurry vision.
Fonts that were too light seemed transparent and invisible, whereas fonts that were too thick looked smudgy. A SemiBold turned out to be the most legible in different blur states and was chosen for in-test instructions.
PART IV: Project Vision
Front page (Desktop)
For the first impression of a vision-testing service, I thought nothing would fit better than an image of a human eye.
The deep royal green color of the iris radiates a gentle and robust energy, providing comfort and reliability at the same time.
The pitch darkness in the center conveniently provides some empty space for texts. This gives a huge advantage in terms of position and color (contrast) to emphasize the title and the Begin Test button.
Front page (Mobile)
Minimal usage of UI elements on limited screen area of mobile devices can direct user attention to Begin Test without without making it look too empty, as other secondary features are hidden in the stacked menu.
Conditions (Carousel)
There are three things users can get tested for with Project Vision. It makes sense to provide some information on these conditions.
I wanted an experience similar to reading infographic posters in clinics. Not only are they pleasant to look at, but it’s provides a flawless and accessible experience where people naturally skim through them as they walk along the hallway.
Naturally skim thorough as you walk along sideways— Sounds familiar?
A carousel interface that displays information sideways has an uncanny resemblance to walking around in a waiting room and reading wall-posters.
Conditions (Stacked)
In mobile interface, it’s easy to get lost due to the lack of menu items. To display current location within the service, the title header sticks on top and as you scroll through.
Entering the Testing Room
Going into the doctor’s office is always a special experience.
I wanted to preserve the feeling of “entering” the doctor’s office. An animation that takes users into the center of the eye with a drastic change in the background bring the users to the first stage of testing.
Main Testing Area
One thing I always try to avoid is going too far with minimalism. It can make a design look like it’s not complete. However, this part of the project was intentionally made to look sterile.
Hospitals are all about cleanliness, and the cleaner (sterile) it is, the more reliable it can look.
Test Setup
I needed to find a universal object that people can use to measure the testing distance consistently. What is something that everyone has around them that is similar in length?
According to one research, human arms are surprisingly consistent in length. There is a margin of error depending on the height and sex, but it certainly looked smaller than errors that would be caused from inconsistent estimation.
A couple of diagrams were made to help users correctly use their arms to set up the test.
More Accessible Setup
To accommodate all edge cases, like people with disabilities in their limbs, a measuring method using common household items is also readily available.
Three items were chosen: A plastic ballpoint pen, printing paper, and a soda can.
Providing a visual aid to follow is the best way to deliver instructions. Upon clicking the illustration, a quick animation will show how exactly to position these objects to accurately set up the test.
Equal size on All Screens
As previously discussed, test instructions will be displayed in extra-large font. Since the testing distance is the same for any type of device, text size will also be identical on every screen. This will help people with even severe myopia read the instructions properly and conduct the test with ease.
Myopia Test (ETDRS)
Most home vision tests uses a traditional Snellen chart despite it being outdated. There are many modern tests that are far superior in accuracy, but they often require complicated steps and calculations to record patient’s vision.
One of the most popular modern tests is the Early Treatment Diabetic Retinopathy Study (ETDRS). The ETDRS scoring instructions might be complicated for individuals to follow.
However, it would be easy to code the sequences and automate the calculations backstage. When the process is computerized, all users need to do is read whatever letter is automatically displayed on the screen without having to understand the scoring system.
ETDRS also requires a backlit light of 80 to 320 cd/sqm. Modern smartphones and monitors can definitely provide this lighting which so ETDRS is a even more suitable approach to home vision test.
Gamification was used for better engagement. As you progress through, you will see different levels of where you are on. Also, there will be progress bar available on the top to let the users know what part of the test they are in and how much more they have until the end of each ‘stage’.
Astigmatism test
Astigmatism test gets a little more complicated. It’s not just “selecting what you see” like the myopia test, so it requires more instructions.
Initially, my main goal was to minimize text shown in-test so users can purely focus on the test. So I divided the test phase into two steps, one with all the instructions and another for the actual test.
However, But when implemented, it didn’t quite look right. The discrepancy in the amount of information between the two screens was too extreme.
In fact, the experience is quite the opposite at the doctor’s office. You usually listen and follow the doctor’s direction on the go. There is no reading the instructions ahead and remembering it for the test. As a patient, you naturally engage in a conversation with the doctor, and take action accordingly.
The final result eliminated the factor of memorizing the instructions. It has a more engaging and organic conversational steps as if you are interacting with the optometrist in real-time.
Testing on Mobile
Project Vision offers equally appealing and accurate experience on mobile devices.
PART V: Forward
Since I was a kid, I always thought “what if you’re too sick to go to the hospital?” Getting diagnosed by a robot at home has always been one of my biggest dreams.
Recently, I realized that although not as robots, technology has opened up a world of opportunities for advanced home-diagnosis. Unfortunately, I have seen many cases where poor user research and experience design have acted as limiting factors.
With proper understanding of the users and by learning how to create accessible experiences, I believe a lot more people can benefit from home-diagnosis technology.
As you can tell, the project is still in an infant stage. There will be many iterations and improvements until it yields a final product.
An immediate step after this would be to get professional optometrist’s opinion on how to improve accuracy of the test. With more feedback on the medical side of things, I hope to build a first working prototype by the end of the year.
With that, if there are programmers, designers, or health professionals who are interested in finding unique ways to improve public health, please reach out to me. It would be awesome to get onboard with people with similar goals and collaborate on things that can impact people in need.
Let’s talk!
