TB Treatments
Extending EDR Web to the point of care without replacing it
Client
Health- The TB ThinkTank- Gates Foundation
Key deliverables
UX Audit Findings & Report | Basic Design System | UI Mockups
Timeline
1 month
Team
The team was small and consisted of myself leading the design and a full stack dev building the platform with the support of a clinical advisor for compliance.
The Challenge
TB care relies on several separate calculations: ICD-10 coding, pediatric diagnostic scoring, eGFR, Z-scores, BMI, MUAC and QTcF. Each answers a different clinical question (diagnosis, nutrition, kidney function, cardiac safety on drugs like bedaquiline and fluoroquinolones), and clinicians often use separate calculators for each. The design question was how to bring them into one tool that is quick to use, shows the right inputs at the right time, and gives interpretations that are clear without hiding the underlying numbers. This platform was created and functional but not intuitive or user friendly and I was asked to audit and redesign the platform
My Role
-
Audited the existing calculator against usability principles and clinical context
-
Built the subject knowledge needed to evaluate it (what each metric means, who it applies to, what decision it informs)
-
Identified and prioritised usability problems
-
Redesigned the structure, flow and presentation of the tool
-
Prototyped the redesigned experience
The Approach
I treated this as an audit before a redesign. The calculator already worked, so the question was whether clinicians could use it quickly and correctly. I evaluated the TB THINKTANK treatment calculator against three lenses: Nielsen’s 10 Usability Heuristics, WCAG 2.1 accessibility guidelines and general UX best practice. Using recognised frameworks kept the findings objective and gave the team a shared language, rather than a list of personal preferences.
Three principles guided the redesign:
-
Protect what works. The clean layout, clear headers, white space and consistent buttons stayed.
-
Reduce load on clinicians. Fewer colours, shorter lists, a quieter background and clearer hierarchy.
-
Prevent errors at the point of entry. Input constraints, inline validation and contextual help.
The Process
Figure 2 | Redesigned UI mockups | Figma
Figure 1 | Original UI for assessment with some notes | Figma
Outcomes & Impact
The audit gave the team a clear, prioritised set of usability and accessibility findings, each tied to a recognised principle, plus a redesigned prototype showing how the calculator could look and behave. This made problems visible and gave the developers specific changes to plan around, such as grouped resistance options, a reduced colour palette, standardised labels and spacing, and input validation. Serious barriers like contrast failures and lost progress when switching calculators were flagged as first priorities. For clinicians, the intended impact is a tool that is faster to scan, harder to misuse and more accessible. These benefits are intended, not yet measured.
Limitations & Learnings
-
Learnings: A tool can be technically correct and still fail its users, and in clinical software small friction can become errors under time pressure. Established frameworks made findings easier to defend and prioritise. Clinicians should shape decisions like how to group resistance options, so I would involve them earlier next time.
-
Limitations: Due to time, the redesign was not tested with clinicians before redesign, so there was no codes