A low-cost fundus camera with a companion web app that enables speedy diabetic retinopathy (DR) detection in developing countries.
PROBLEM
Diabetic Retinopathy (DR) is the leading cause of blindness not only in the USA but also in developing countries. 370 million people worldwide suffer from diabetic retinopathy, glaucoma, or macular degeneration. The good news is early detection reduces blindness by 95%. The detection requires capturing a high-quality fundus (the back of human eyes) image. However, current fundus cameras cost $20k on average, the current clinical used fundus camera requires trained medical professionals to operate. According to our secondary and primary research, we found that ophthalmologists are very short-handed in developing countries.
SOLUTION
Our proposed solution is an easy-to-use and low-cost fundus camera capturing enhanced quality images, an adjustable chin-rest with good ergonomics, and an AI-based companion web app, for untrained non-medical professions to detect DR, especially in developing countries.
My Role
Design Lead
Duration
6 months (July 2020 - Dec 2020)
Team Members
Lu Wei
Frank Zhou (Hardware Engineer)
Tommy Ho (Back-end Engineer)
Jialin Zhao (Front-end Engineer)
Ketki Hardas (Project Manager)
Tools
Figma / Adobe Illustrator /
Adobe Photoshop
THE SOLUTION
APPOINTMENT MANAGEMENT
The operator can easily click the appointment card on the Dashboard to verify the patient information and then start the eye test.
SET-UP FOR EYE TEST
The operator should make sure the set-up before the eye test, including selecting an eye and turning off the light to create a dark environment.
EXPANDABLE LIVE VIDEO
The live video window can be expanded by hiding the side bar, thus allowing the operator to focus on more details.
REAL-TIME GUIDANCE
The guide circle is to help the operator align with the patient's eye, while the guide light position instructions show where the guide light is supposed to be placed, which are pretty helpful for non-medical professionals.
AUTOMATED VERIFICATION
After a funuds image is taken, our algorithms will determine whether it is clear enough based on the brightness and sharpness scores.
STITCH FOR WIDER FIELD OF VIEW
When five images are taken, the operator can get a stitched image with a wider Field of View (FOV), through our image processing algorithms.
LEARN ABOUT FUNDUS
There is a training wizard for non-medical professionals to learn about basic funuds knowledge and get qualified to take fundus images.
LEARN TO USE FUNDUS CAMERA
There is a training wizard to learn about how to set up the device and use our fundus camera.
IMPACT
📷 Decreased the cost of a fundus camera from over $2,000 to under $500.
👩⚕️ Only 1 ophthalmologist per 1 million people in developing countries → Our solution can train non-medical professionals within 20 min and make them qualified.
⏰ Reduced the time to take a fundus image from over 20 min to around 5 min, meets the requirements of doctors.
Our products are ready for data collection in clinics and can be expanded to developing countries.
Functional prototypes were handed over to Microsoft to continue the hardware and software development.
· · ·
THE PROBLEM IN DETAIL
Diabetic retinopathy (DR) is globally prevalent 🌍
Diabetic retinopathy (DR), a condition where diabetes causes damage to the retina, is among the leading causes of vision loss at the global level. In terms of global prevalence of people with diabetes and diabetic retinopathy, in 2015, among the adults living with diabetes, 35% have some form of DR and 11% have vision threatening DR. According to that rate and increasing number of population, in 2040, there will be over 200 million adults who have some form of DR, while 70 million have vision threatening DR [1]. Such a huge number!
The situation in developing countries is even worse:
• Only 1 ophthalmologist per 1 million people in some African countries [2]
• 1.1 billion people do not have access to eye care [3]
• Financial hardships
However, early treatment of DR decreases the risk of blindness by 95% [4] 👀
Early detection, timely treatment, and appropriate follow-up care can reduce a person’s risk for severe vision loss from diabetic eye disease by 95%. [4]
Fundus tells everything about DR 🔍
The key thing for DR screening is to observe the patient’s fundus. The fundus of the eye is the interior surface of the eye opposite the lens. With DR, changes to blood vessels in the rear of the eye cause bleeding or leaking fluid, which starts to distort vision. The changes in blood flow happen because diabetes (especially uncontrolled diabetes) can create chronically high blood sugar. This damages very small blood vessels in the retina and eventually leads to retinopathy. [5]
DESIGN QUESTION
How might we design and build an easy-to-use, low-cost and high-quality fundus camera system for untrained non-medical professions to detect diabetic retinopathy (DR), especially in developing countries? 📷
USER RESEARCH
STAKEHOLDER ANALYSIS
Our stakeholders include Microsoft, doctors, volunteers and patients. We analyzed the research results from 8 interviews and 3 virtual observations of eye test process, and then synthesized into stakeholder analysis as our further design requirements. The picture below shows the requirements of each stakeholder. Since we already have a proof-of-concept prototype, our design requirements are mainly focus on using new components to capture higher quality images and further enhancing the user experience.
USER STORY
From the stakeholders, we learned that our immediate goal is to facilitate the experience of using a fundus camera to take images for untrained volunteers. Therefore, the user story could be:
"As an untrained volunteer, I want to learn what fundus is and how to use the fundus camera, and then intuitively take fundus images by adjusting the hardware and interacting with the web app."
SOLUTION
IDEATION
We brainstormed 50+ ideas. Then we communicated with Microsoft and discussed about technical and time constraints. In the end, we prioritized 4 main functions and 18 features as the MVP.
SOLUTION
FEATURES OF MVP
According to the main functions and features, we decided the jobs to be done in each category.
SOLUTION
USER FLOW
DESIGN
PROTOTYPES
DESIGN
WEB APP INFORMATION ARCHITECTURE
The goal of the companion web app is to:
1) provide a training and practice system for untrained volunteers to learn more about the fundus and how to use our fundus camera;
2) provide an intuitive user flow for untrained volunteers to quickly finish the image taking process.
Here is the information architecture with these two prioritized features according to the user story and the storyboard.
DESIGN
WIREFRAMES
EVALUATION & ITERATION
A/B TESTING
The Live Video page is the most important page during the image taking process. Therefore, I created 4 different versions with different layouts, and tested users' behavior and asked them about opinions.
After observing participants' behavior and synthesizing all likes and dislikes from them, I found Option B (Large video window with guidance in the right) had the best performance, because of the following advantages:
1) The guidance and the button are in the same column, close to each other, making the info architecture clearer.
2) The “Take an image” button is in the bottom right corner, which is the most convenient location for users to click. It is also the final point of vision.
2) The “Take an image” button is in the bottom right corner, which is the most convenient location for users to click. It is also the final point of vision.
3) The large video window attracts more attention to let the user focus on more details.
EVALUATION & ITERATION
USABILITY TESTING
BEFORE
- Insufficient information on the appointment card: 4 out of 5 participants were not sure whether they were giving the right patient an eye test after clicking on this appointment card.
- Not obvious enough button: 3 out of 5 participants clicked the appointment card instead of the “Start” button.
AFTER ✓
- Enhanced recognition: Prioritized patient name and files allow the participant to roughly check the patient information.
- Easier interaction: The participant can click the entire appointment card, instead of a specific button, to start the eye test.
BEFORE
- Excessive amount of information: All the guidance was placed on the right side of the interface. The excessive amount of information caused all 5 participants' attention to be on the guidance.
AFTER ✓
- Organized information: A new side bar is added to organize the summary information about the eye test, such as the patient information and the left/right eye currently being photographed. In addition, the feature of hiding the side bar allows the participant to focus more on the live video.
BEFORE
- Useless texts: All 5 participants spent a lot of time reading the texts of the guidance, but still had no idea what it was until they turned it on.
AFTER ✓
- Prioritized functionality and more visualized instructions: The guide circle is set to the default on state, enabling participants to directly see what the guide circle is. More visualized instructions on the guide light are added as well.
BEFORE
- Insufficient functionality: All 5 participants clicked small “See the image” button and wanted to see the details of the image they took, even if they did not understand the fundus. And 3 out of 5 participants wanted to retake the image.
AFTER ✓
- More helpful functionality: A preview of the image is added directly on the Confirmation page. A “Retake the image” button is added as a secondary button, in case some medical experts who are able to determine if the image is good enough want to retake the image.
BEFORE
- Complicated progress bar: 3 out of 5 participants spent some time reading the text on the progress bar. The progress bar with too much information on the training wizard will distract the participants' attention.
AFTER ✓
- More simple progress bar: The iterated progress bar contains only a thin line that can be extended according to the progress, more simple and clear. The animations can show the progress clearly.
DESIGN
DESIGN SYSTEM
I chose a dark grey as our primary color and set it as background. The reasons are:
- The fundus images should be taken in a dark room, thus the dark background will not create extra light.
- In the dark environment, the dark background will be more user-friendly since too much bright light on the screen will hurt the operator's eyes.
- The operator will see a live video on the screen. A darker interface makes it easier to highlight moving images like video than a white interface, allowing the operator to focus entirely on the live video.
View the full Design System
DESIGN
DELIVERABLE
FUTURE STEPS
1. Continue the hardware and software development. Currently our solution only solves the problem of taking high-quality fundus images and giving a training wizard. There are many other functions need to be designed and developed, such as detecting the stage of DR and generating diagnostic reports. Our current solution can be used for data collection. After we have collected enough data, it can be used for training ML models to get the diagnosis.
2. Find more subjects for usability testing. The subjects of the two rounds of usability testing we have done now are medical students, who are non-medical professionals to some degree, but in order to achieve our long-term goal, we need to find volunteers from developing countries for more usability testing.
· · ·
Reference
[1] Nick, K. Diabetic Retinopathy – silently blinding millions of people world-wide. Retrieved from http://atlas.iapb.org/vision-trends/diabetic-retinopathy/
[2] Number of Ophthalmologists in Practice and Training Worldwide. Retrieved from: http://www.icoph.org/ophthalmologists-worldwide.html
[3] Nicole, O. (2015, October 9). 1.1 billion people in need don’t have vision care – World Sight Day made an impression on Twitter. Retrieved from: https://medcitynews.com/2015/10/1-1-billion-people-in-need-dont-have-vision-care-world-sight-day-made-an-impression-on-twitter/
[4] National Eye Institute. The importance of treatment with good glucose control cannot be underestimated. Retrieved from: https://www.nei.nih.gov/sites/default/files/2019-06/diabetes-prevent-vision-loss.pdf
[5] Eye Health. (2017, November 6). Diabetic Retinopathy. Retrieved from: https://www.eyecarevisioncenter.com/eye-health/diabetic-retinopathy/
Next Project