Sheng Juen

About

Work

2022

Doctors’ Dashboard

Web desktop, full research-to-design project

Project overview

About

The Doctors’ Dashboard is an internal portal for doctors to consult patients online, document medical findings, prescribe medications, and all things needed to deliver online consultations effectively.

Timeline

4 months

My roles

  • User research execution and reporting

  • Information architecture and user flows

  • UI design iteration

  • Interaction design

Telemedicine in Singapore

Telemedicine in Singapore has come a long way since 2017, the beginnings of what many of us are now familiar with—consulting a doctor remotely via video conferencing in the comfort of our homes.

The COVID-19 pandemic rapidly accelerated its growth, acceptance and ubiquity, becoming not only popular but a necessity to meet the needs of thousands of patients unable to visit physical clinics.

Today, a single WhiteCoat doctor could see more than 10 patients every hour.

The problem

Behind the seemingly simple interface from which a patient primarily sees their consulting doctor is the complex, information-heavy interface doctors use to conduct tele-consultations – called an electronic medical record (EMR).

Doctors are constantly referring to supplementary medical information, taking notes, forming a diagnosis, prescribing medications, and so on.

The massive increase in patient volume has equally increased cognitive load on doctors to multitask repeatedly from patient to patient while providing the same level of care to patients as they would expect face-to-face.

Project objective

My team set out to identify and improve the key usability issues through primary user research with our internal team of doctors.

At this juncture, we already had a general sentiment from the doctors that the dashboard needed improvement but not the specifics. With this, we dove into primary user research to uncover the specific pain points.

Ultimately, the goal was to improve satisfaction amongst the doctors.

Primary user research & information gathering

To create a strong foundation to tackling this project, we needed to understand all the context behind the dashboard creation. This includes things like reasons behind design decisions, technical constraints, past stakeholder inputs, edge cases, and so on.

We took a parallel approach with the following steps:

  1. Contextual inquiry and user interviews with primary users

  2. Legacy information gathering with the product and development team

  3. Competitive and comparative analysis of other products in the market

And once we had sufficient information, we analysed the patterns and findings in order to prioritise the issues and emergent themes.

Scroll below for details.

  • 1

    Contextual inquiry & user interviews

    As our users are internal doctors and long-time users of the platform, we wanted to lessen the bias of verbal opinion from our users and simulate a real scenario as closely as possible.

    We added a mock tele-consultation segment in which a colleague acted as a patient. The doctors’ executed their workflows while narrating their actions. This helped us formulate follow-up questions and understand their actions deeper.

    In total, we did this with 16 users.

  • 2

    Legacy information gathering

    This was important to understand why each feature is built the way they are and the development constraints, and to capture as many use cases as possible—due to lean pre-existing documentation.

    Over the course of a couple weeks, we did knowledge transfer from the previous product owners and thorough testing of the current system to build out the user flows.


  • 3

    Competitive and comparative analysis

    While our platform is internal, this type of system is generally used by all medical institutions, so it made sense to understand how successful platforms are designed. At the same time, finding the intersection of similar comparative platforms helped inspire more effective designs.

    For comparative systems, we looked to digital experiences that involve a lot of information and moving parts, such as email systems, productivity tools, and even gaming platforms.


  • 4

    Analysing the patterns and findings

    We took the input of our users and performed affinity mapping to build a map of the issues they faced. Then, we arranged these issues according to the key user flows.

    We collaborated with our product and development team to add more context to the issues – consisting of development constraints and solutions. The outcome of this entire exercise was a priority report of issues and their impacts, and importantly, a basis to begin ideation and design of the new interface.

Ideation, iterative design, and usability testing

There were 3 key processes involved with delivering the solution:

  1. Visual and interactive design with rounds of minor and major iterations

  2. Usability testing and analysis with primary users

  3. Collaboration with the development team and business stakeholders

And once the final solution was approved by all stakeholders, the final step before handoff for development was:
Full documentation of all user flows and screens.


Scroll below for details.

  • 1

    Visual & interactive design

    With a clearer picture of the key issues faced by users and comparative dashboard design ideas from our moodboard, we began with a sketching exercise – which was eventually made into a simple prototype for our first round of usability testing.

    Through usability testing (more about that on the next slide), it helped define improvements for the next design iteration.

    It was important to keep our design focused on the big ideas of clearer information organisation, better searchability, and smoother multitasking – while also paying attention to smaller details that enable doctors to do their jobs effectively.

    Interactive design also played a vital role in solving for some issues around the heavy presence of information.

  • 2

    Usability testing and analysis

    Usability testing was conducted for 2 major design iterations, and for a total of 18 times.

    These helped us pick apart the initial designs and build upon the general user consensus.

    They were conducted in a more open-ended style this time as opposed to the initial contextual inquiry. We wanted the doctors to really explore the new design and observe what elements drew their attention, and accompanying critique.

    This also helped catch details that we missed in the design.

  • 3

    Collaboration with the development team and business stakeholders

    Input from our development team was a critical part of ideation and solutioning—where we collaborated to ensure the new design was feasible from a technical standpoint.

    Discussions took place by running through the design mockups on Figma, with key questions and high-priority features marked out for review.

    During the design process, we also sought input from our business stakeholders to ensure the final product was aligned to the greater product vision. This helped to ensure the design foundation was dynamic enough to grow with time toward the future.

  • 4

    Full documentation of all user flows and screens

    This involved building a component library—which ultimately resulted in almost 500 design components for the 50 major feature sections and their respective user scenarios (varies with each feature section).

    Building a component library from the start enabled faster design changes to be made and prototype flexibility for usability testing.



3 key design themes

Theme 1

Matching information hierarchy to a doctor's workflow and mental model

  1. Doctors tended to work left to right across the screen through each consultation

    A consultation flow went in order of: (1A) Checking the patient's particulars, (1B) Verifying against a physical ID on video, (1C) Assessing the patient's medical history, and (1D) Diagnosing and recording consultation notes. The arrangement of 4 columns received positive sentiment for balancing workflow, screen space, and information groups.

    Placing the video window at 1B was comfortable for two main reasons:

    1. It was close to the webcam to mimic eye-contact from the patient's point of view.

    2. Doctors could easily switch between examining the patient and taking notes.

  1. Columns are independently scrollable for cross referencing of information

    Columns 1C (Patient's medical history) and 1D (Consultation notes) are independently scrollable. This was crucial for doctors to reference important persistent information such as drug allergies and current medications—while taking consultation notes, prescribing medications, and writing care instructions.

    Based on internal usage data and qualitative findings, medical information were grouped and arranged from most important and frequently used to least frequently used.

Theme 2

Quick multitasking between consulting and note-taking

  1. Slide-up tab was effective at aiding doctors multitask between referencing information and taking notes

    Overtime, a patient's medical file accumulates a lot of information—which doctors frequently refer to during a consultation.

    To cope with this ever-growing amount of data, usability testing found this slide-up tab design on the left of the screen the most effective at aiding doctors multitask between referencing extra information whilst still taking notes and prescribing care.

  1. Including a secondary navigation at the top allowed users to quickly move across sections within the column

    The fourth column is where a doctor takes down consultation notes, writes instructions to patients, constructs the patient's diagnosis, prescribe medication, writing an MC, and essentially every action item related to the current consultation. Sometimes in this sequence and other times not, and also habits varying between doctors.

    The design in this column needed a balance between:

    1. Sufficient visual breathing space between groups of information, and

    2. Moving through the section without scrolling fatigue

Theme 3

Although screen real estate is limited, users should be able to pick up on the different available features intuitively

  1. Relevant labelling and descriptions of features

    While there is standard terminology for common medical information such as 'Diagnosis' and 'Presenting complaints' that do no require explanation for doctors, there are certain categories of information that have a generic and vague definition. For example, 'Patient notes', 'Patient summary', and 'Management notes' were interpreted and used differently during contextual inquiry.

    Doctors also have many experiences other digital medical systems that inconsistently use such terms. For more ambiguous titles, adding straightforward and concise help text allows doctors to quickly recall their purpose and keep usage across doctors consistent. This is very beneficial for clean and transferrable data.

  1. Including a secondary navigation at the top allowed users to quickly move across sections within the column

    As described earlier, there are many actions a doctors needs to perform whilst consulting with a patient. When doing so online, doctors have the added complexity of delivering a smooth tele-consultation but multitasking behind the screen.

    With such a heavy cognitive load, it was important to place information and action items within their appropriate context, where through usability testing, users demonstrated how they connected different groups of tasks.