Tablet App

Noak Clinic Dashboard

Overview

During my time at Noak, I was responsible for designing the Left-side interface of the Patient Medical Record feature for the clinic dashboard app, enabling users to quickly access detailed medical records.


I collaborated closely with cross-functional teams (Engineering, CEO, and Design Lead) to ensure seamless integration and design approval, in preparation for a public release later this year.

Role

Product Designer

User researching

When

Sep 2024

Background

As the entry point to the patient's medical record details, the medical records section sits at the core of the patient dashboard—it’s the first thing users see when they open the patient card from the dashboard. Previously, the original design did not include the patient's medical records. However, as our features improved, we began encountering challenges, particularly around accessing patient medical records. During a demo with a clinic interested in connecting with ours app, a question came up: "How can staff members effectively view patient records?"

As the entry point to the patient's medical record details, the medical records section sits at the core of the patient dashboard—it’s the first thing users see when they open the patient card from the dashboard. Previously, the original design did not include the patient's medical records. However, as our features improved, we began encountering challenges, particularly around accessing patient medical records. During a demo with a clinic interested in connecting with ours app, a question came up: "How can staff members effectively view patient records?"

Kickoff

Approach

At the start of the project, we didn’t have a clear vision or specific goals for the patient medical record experience or an understanding of what doctors wanted to see. Lacking pre-existing insights, I began by reviewing documentation, studying national medication guidelines, and analyzing dashboards from popular platforms.


Our main challenge was determining the patient's medication and problem lists to display the related data on each card. The goal was to present the information clearly and simply, making it easier for doctors to read and access the necessary details. To tackle this, we started from scratch and designed a new left-side interface using a library of individual modules. This modular approach enabled us to work quickly, remain flexible, and experiment with reordering or hiding certain modules to refine the experience.

At the start of the project, we didn’t have a clear vision or specific goals for the patient medical record experience or an understanding of what doctors wanted to see. Lacking pre-existing insights, I began by reviewing documentation, studying national medication guidelines, and analyzing dashboards from popular platforms.


Our main challenge was determining the patient's medication and problem lists to display the related data on each card. The goal was to present the information clearly and simply, making it easier for doctors to read and access the necessary details. To tackle this, we started from scratch and designed a new left-side interface using a library of individual modules. This modular approach enabled us to work quickly, remain flexible, and experiment with reordering or hiding certain modules to refine the experience.

Researching the process

From the start, we designed with a module-based approach.

My first attempt

The "Weird Beginning" – Embracing First Drafts

Every great designer starts somewhere, and for me, it began with a design that was... let’s just say, unconventional.


While working on the interface, I focused on the two cards that are likely to have the most significant usability issues: the patient medication list and the patient problem list. The initial design was cluttered and hard to read, with overflowing text and no clear focus, making it difficult for users to quickly find key details like diagnosis names or dates. The poorly placed edit icon further added to the confusion. By addressing these challenges, I was able to create a more intuitive and user-friendly experience, with plans to refine the rest of the interface in future iterations.

The original design that i came up for the patient medication list and problem list

Internal feedback

I sent out a survey to our teammates and the CEO to gather feedback on what could be added or removed from our dashboard. The goal was to identify quick wins—simple improvements that can be implemented efficiently

Some of the feedback i got were


  • Everything feels like it’s on the same level. It’s hard to figure out what’s the most important part of the screen

  • Showing all the data upfront can overwhelm the doctors or staff.

  • Need to define whether we use the

Iterate, iterate, iterate

After gathering feedback and analyzing the issues, I focused on simplifying the design to create an MVP (Minimum Viable Product) version that prioritizes usability and clarity.

Improve the patient problem list

This redesign aimed to enhance the user experience of the Patient Problem List by organizing the information for better readability, accessibility, and overall usability.


Key improvements made:


  • Streamlined Display: Simplified long diagnosis names for easier reading and emphasized key details.

  • Enhanced Readability: Improved alignment and grouping for a cleaner layout and reduced clutter.

  • Clear Data Presentation: Added clear labels for creation and edit dates and used placeholders for dynamic fields.

  • User-Friendly Design: Removed extra icons and used a high-contrast background for better focus.

  • Better Scalability: Added a "View more" option for longer lists, making it easier to manage.

Improve the patient medication list

Key improvements include:


  • Better Information Organization: Separated start and end dates into distinct fields for easier identification.

  • Clearer Layout: Labeled optional fields to avoid confusion and highlight mandatory ones.

  • Enhanced Readability: Improved alignment, spacing, and grouping for a more intuitive interface.

  • Visual Focus: Used distinct styling to highlight key details like medication status and brand name.

  • Less Clutter: Removed repetitions and reorganized sections for a cleaner look.

  • Clean Interface: Eliminated extra edit icons to keep the design simple.

  • Improved Scalability: Introduced a "View more" option to manage long lists without overwhelming the user.

The MVP

To validate these findings, we redesigned the interface to create a cleaner and more intuitive experience that better aligns with the overall workflows of the clinic. The updates focus on simplifying key elements, improving usability, and ensuring the layout supports easy access to critical information. This design serves as an initial iteration, providing a foundation to gather feedback and observe how it performs in real-world use. Based on these insights, we plan to refine and enhance the design further to meet user needs effectively.

Thank You For Reading !!

Contact

Let's Connect

Behance

Email

Linkedin

Contact

Let's Connect

Behance

Email

Linkedin

Contact

Let's Connect

Behance

Email

Linkedin