Elisar | UX Case Study
Designing an app for ophthalmologists to accurately assess glaucoma test reports
Summary
The goal was to design the digital and print experience of viewing the test reports of glaucoma patients with ease. There is an abundance of disorganised test data with several technical terms that inhibits and impedes the doctors' process of assessing patient reports. The solution was focused on creating a design that will speed up the process by allowing doctors to assess the reports at a glance, both for the app as well as in physical prints.
My Role
Research & Strategy
Wireframing & IA
Prototyping
Visual Design
Team
3 Designers
Timeline
2 months
(Aug 2021 - Sept 2021)
Tools
Defining the Problem
There are numerous graphs, plots and other data-driven visuals that are displayed in a disorganised manner, making it time-consuming to comprehend and assess the stage of glaucoma progression from the past and current test reports of the patient.
> How might we design the experience of assessing test reports to be quick and intuitive?
> How might we simplify the process of navigating through and viewing multiple reports?
Approach
Industry Research | Iterative Wireframing | Prototyping | Visual Design
Industry Research
& Iterative Wireframing
The problem we needed to solve for was complicated data and graphs being displayed in several pages of patient reports in a disorganised way, which made it difficult for ophthalmologists to quickly analyse the patient’s state. For doctors, time is of the essence and therefore we needed to make the process more efficient such that they could spend lesser time in assessing the stage of glaucoma and make quicker decisions.
For the Elisar app, doctors used M7 and M8 tablet sizes so the interface designed needed to fit adequate information within limited space on the screen without compromising on key information. I was responsible for creating all the wireframes for M7 and M8 screen sizes.
M7 & M8 Screen Resolutions
Designing plots for organised and consistent graphs
The graphs used for progression analysis of glaucoma had similar-looking plots, but different values and parameters. We dove deep into the plot points of each graph and created one single grid to accommodate all five graphs of Threshold Heatmap, Threshold dB, Total Deviation, Pattern Deviation and Baseline Significance.
Plots and graphs created for a comfortable report-viewing experience
Wireframes for key screens in the app
Designing the report-viewing experience for physical prints
For print, we worked on a way to display comprehensive and lengthy information in an efficient manner - by designing the pages for print such that multiple pages could be placed side by side to form a complete report that doctors can view and assess at a glance. Compared to the digital app, the version for B&W print had a restriction of greyscale, so we ensured that the shades of grey utilised were distinct from each other such that there was no confusion or compromise in readability. We took multiple prints of our iterations and assessed the readability and comprehension to arrive at the appropriate layout, font sizes and shades.
Report pages designed for print
Testing each iteration by printing it and assessing its readability
Prototyped snippet of the final screens
Learnings
-
Designing for quick navigation through multiple reports to allow for comparison and assessment
-
Understanding how to approach the problem of displaying extensive data such that doctors can easily and quickly comprehend the information
-
Prioritising the order of information on smaller screens without compromising on its accessibility