top of page
MACVision allows accessible testing at home for myopia, astigmatism and colourblindness
Anchor 1
This NHS-integrated app (or MACVision) is a convenient way to test for common visual impairments at home, however it DOES NOT REPLACE professional diagnosis by optometrists. Testing at home is an affordable preliminary exam before consulting a doctor and it could save millions in healthcare expenses.
This app was created in collaboration with another UX Designer.
My role
User Research, prototyping, UI design
Timeline
October 2022 - December 2022
Revisited December 2023
Vision impairment poses an enormous global financial burden with the annual global costs of productivity losses associated with vision impairment.
2.2
million people have a near or distance vision impairment in the UK.
3.0
% is the current prevalence of sight loss and blindness. This is projected to increase to 5.4% or approximately 4 million people by 2050.
cataract procedures in England in November 2021 - 21% higher than five years previously.
The most common causes of visual impairment globally are:
cataracts (33%).
glaucoma (2%).
uncorrected refractive errors (43%). Refractive errors include near-sightedness (myopia), far-sightedness, presbyopia, and astigmatism.
Colour blindness is also a condition very often seen in the UK population, therefore I decided to focus on the 3 most common visual impairments:
Colour blindness
Hurdles of routine vision tests
01
An average of 18 weeks waiting time to get a referral appointment and an additional 3-6 months waiting time for a routine first outpatient appointment.
02
An NHS sight test is free of charge only if you're in one of the eligible groups and the test is considered clinically necessary.
03
The cost-of-living crisis means that patients who need vision correction take no action because they cannot afford to.
Domino effect
-
long waiting times to get an appointment.
-
not qualifying for one at all.
self diagnosing on the internet. 51% of UK adults consult the internet for a variety of medical information, around 34% misdiagnose.
-
purchasing non prescription glasses.
-
leaving the condition untreated.
acceleration of disease
extra costs for the NHS
To back up the research, I interviewed 3 people...
All of them go to checkups on average once 1.5 - 2 years.
Because of increased appointment costs and insurance, one of the participant goes back from California to her home country Korea for appointments and prescription glasses.
One of them used to buy glasses off of non-licensed prescription glasses sellers which led to complications.
All information being used to create a user persona who ticks all the pain points and goals my interviewees were having.
Problem statement
An average of 3-6 months to get an NHS appointment or not being able to qualify at all may lead to patients leaving the impairment untreated or trying to self-diagnose risking to misdiagnose their condition. This can all cause disease worsening and astonishing healthcare expenditure.
What would this NHS-integrated app be able to achieve?
Accessible
The app would be accessible to everyone, allowing more people to test their vision without any barriers (disabilities, economic status, age, etc.).
Quick and easy to follow
The app provides real time instructions on how to conduct the test and easy to follow for any group of people, be it tech savvy or non-tech savvy.
Prevent disease worsening
With some conditions getting progressively worse due to various factors (career, age, genetics, etc.), being able to conduct regular precautionary tests is essential in preventing disease worsening.
Save on NHS expenditure
In 2020/21 the Department for Health and Social Care spent £192 billion with an average of £39.23 per GP consultation. By preventing no shows and paying the workforce only for essential hospital visits, this can considerably save on NHS expenditure.
Just 2 steps
1. Open the NHS app and choose the "NHS sight test" service.
2. Choose the test type (or manage your results from previous tests).
Helping the algorithm make better predictions
At the start of the test, users are required to answer a couple of questions to allow for better results. Age, ethnic background, and previous/current visual defects are valuable information when trying to make more accurate predictions.
Test setup
Using face detection to assess the distance of the patient from the phone
To increase distance and therefore test accuracy in rapport with the test instructions (e.g. place phone 35cm away from face), I decided to incorporate a similar approach used by smart banking apps. In order for the app to be able to detect how far away the object (patient) is, the user would have to place their face in the frame shown.
The size of the frame would be in proportion to how far away the patient's eyes need to be, in this case around 35 cm away, or one arm's length away from the phone.
To allow for better accessibility, I initially planned to add an ambient and dark mode to my UI, however...
Using features such as dark mode, true tone or any sort of colour profiles, may interfere with the test and can lead to visual differences and thus decreased accuracy. The only changes the user will be able to make is change the font size.
Therefore, the app would ask users to turn off all screen adaptive features
Because some tests such as the Myopia (ETDRS) test require a backlit light of 80 to 320 cd/sqm, the phone's auto brightness settings should not interfere. As seen in other applications such as Netflix, the app will be able to adjust the light to the required value despite the auto brightness settings being turned off.
True Tone mode can interfere with how accurately the colour are presented in the colour blindness test, therefore the same rules as above will apply.
Astigmatism test
There are 2 types of at-home astigmatism testing:
Dial test
Line test
Because the dial test is a bit more complicated to implement on a small screen, I decided to stick with the line test.
Following usability testing, I realised the touch target for the lines are too small for the user to accurately select so I decided to add the degrees on each of the lines and allow the user to select the degrees from a scrollable picker.
The screens also informs the user at which level within the test they are by displaying the Level and a progress bar.
The letters used in the app are "Sloan letters" , taken exactly from the chart without any modifications.
The major drawback of taking this test alone, without an app is the difficulty in interpreting the results . However, with inputs being recorded and calculated automatically backstage, patients will only be required to enter the letter shown and wait for the results. This would pose advantages for ophthalmologists as well as they will have the results readily available.
Myopia test (ETDRS)
Many clinics in the UK are using Snellen charts to assess one's visual acuity despite there being major disadvantages. The disadvantages are that each line has a variable letter size, variable letters per line and lack of standardised progression between lines.
For this app, I decided to use ETDRS charts, which are theoretically superior to Snellen charts because interpatient differences are more accurately measured.
But how do we ensure letters are accurately displayed?
The myopia test requires the patient to identify letters on a distance chart, usually 20 feet (6m) away from the chart. This test measures visual acuity, which is written as a fraction, such as 20/40. The top number of the fraction is the standard distance at which testing is performed (20 feet). The bottom number is the smallest letter size read. A person with 20/40 visual acuity would have to get within 20 feet to identify a letter that could be seen clearly at 40 feet in a "normal" eye.
But how do we ensure that letters on a 64.8 cm wide and 62.2 cm high board are presented the same on phone with an average of 6 inch screens? There would be the need for an algorithm which would be able to convert the actual letter size on the board to the perceived letter size seen by the patient at a distance of 6m. With the help of PPI we can find out what would the perceived letter size would look like on a mobile phone screen.
Colour blindness test
The colour blindness test was the easiest to recreate. The test mimics the commonly used Ishihara plates test which consists of 14 questions. The passing score is 12.
The first and second iterations consist of having 4 different options to choose from, one of them being the correct one. However, this would have increased the chance of the user guessing the right answer and affecting the accuracy of the test. The final iteration would present the user with a 6 different options, similar to a phone dial pad which would eliminate every chance of guessing the right answer. At the end of the test, based on the results, the user will be able to book an appointment with the specialist.
Iteration #1
Iteration #2
Final iteration
Usability testing
I tested the prototype with two of the interview participants who were able to navigate through the app with ease. Feedback from the second participant was in relation to the first screen (iteration #1), commenting on the fact that the results may bring negative emotions to users. The same participant found the myopia test (iteration #2) not intuitive enough by itself, therefore the added instructions will reduce users' cognitive load. The first participant had difficulties selecting the thicker line in the astigmatism test (iteration #3), issue remedied by adding degrees to each of the line as well as a scrolling picker.
Success metrics (hypothetical)
Increased patient engagement. Success could be measured by increased usage of the app and higher patient satisfaction scores.
Improved patient outcomes, such as fewer hospital readmissions or better overall eye health.
Reduced healthcare costs, by reducing the need for in-person appointments or hospitalisations.
Increased adoption by healthcare providers. Success could be measured by positive feedback from providers about the app's usability and usefulness.
Home screen iterations
Navigation in the form of a menu
Adding bottom navigation
Final iteration
Revisited
Revisited: After a year, I picked up the project again
The idea of the home screen not meeting my vision lingered, making me consider a redesign. Despite a year passing, my passion for the project led me to return and enhance its appearance. With increased experience and new insights, several aspects demanded improvement.
Identifying numerous inconsistencies in the previous version, I addressed issues like varied font styles, standardised heading colours to all black, and ensured adequate contrast ratios for certain text elements.
Previous version
Adding a personal touch by customising the greeting with the user's name.
Recognising the need to boost app engagement and drive sales, I decided to add features encouraging users to return, like displaying their results and reminding them when it's time for a retest.
Due to the app's primary audience being individuals with potential eye conditions, ensuring accessibility for users with colour blindness became crucial. Recognising that navigation icons relied solely on colour recognition, I opted to introduce an additional distinguishing feature—such as filled icons—to enhance intuition and usability for those with color vision challenges.
The prior design featured an abundance of colors that had the potential to distract users. Opting for a "cleaner" look, I aimed for simplicity, also optimising space in the process.
Addressing contrast issues from the previous version, I prioritised adherence to WCAG 2.2 guidelines to ensure improved accessibility.
Each interactive component is designed with a minimum touch target size to optimise user interaction and experience.
To enhance user engagement and offer additional value, I chose to incorporate informative content within the app.
Revised version (December 2023)
Spacing, Grid and Colour Palette
I used a 4 column, 4px grid, 8px gutter layout with a margin of 24px. All elements were placed at a distance divisible by 4 from each other to ensure a consistent feel throughout all screens.
Adhering to Jacob's law, I also incorporated a primary blue colour in my app design to make it recognisable and consistent with other medical apps.
All buttons and touchable interfaces had a minimum touch target of 44px for more accessible interaction.
Blue, especially in cool muted hues, can be very calming. It's a commonly used colour in hospital rooms, wards, waiting areas, and wellness centres. All colour combinations were tested for readability and accessibility (contrast ratio of 4.5:1 or better) using the WCAG Figma plugin.
Looking forward
Having a platform where patients can have a pre-diagnosis prior to attending the clinic poses benefits for both the patient and the healthcare system, preventing frustration, waiting times, unnecessary clinic visits and healthcare expenses. The app would not replace professional diagnosis but it would serve as a good enough solution for a routine precautionary tests which would prevent disease worsening.
Although there may be scepticism in terms of accuracy of such applications, with so many technologies like AI, proximity sensors, face recognition, these apps would be a real solution for those struggling financially, people with motor disabilities, etc.
To further test the app's accuracy, an initial first step would be to get several opinions from specialists. The accuracy would further improve while the app is being used real-time, allowing me to understand where the app can be improved.
This idea can be further developed and can grow to allow for a wider range of tests such as hearing tests, condition which affects 1 in 6 of the UK adult population.
Thank you for reading this far :)
View other projects...
bottom of page