Overview

Led the end-to-end UX for a tablet-based platform that replaced paper workflows for elderly clinicians treating diabetic wounds. Designed a non-linear, accessible UI that reduced treatment time from 1.5 hours to under 15 minutes, with user research, testing, and stakeholder alignment driving design decisions.

Problems

The Goal

Wireframes used to initial understanding of Clinician-Patient encounter.

Clinicians concerns—research observations

• Accuracy

They are concerned about getting the assessment and treatment done correctly.

• Goal oriented

They are okay with compromises on ‘design’ as long as their job is done.

• Non-linear workflow

The steps in assessement and treatment procedures vary based on case to case basis

• Time conscious

They want to save time and cover more patients in a day.

• Not tech savvy

Shortcomings of elder Clinicians working on digital interfaces needed extra care

Research insight

The clinicians were highly skilled, many—especially those around 55 yrs and older—feared that unfamiliar technology could disrupt their efficiency and undermine their expertise.

The MVP

Opportunity 1 - Assessment & treatment flow

Addressing opportunity 1 with navigation

Assessment workflow is the most important workflow in the application. The documentation of the wound for a patient happens here and the success of the platform depends on how fast a Clinician can cover the documentation and treatment.






Floating action button for linear workflow

Tab for non-linear workflow

The primary job for me as designer was to present the information that Clinicians might need frictionlessly, hide the information that's not needed and devise a way for faster interactions to capture wound info. As Clinicians are free to go any path to document and treat the wound or follow a linear path to completion, I had to curate a workflow that tailors to both their requirements efficiently.

Opportunity 2 - The digital transformation

Addressing opportunity 2 with accessibility

When designing for the elderly, every interaction had the potential to make or break the solution. This shaped the design decisions and the design system.

Checboxes with outline

Clinicians would read the options and return to the checkbox to select the option (right). I recommended checkboxes with outlines (left) for faster selection.

Radio buttons with outline

Similar approach with outline was taken for radio buttons with the outlines. The shape was made rounder without any icon for easier and faster differentiation from a checkbox.

Large buttons

The buttons were made larger so that Clinicians can tap on the button during treatment procedure without difficulty.

Interactive components with similar colour

Consistent colour usage across interactive elements enhances recognition and supports faster recall for efficient task completion so button, checkboxes and radio buttons were made from same colour family.

I emphasised on making the controls evident to be noticed and positioning them where Clinicians expect them to be. The size of the CTAs are large and shown with the contextual vocabulary which were expected.

 CTAs were designed in the same colour family to make clear association with interactions.

The use of colours on text whether on buttons or on page were given extra care to meet contrast ratios standards for accessibility (WCAG AA) and (WCAG AAA)

Colour contrast between text, background and accent colours

The colour contrast had to pass AAA accessibility guidelines therefore the contrast between text, background and accent colour were carefully picked.

Larger font size

Larger font size were picked for faster reading and type scaling factor a higher number.

Using text familiar to the Clinicians in succinct sentences. Keeping large font-size heading that could bind the contents below and maintaining space between sections to signify the start and the end. Choosing larger font-sizes for increased legibility for the user demographics.

Using these techniques, I achieved clean and focus enabling user-interfaces.

Usability testing

Testing 1

Learnings:
• Mirroring physical behaviour digitally didn’t work
• Where a clinician is navigating to is unclear
• Flipping through pages wastes time

Testing 2

Learnings:
• Animating pages up and down led to disorientation
• Clinicians struggled to know which form they were at

Testing 3

Learnings:
• Visibility to access to other forms worked
• Interaction with interactive components 
could be faster

Testing 4

4th testing met the criteria of treatment documentation completion in under 15 mins.

Learnings:
• Visibility to access to other forms worked
• Interaction with interactive components 
could be faster

Speeding up other flows

• 4x faster wound identification
• Sped up overall documentaion process
• Increased more focused treatment

A dashboard where clinicians can track the progress of the patients and their wounds.

We had successfully made a minimum viable product that was ready for the market. Through consistent design evangelism and design delivery, I was able to get both stakeholders and client onboard for having a design-led approach to the project.

You can read more about the design approach on a Medium blog post here.

Outcomes

Next steps (if I cont'd)