W)5(+56*5)2 T.)0(/0(6..

!"##"$ %&&'(!"##"$)*+

!"#$%&'()*+*#,(-
.&&%++*/0%(1*+*#,('%+'(2'
3#4%
,-.)*/)01)(2)+/30(4))5+(4)2/16#
2/630"+/+

7816+(9:6)( ;83(<=>(?@<A · <%(4/0(*)62

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.

9#/1B(:)*)(5"(+))(5:)(.*"C)15("0(D):601)

!"#$%&'%#()(*+,-

$-(%./01+(*2

!"#$%%&#'&()*+$,-.)#."
/&.()'$)0&%-$10
(&2&/$,*&"'./)."(
2-0-$"3'4%&.'&"-"5
(-0$%(&%06
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.

3-*0%-*44(5)%67%89/%:(*;(%60
/5,9++(,0(<=
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.”

E:65(#/F/03($/5:(0)6*+/3:5)20)++(G))#+(#/B)H(9*)2/5I
J61BG/+:(F/6(E/B/4)2/6(9"44"0+>99(DKLM;(&H@

>/+<:()%09%+9/065(%;6)695%0()0)
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.

?@6)065A%)(+;6,()%*5<%+99B%79+
6B4+9;(B(50)
From vision tests already available online,
these were four most common user
obstacles I found.

Create an account

M/30L8.(*)N8/*)2(5"(611)++(60(6..(5:65(.*"F/2)+(56O#)+
8+)2(5"(5)+5(F/+/"0H(9*)2/5I(,P)(9:6*5(Q*"

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

9*)2/5I(,++/#"*

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

;(5P./16#(F/+/"0(5)+5(/0+5*815/"0(P"8(160(G/02("0#/0)H(R"
+"4)(.)".#)>(60(=L+5).(/0+5*815/"0(160(#""B
/05/4/265/03H(9*)2/5I(S/+/"0(M"8*1)

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

9*)2/5I(T.5".#8+(F/+/"0(5)+5

When using a vision chart, there are two

ways to create a consistent testing
environment:

1. Keep the testing distance and chart-size

identical on all devices.

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

!"#$%&&'%C9*:)
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.

E"8#20U5(/5(O)($"02)*G8#(5"(3)5(*"83:(F6#8)+(#/B)(5:)+)
65(:"4)V(Q:"5"(1*)2/5I(;##(;O"85(S/+/"0

!*+0%&&&'%!:*5565A

"+,-60(,0/+(
The test is divided into two main areas that
resemble a real-world visit to an
optometrist: The lobby, and the testing
room.

1. 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).

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

D()6A5%)8)0(B
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.

$(@0%*5<%&B*A(%E9+B*0
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!

F9:9+
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.

G*89/0H%C+6<H%*5<%I4*,65A
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.

J/0095)%K%L6,+9650(+*,0695)

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.

?M$#"%G"#C?%E.N$%79+%*,,())61:(
65)0+/,0695)
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.

!"#$%&O'%!+9P(,0%O6)695

E+950%4*A(%QD()2094R
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.

E+950%4*A(%QL916:(R
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.

F95<60695)%QF*+9/)(:R
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.

F95<60695)%QI0*,2(<R
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.

?50(+65A%0-(%$()065A%#99B
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.

L*65%$()065A%"+(*
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.

$()0%I(0/4
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.

X)60(F6#8)+("G(6*4(#)035:+(/0(46#)(602(G)46#)
+8OC)15+

A couple of diagrams were made to help

users correctly use their arms to set up the
test.

L9+(%",,())61:(%I(0/4
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.

?S/*:%)6T(%95%"::%I,+((5)
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.

L8946*%$()0%Q?$D#IR
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.

!/06#(F)*+/"0("G(5:)(4P"./6(5)+5H

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

")06AB*06)B%0()0
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.

!/*+5L+563)(1"01).5(G"*(6+5/3465/+4(5)+5/03>($:/1:(0"$
#""B+(#/B)(6(2/+6+5)*

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.

!/06#(F)*+/"0("G(5:)(6+5/3465/+4(5)+5

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.

$()065A%95%L916:(
Project Vision offers equally appealing and
accurate experience on mobile devices.

!"#$%O'%E9+U*+<
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!

Lucas Chae — LinkedIn, Twitter, Portfolio,

Email

I6A5%/4%79+%$-(%VM%F9::(,06;(
N(U):(00(+
DP(YZ(9"##)15/F)

;($))B#P>(62LG*))(0)$+#)55)*(5:65(:)#.+
2)+/30)*+(+56P(/0(5:)(B0"$>(O)(.*"2815/F)>(602
5:/0B(4"*)(1*/5/16##P(6O"85(5:)/*($"*BH(R6B)(6
#""BH

W)5(5:/+(0)$+#)55)*

J)6#5: [)+/30 R)1:0"#"3P \0+./*65/"0

96+)(M582P

=&

L9+(%7+9B%VM%F9::(,06;( !"##"$

E)(O)#/)F)(2)+/30)*+(6*)(5:/0B)*+(6+(481:(6+(5:)P(6*)
46B)*+H(98*65)2(+5"*/)+("0(YZ>(S/+86#(](Q*"2815
[)+/30H

^)62(4"*)(G*"4(YZ(9"##)15/F)

L9+(%E+9B%L(<6/B

I-*+65A%B8%(@4(+6(5,(%65%G*<6()
0-*0%VM%$*64(6
K/039:8(9:)0

D()6A5%65%D*6:8%:67(
D/*5)(D*68)*

36,2(<%!+91:(B)%VM%F*)(%I0/<8
\0ê+(R!(/0(Y+6O/#/5PW))B

L8%!+91:(B%360-%E6AB*
D"*/+(Xü##)*

I3?GG'%D()6A565A%*%$+*,265A
"44
9/02P(JH(T*60

!6,2%,9:9+%18%:/B65*5,(%U60-
$+6*5A/:/B%F9:9+%!6,2(+
X6+6'826465+8(/0(\05*"281/03I
R*/6038#84(9"#"*(Q/1B)*

W"58%39+2%$-*0%D9()5X0%#(7:(,0
&0)%$6B(%&)%!+91*1:8%O(+8
I-*::9UY
D6*O6*6(X6C+6

$-(%1()0%)0*5<65A%<()2)%79+
-9B(%9776,()%65%Z[Z\
,L9:"/1)

;O"85 E*/5) J)#. 7)36#

W)5(5:)(X)2/84(6..