I redesigned the dashboard for patient's medical record so that doctors can comprehend the information faster.

Overview


Problem

This was a practical design challenge on a real product of a medical tech company. Its clinical platform aims to save both the doctor and patient time by digitizing patient's medical records. Yet based on the feedback from doctors and nurses, the current dashboard did not give them a leverage in finding and analyzing patient's information better.

Current portal design, very thorough, but not effective for reading

Design Goal

Redesign the dashboard so that a doctor can comprehend a patient’s record under a minute.


My Responsibilities

• Understand the project scope and user feedback.
• Iterate IA and UI and develop sufficient wireframes for stakeholders to review.
• Revisit design goal and brand identity to improve the product.
•     •     •
Understanding the Problem


Project Scope

The patient portal was part of a larger corporate-wide project, it will cooperate with certain constraints to ensure it goes well with the company's other products. Nonetheless, it was indeed a starting point of the online platforms' structural change.


Initial Design Analysis

The patient portal is not speeding up the clinical process.
Why?
In the beginning of the project, I identified three possibilities.

1. Screen crammed with text

The previous platform was text based and very text heavy. In addition, a narrower page width made this problem a bit worse.​​​​​​​​​​​​​​


2. Too many sections

Though the platform wished to provide as much information as possible, it slowed down the process of efficiently finding precise info. There was even repetitive information showing at the same time.


3. Visual hierarchy not apparent enough

The contrast between sections, titles and paragraphs was not strong enough to distinguish quickly.
After interviewing with several users, all three hypotheses above were verified. We had this proposal based on the findings:
Users don't have to read the data, they should see it.
And that's where the design started.​​​​​​​
•     •     •
Research


Competitive Analysis

Before jumping into brainstorm, I always do a competitive analysis first. What competitors are doing but the platform is missing?
I did a desktop research on some best-known clinical software in the market and took a closer look at their interface and structural design. Below are some key features I summarized that were widely adopted in clinical software.

After comparing with the previous platform, I found the platform was only showing 50% of these features.
​​​​​​​

Contextual Inquiry

To have doctors find information faster, I also had to understand their priorities when they go through a patient's document. I managed to talk with three physicians working in ENT and Cardiology departments and did contextual inquiries with them separately. I asked them to walk me through how they check a patient’s medical record, what items they would go to first, and how they would rank the priorities of each category in a patient’s medical record. By knowing this I can design a layout with categories put in this same order and enhance the efficiency.
I summarized a common pattern on doctor's sequence to read a patient's record.

The findings from competitive analysis and contextual inquiries gave me an overview of how I should alter the current platform.


Identifying the Approach

Through visual and structural design, prioritizing key information on the platform and reducing the time for user to comprehend the information.
•     •     •
Design


Information Architecture Change

The priorities were hidden in the secondary layer. I first altered the information architecture by pushing the priority items forward then simplified the overall structure.​​​​​​​


Visual Cleanup


Developing Details

Visualizing the Lab Results

I tried multiple visualization on the lab results using different graphs (bar, line, etc.) and decided line graph gave the clearest overall impression without causing too much distraction.


Introducing Hierarchy

The difference between title's and text's font size was increased to boost the visual hierarchy, in order to help the user find certain information faster.


Collapsible Modules

User can collapse and expand modules to create custom view according to their needs.

•     •     •
Testing

Before finalizing the design I wanted to know whether what I had come up with would fulfill the design goals. I reunited with the previous stakeholders and ran a quick testing session online.
Quantitative metrics I collected included:
1. The time the doctors used to locate sections on the platform.
2. The time from loading up the platform to when they say they learnt about enough information to begin a patient's appointment.
The doctors used the previous and redesigned platforms and I recorded the time separately before comparing the results. Overall the redesign received positive feedback that it improved the usability of the platform and resonated well with the company's other products. 
•     •     •
Refining the Design

After confirmed with the stakeholders, I went completing the design and also added a few features.


Branding Colors

I saturated the design with the company's branding colors so product can speak for the company. Also I used the same color to group sections that have strong relevance.


Ability to Download

User now can download and save the document of the ongoing or finished appointment at any time for future reference.


Responsive Design
•     •     •
Retrospective


Design Goal Matters

I cannot speak more of the importance to clarify the design goal with the team before starting anything. This helped avoid unnecessary mistakes in the latter part of the design. Also, revisit this goal during the design process to ensure you are still on the right path.


Don't Be Afraid to Ask Questions 

It's never too early to ask opinions from stakeholders. Discussions with the people is another opportunity to check if you are drifting away from the design goal.


Always Pay Attention to Details

Sometimes the decisive factor for an effective design lies in the details. For example, although the filter and guideline features seem like a small part of the line graph, they make a huge difference in improving the usability.
Back to Top