top of page
.png)
Sponsored by
DIRECT
Disclaimer : This project contains images / texts about a medical condition which might be uneasy for some audience to see / read.
BACKGROUND
Diabetic Retinopathy
Diabetic retinopathy occurs when there is leakage in the blood vessels in back of the human eye (fundus) due to high sugar level.
Diabetes
Diabetes is prevalent among humans worldwide. There are more than 4 million diabetic patients in developing countries like India, South Africa and South America.
Fundus
Fundus is back of the human eye. When diabetic retinopathy occurs, it causes leak in the blood vessels in fundus. Fundus consists of fovea, optic disk and nerves.
Blindness
Diabetes is the leading cause of blindness among senior adults. Diabetic retinopathy makes diabetic patients vulnerable to complete vision loss or blindness.
ROLE
UX Design+ Research, Interaction Design
DURATION
6 months (June-Dec 2020)
DISCIPLINES
Ophthalmology, Design, Machine learning, Optical engineering.
TOOLS
Figma
Adobe XD, aftereffects
Miro, LucidChart
Framer
Html, css javascript
Research
METHODS
Interviews, observation+contextual inquiry, affinity diagram, triangulation
Ideate
Information architecture, persona, storyboard, journey map, wireframes
Design
Test
Visual designs, click-through mockups, 3-D models,
Usability study, a/b test, heuristic evaluation
PROBLEM HIGHLIGHTS
- WHO claims that over 216 million diabetic patients worldwide are vulnerable to Diabetic Retinopathy and eventually to blindness.
- The existing solutions in the market are expensive, require training to use and are unaccessible to most patients in developing countries like India.
- The existing hardware prototype developed by the previous team is not robust and is not ready for patient screening. The supporting web app UX design has not been tested with users.
SOLUTION HIGHLIGHTS
PROBLEM STATEMENT
How might we help the medical and non-medical operators easily and economically detect diabetic retinopathy among diabetic patients in the USA and developing nations like India?
PROCESS
1
Gather requirements
-Understand the business
-Understand the business scope
-Actual requirements
Launch
2
3
4
Research/Discover
Define
Ideate
-Generative user research
-Problem/technology/business research
-Triangulate
-Evaluative and summative research
7
-Scope of the problem
-Use cases, user tasks/goals
-Constraints
-Information architecture
-User tasks, interactions, stories and wireframes
-Experimentation and early mistakes
6
5
Iterate
Test
Design
-Product Refinement
-Feature Enhancement
-User feedback
-Qualify metrics
-Usability evaluation
-Functional evaluation
-Synthesis
-Enclosure design for hardware
-High-fidelity interactive mockups for web-app
-Visual Design
Understanding the business | REQUIREMENT GATHERING
Understanding the business
When Microsoft presented this project to us, they already had a vision and approach to address this problem space. Following is a glimpse of their vision, mission and broad level goal:
Vision
Help people & businesses throughout the world realize their full potential.
Mission
Infuse data science and AI to solve world's greatest challenges.
Goal
To construct a low-cost, easy-to-use, high-image-quality “AI Fundus Camera” with “point-and-shoot” operation .
Exploration of the why and who | RESEARCH
Generative User Research
Secondary Research
Primary Research
Triangulation
I led the qualitative research to help myself and the team better understand the users, competitors, problem and technology. For the same, I conducted:
8
User interviews
3
Observation +
Contextual Inquiry
5
Stakeholder + Expert interviews
It was too much information to process within a short amount of time. So, I facilitated a group thinking workshop for my team to comprehend the qualitative data and segment it meaningfully. I used "RAID" methodology to segment the cards together as shown below :
Key findings from research
Users
- Our primary users are operators, secondary users are diabetic patients, and tertiary users are Microsoft, GIX, UW Medicine.
- In long term, diabetic patients will be highly impacted since early diagnosis will reduce vulnerability to blindness. Easy access to the retinal imaging device and quick diagnosis will motivate them to get the test done early on.
Problem
- Early diagnosis of diabetic retinopathy reduces the risk of blindness by 95%.
-The cost of existing high quality fundus cameras is upto USD 20,000 and the image quality in handheld cameras is low.
- AI can help in reducing dependency on medical experts.
- A system that can facilitate data collection will be helpful in training the AI model.
Stakeholders
- Users : Ophthalmologists, post docs and medical students at UW Medicine, untrained volunteers.
- Sponsor/Business partner : Microsoft AI for Good (Health)
- Organizer : GIX, University of Washington.
- Resources : Diabetes experts, COVID-19 experts, manufacturers
Competitors
- Epicam
-Optovue IFusion 2
- Google AI
- ODocs
- MIT fundus selfie
- D-eye
- Other
What is critical in getting a high quality fundus image?
To answer this question, I collaborated with my team and we explored the existing work done by previous team and competitor product.
Existing prototype
Taking inspiration from conventional optical design
Pros : Modular and compact
Cons: Not robust and hard to dissect.
Innovated optic design to retain image quality but support compact form.
Competitor model
Epicam
Pros : Does not require dilation
Cons : Poor field of view and image quality, too many degrees of freedom for moving the camera.
Retinal image taken using Epicam by our team
IDENTIFYING SPACE TO INNOVATE AND IMPROVE
HARDWARE
-Distances
-Raspvid
-Component optimization
1
SOFTWARE
-Image processing
-Image stitching
-Real time feedback
2
USER EXPERIENCE
-Adjust focal length
-Alignment
-Ergonomics
-App experience
3
ENCLOSURE
-Modular
-Robust
-Compact
-Intuitive
4
Exploring the what and how | IDEATION
Personas
Since we had multiple customer segments, it was important to identify themes of like behaviors, attitudes and people who would potentially use this product. Personas did a great job in helping us identify the same.
Medical/trained operators
Non-medical/untrained operator
Learning from personas : Focus shifted toward medical operators.
These personas clearly indicate that there is a huge gap in priorities, pain points and mindsets of the two user segments. However, the long term goal was to make the product accessible to non-medical operators in developing countries. But the design systems for both user segments would be very different. It was time to prioritize and select one user segment considering time and resource constraints. If we didn't build and test it on the medical operators, we would not know if the product can generate a diagnosable fundus image. Additionally, at the time we had optical and medical experts on the team who could help us build an efficient and functional product. For these reasons, the business experts suggested that we shift the focus to the medical operator user segment and once we test it with the medical operators, we can gradually expand it to the non-medical operators. Hence, we decided to design majorly for medical operator
Storyboards
Once the primary user and problem was identified, it was time to understand their process and identify touch points. Following are the sample storyboards that I designed for identifying the user process and critical interactions.
.png)
Tools : undraw, figma
Adjust focal length on the camera
Align patient's fovea with the lens.
Validate the image using web-app
Repeat steps 1-3 and save images to Azure cloud.
After presenting the storyboard to the stakeholders, I collaborated with co-designer and web developer on my team to create information architecture and wireframes as shown below.
.png)
Tool : Figma
Failing early - Iteration 1 web app
.png)
These wireframes helped in rectifying the obvious errors and usability issues before investing much effort and time in designing.
Click on card or start?
Confusing call to action
What does comfort the patient? do
Where do I click to retake image?
Not sure what LED 1 and 2 are for
I don't really need to see the menu on this screen
Scrappy but helpful - Iteration 1 hardware
.jpg)
First fundus image yayy!
Hi-fi mockups
bottom of page