Person on Call Redesign

Upgrading the function and aesthetic of a hospital on-call system

The Challenge

Person on Call, a hospital communications software company, was looking to modernize the look and feel of their overall product, enhance findability, and improve site organization.

Their system launched in 2008 has not been visually updated since, costing them customers.
They sought to improve their on-call list so that hospital staff can efficiently find the needed healthcare professional on call at a certain time.
The client also wanted to better organize the site and the site's content on each screen.

Project Type & Timeline

A group project completed for User Experience Design at UVA during the Spring 2024 semester.
Project was completed in about 4 weeks.
Team: 3 UED Students with the input from the professor and from our industry client.

Project Details

We designed screens to showcase our proposal for the updated layout and style, along with new enhancing features.
I led the creation and organization of our interactive visual prototypes in Figma.

The Solution

A newly designed call list and scheduler, with updated features and functionality to improve user experience, update the aesthetic, and streamline navigation.

An informative call list with searching and filtering functionalities, along with a clear hierarchical structure.

A dynamic scheduler allowing users to assign doctors while verifying their work with the useful editing tool.

Our Process

Examining the Current Interface

We began extracting requirements for our design by examining the current features and organization of the system so that the underlying functionality would be preserved while we pinpointed areas of improvement.

The current interface has an outdated look and feel, with a disorganized layout, unappealing colors, and a confusing placement of features and navigation.

This call list screen specifically, used by hospital staff to call in medical professionals in high pressure environments, should be easier to scan and search through for the sake of efficiency and essential levels of usability.

The scheduler screen used by hospital staff to assign medical professionals to their shifts lacks understandability of the available functions and should provide better feedback.

The mobile version of the call list is crowded and poorly formatted. Fixes to the desktop interface will translate to the phone screen layout to streamline any handheld interactions.

User Archetypes and Insights

To understand the user perspective of this system, we spoke with similar medical personnel, and based on the functionality of the current product, we categorized users into three main archetypes, highlighting their touchpoints with the system, their specific needs, and their potential pain points.

The Caller uses the call list to call in medical professionals based on the hospital's need, depending on the time, specialty, and personnel needed. These people can be nurses, assistants, or administrative professionals depending on the structure of each hospital. The process of finding and calling the right doctor is time-sensitive, and the current interface is difficult to navigate due to the layout and organization of content.

The Scheduler uses the scheduling features to create a monthly call-in schedule for the medical professionals based on their availability and the hospital's need. These people can again be some form of an administrative assistant depending on the structure of each hospital. This data entry process can be tedious, and the high risk of errors can place an imbalanced burden on doctors and can cause crises as the month progresses.

The Doctor sees a view-only version of the product, usually on mobile, to access their personal on-call schedule and request changes. These people can range from surgeons, physicians, and other healthcare professionals. Their information is not easy to interpret with a glance, and when on the go, they require a cleaner, more modern layout to better understand and interact with the content.

First Iterations

We began our design process by sketching out our initial ideas.

Sketches of Main Features with Improved Layouts

I started the ideation process by sketching out the current interface's main features and functionality, changing only a few things to achieve an overall understanding of the platform. I also emphasized the need for better searching, sorting, and filtering options to streamline the calling-in process.

This sketch again focuses on the current features of the scheduling functionality, with a few improved layout and organization changes to make the process more intuitive.

After obtaining a better understanding of the function of the call list, I sketched out a more distinct version of the page to suggest a way to incorporate stronger filtering options while maintaining the visual hierarchy of the content. This style also reflects a more common way to display and use filtering, sorting, and searching options when doing so with a list of content.

Based on our desktop ideas, I came up with a couple of quick sketches to showcase what the interface might look like on mobile.

Higher Fidelity Mockups of Main Ideas

Our most novel idea involved the restructuring of the on-call page, and so I created a higher-fidelity version to better showcase what the new interface could look like. In this iteration, the hierarchy of the categories showed in the filtering options is reflected within tags displayed on each card, where each card represented a medical professional and all of their related information. This style adopted a more modern format that also improved the understandability and feedback of the page.

We also came up with an idea for the scheduling page to have an editor tool, checking scheduler's work and suggesting improvements, and a medium fidelity mockup showcases that suggestion above.

Design Review

Following the creation of our draft designs, we presented the current state of our work to our class and to the client to obtain feedback.

Class Feedback

Our peers liked the cleaner look of the system but encouraged us to experiment with more variety to establish a more interesting color scheme.
Our professor pointed out that the filtering sidebar could be obstructive and take too much time to interpret the hierarchy of options, leaving us with the same problem as before.

Client Feedback

The client was receptive to both our feature and aesthetic ideas and particularly emphasized the usefulness of the editor tool.

Final Designs

With our received feedback, we refined our designs so that they accounted for user and client needs.

Call List

Based on our received feedback, we incorporated a slightly modified visual style and implemented a different filtering system, along with adding on a couple more feature ideas.

Filtering: Uses dropdowns rather than a sidebar with checkboxes to better utilize the space.
Hierarchy: Preserved as headers rather than as tags
on the cards to reduce the complexity of the cards.
Cards: Showcases the names and numbers of medical professionals, along with new indicators regarding that person's status, providing the user with additional information to aid in their decision-making process.

Our new design implements additional features and improvements to make the calling-in process more intuitive and understandable.

Filtering: Chosen filters remain on the dropdown as tags to ensure the user knows which subset of content they are currently viewing.
Notes: Both personnel and departments can add notes, which become expandable when longer than a line.
Buttons: Callers can log calls as they make them to track the status of the doctors as they are called in, changing their status on the card.

Above video shows the filtering interaction and how choosing options in the higher level, Groups, affects what is available in the lower level, Departments.

Above video shows the interactions a user can have with the notes feature and the 'Log Call' button.

Scheduling

For the scheduling page, we designed a new layout to improve the workflow as a scheduler would go step-by-step to create the upcoming month's schedule.

Searching: Users can search for available medical professionals by name or department.
Assigning: Once a doctor is selected, the days they are available will be highlighted. They can be assigned to all of the days they are available using the button on the side, or they can be assigned to specific dates by clicking on individual calendar days.

Our new design implements an editing tool that provides the user with feedback on the schedule they have created to reduce errors and improve workload balancing.

Corrections: The editing tool highlights any significant issues that must be addressed before the schedule is complete, such as assignments on the wrong day or an incomplete work shift.
Refinements: The tool also provides suggestions for improving the schedule based on the distribution of shifts between all available professionals..

Mobile

We also translated our main designs into a mobile format, an example of which you can find on the left. The format and hierarchy of the call list remains the same, and the navigation is found on the hamburger menu on the top left side of the screen.

Reflection

Our group was chosen by the client as a top 3 performing group out of our class based on our ideas and execution!
If I could go back to change anything, I would make the content on the call list landing page higher up and more visible on the screen.
The client especially appreciated the editor tool for evaluating the schedules.

Person on Call Redesign

Upgrading the function and aesthetic of a hospital on-call system

The Challenge

Person on Call, a hospital communications software company, was looking to modernize the look and feel of their overall product, enhance findability, and improve site organization.

Their system launched in 2008 has not been visually updated since, costing them customers.

They sought to improve their on-call list so that hospital staff can efficiently find the needed healthcare professional on call at a certain time.

The client also wanted to better organize the site and the site's content on each screen.

Project Type & Timeline

A group project completed for User Experience Design at UVA during the Spring 2024 semester.

Project was completed in about 4 weeks.

Team: 3 UED Students with the input from the professor and from our industry client.

Project Details

We designed screens to showcase our proposal for the updated layout and style, along with new enhancing features.

I led the creation and organization of our interactive visual prototypes in Figma.

The Solution

A newly designed call list and scheduler, with updated features and functionality to improve user experience, update the aesthetic, and streamline navigation.

An informative call list with searching and filtering functionalities, along with a clear hierarchical structure.

A dynamic scheduler allowing users to assign doctors while verifying their work with the useful editing tool.

Our Process

Examining the Current Interface

The scheduler screen used by hospital staff to assign medical professionals to their shifts lacks understandability of the available functions and should provide better feedback.

The mobile version of the call list is crowded and poorly formatted. Fixes to the desktop interface will translate to the phone screen layout to streamline any handheld interactions.

User Archetypes and Insights

First Iterations

We began our design process by sketching out our initial ideas.

Sketches of Main Features with Improved Layouts

This sketch again focuses on the current features of the scheduling functionality, with a few improved layout and organization changes to make the process more intuitive.

Based on our desktop ideas, I came up with a couple of quick sketches to showcase what the interface might look like on mobile.

Higher Fidelity Mockups of Main Ideas

We also came up with an idea for the scheduling page to have an editor tool, checking scheduler's work and suggesting improvements, and a medium fidelity mockup showcases that suggestion above.

Design Review

Following the creation of our draft designs, we presented the current state of our work to our class and to the client to obtain feedback.

Class Feedback

Our peers liked the cleaner look of the system but encouraged us to experiment with more variety to establish a more interesting color scheme.

Our professor pointed out that the filtering sidebar could be obstructive and take too much time to interpret the hierarchy of options, leaving us with the same problem as before.

Client Feedback

The client was receptive to both our feature and aesthetic ideas and particularly emphasized the usefulness of the editor tool.

Final Designs

With our received feedback, we refined our designs so that they accounted for user and client needs.

Call List

Based on our received feedback, we incorporated a slightly modified visual style and implemented a different filtering system, along with adding on a couple more feature ideas.

Filtering: Uses dropdowns rather than a sidebar with checkboxes to better utilize the space.

Hierarchy: Preserved as headers rather than as tags on the cards to reduce the complexity of the cards.

Cards: Showcases the names and numbers of medical professionals, along with new indicators regarding that person's status, providing the user with additional information to aid in their decision-making process.

Our new design implements additional features and improvements to make the calling-in process more intuitive and understandable.

Filtering: Chosen filters remain on the dropdown as tags to ensure the user knows which subset of content they are currently viewing.

Notes: Both personnel and departments can add notes, which become expandable when longer than a line.

Buttons: Callers can log calls as they make them to track the status of the doctors as they are called in, changing their status on the card.

Above video shows the filtering interaction and how choosing options in the higher level, Groups, affects what is available in the lower level, Departments.

Above video shows the interactions a user can have with the notes feature and the 'Log Call' button.

Scheduling

For the scheduling page, we designed a new layout to improve the workflow as a scheduler would go step-by-step to create the upcoming month's schedule.

Searching: Users can search for available medical professionals by name or department.

Assigning: Once a doctor is selected, the days they are available will be highlighted. They can be assigned to all of the days they are available using the button on the side, or they can be assigned to specific dates by clicking on individual calendar days.

Our new design implements an editing tool that provides the user with feedback on the schedule they have created to reduce errors and improve workload balancing.

Corrections: The editing tool highlights any significant issues that must be addressed before the schedule is complete, such as assignments on the wrong day or an incomplete work shift.

Refinements: The tool also provides suggestions for improving the schedule based on the distribution of shifts between all available professionals..

Mobile

We also translated our main designs into a mobile format, an example of which you can find on the left. The format and hierarchy of the call list remains the same, and the navigation is found on the hamburger menu on the top left side of the screen.

Reflection

Our group was chosen by the client as a top 3 performing group out of our class based on our ideas and execution!

If I could go back to change anything, I would make the content on the call list landing page higher up and more visible on the screen.

The client especially appreciated the editor tool for evaluating the schedules.

Hierarchy: Preserved as headers rather than as tags
on the cards to reduce the complexity of the cards.