#eye #eye



Doc-Aid:

UX Design


#UX Design #UX Research #Customer Experience

Objective:
Designing a patient management system that is accessible & user-friendly for individuals with varying data literacy.

Team Size: 2 Designer, 4 Developers, 1 Researcher 
My Role: User Experience Designer
Client: Reshita Technology Ltd
Duration:  5 Months (Nov, 2023 - Mar, 2024)



TL;DR?



Below is the entire project at a glance, if you wish to skip the research and see the final outcome just ︎︎︎ click here ︎︎︎


Context

What is Doc-Aid?

 
Doc- Aid is a Patient management solution for clinics in Tier II & Tier III cities in India.

They aim to provide efficient, affordable, and elegant solutions to local businesses.

Key Findings

Market Research & User Research


The below findings are from surveys & interviews of 46 doctors in Bihar’s Tier 2 & 3 cities
1. Low doctor per capita
There is 1 doctor for 834 people in India but in Bihar, it drops to 1 doctor per 22,000 people

2. New government initiatives 
Ayushman Bharat’s Digital scheme is focusing on a unified health infrastructure

3. Hard to file taxes
Since most of the bookkeeping is done by pen and paper, most of the time, records are misplaced


85%

of the doctors have 2 or more clinics that they rotate among.

89%

of the doctors either use a notebook for patient registry or keep no registry at all

95%

of the doctors have just one compounder for their multiple clinics

Project Goal & Scope



To create a

user-friendly patient management system,


focusing on efficient access to patient information, while the scope includes designing

intuitive navigation through the interface




Information Architecture


To better understand the user flow, and to make sure that management, developers and designers are on the same page regarding the user flow and the user tasks on each page an information architecture was formulated through multiple rounds of discussions.




Challenge 1: Inclusivity

Approach

In the User Research surveys, it was found that 34% of the participants were left-handed. To enhance the user experience, I set the goal of designing a system that was not only responsive but also accessible.
 
The concept I introduced was ‘Grouping Primary CTAs in the freequently interactable area’, (1/3rd area towards the left and right). This enables users to change the layout of the application with respect to their dominant side

This tiny feature may not have had a significant impact on the time on task for an individual task. But when the user was asked to perform a series of tasks (like booking multiple appointments and cancelling some, and cross checking the doctor's availability) it was noticed that an aveage left handed user with the 'left handed layout' performed 25% faster than left handed users with the 'right handed layout'.

Left-handed Users
Right-handed Users


Challenge 2: Intuitiveness

Approach


The primary user is a compounder ( Compounders are the other term for pharmacists who assist doctors ) and 48% of the compounders we interviewed in Tier 2 and Tier 3 cities in Bihar weren’t tech savvy and didn’t have formal education, hence while designing this management system, I noticed another challenge: How to create familiarity, intuitiveness and a touch of self-learning while navigating this system?

To address this constraint, these are the considerations in my design,

1. Color coded elements:

I consolidated the information presentation and color coded the various segments, and in opposite to the general rule of having buttons & CTAs consistent throughout a design, I assigned colors to buttons & CTAs for a particular section and they remained in those colors irrespective of where they were on the screen.



2. Clear Hierarchy of content :

I followed a 4-point grid system for a more consistent interface design, apart from spacing and padding of elements, I also figured out the various breaking points from desktop to tablet to mobile and made the necessary adjustments so that the user has a uniform experience throughout irrespective of the device that they may be using.

3. Hover states for data on graphs

The system has graphs, charts, calendars and tables for the compounder to manage patients, to not overload the user with additional data, rather than displaying it on the graphs themselves, the user can hover over it if and when they require such finer data.
4. Tooltips:

Each page in the patient management system has tooltips to help the end user understand the interface by themselves. The tool tips can be accessed from the ‘Help’ section on the menu bar on any page.

Final Design

Some of the UI screens for Doc-Aid





System Design

System Thinking for Scale, Streamline the Design & Development Process

When I joined this project, there were no existing design files. I initially hesitated about investing time in constructing a design system, as it could extend the project timeline. However, I couldn’t ignore the importance of the design system, such as development efficiency, UI consistency & future scalability.

Asking whether the design system or the actual design comes first is similar to asking what came first the chicken or the egg, so generally what I do is that I set style tokens and variables for texts and some colors in Figma along with the basic buttons and then I keep building components as an when necessary. 

Below is a quick view of how I set up variables and tokens in Figma and prepared my design file




Below are my contributions to Doc-Aid’s Design System