insitesystem-image

Using UX/UI to Increase Patient's Safety

The InSite System 2.4 software redesign (2018)

Talyst provides innovative medication management software to help caregivers better serve their patients.

Why redesign?

The InSite System 2.4 software interface had not been updated in years while the company’s branding had recently been refreshed. The rationale for the project included:

  • Incorporate Talyst’s new branding
  • Focus on implementing accessibility

My role

I worked with marketing, the product manager, senior technical writer and senior developer. I focused on:

  • User research
  • UI style guide
  • High-fidelity wireframes
  • Design mock-ups

I specifically owned the notification indicator feature.

Problems that needed to be solved

  • Each dashboard had poor navigation
  • Outdated notification indicator for the medications that needed
  • to be dispensed daily
  • User accessibility

Platform

Desktop + touchscreen

User research

With a very limited budget, I wanted to understand the history of the existing software. I conducted my research by reading numerous manuals and online documentation the technical writer provided. Armed with that information, it forced me to drive the redesign of the software’s navigation in a new direction.

New direction

The previous software system had a header with a red exclamation mark notifying the user that those particular medications needed to be dispensed that day. Unfortunately, most users, as well as myself, see a red exclamation point as a warning and/or an alert that the user has done something wrong. Because of this, I suggested a notification indicator for the medications that needed to be dispensed that day. Drawing my inspiration from phone notifications, I designed the interface so that a number would appear in the upper right corner of the button to indicate which medications needed to be dispensed. This concept was well received by internal stakeholders and was implemented in the main navigation of the updated software.

UI style guide

Using the company’s new branding I created the UI style guide for the InSite System 2.4 software redesign.

insite_system-2_4-ui_style_guide

Wireframes

In addition to representing the notification indicator in the wireframes, I created more wireframes to visualize the new navigation, keyboard location and video accessibility. These are highlighted in the images below.

Home dashboard – Notification indicator

main-dispense-nav_one

1. Main dispense navigation – notification indicator

  • When the user is on the main dispense navigation dashboard, they will know how many dispenses they need to make that day from a pop-up number which will appear in the upper right-hand corner.

Home dashboard – Navigation

main-dispense-nav_two

2. Software navigation

  • Simple and clean static buttons are used throughout the program.
  • The button color lightens when the button is tapped/clicked.

Home dashboard – Secondary navigation

main-dispense-nav_three

3. Secondary navigation

  • The button color darkens to let the user know they are on that button page.

Dispense PRN Dashboard – Keyboard location

keyboard-location_four

4. Keyboard location

  • I moved the keyboard to bottom of the page for better user accessibility.

How Do I dashboard

how-do-i

How Do I – Video dashboard

video-enlarged_five

5. Video enlarged for better visual ability

  • An enlarged video screen gives the user the advantage of watching the video in a larger format.
  • The user has the option to click on the video players pop-out feature to fill the screen 100 percent, which mimics other video playback formats such as YouTube, Vevo, etc.
  • Brought in additional educational video buttons from a previous page to allow users to stay on the page and select another video rather than having to navigate back and forth between pages.

More Options dashboard

more-options

Re-Dispense dashboard

re-dispense

Design mock-ups

I needed to consider user accessibility like color blindness as well as a color combinations for each dispense option. Each dispense option had to be represented differently and remain consistent throughout the software program. I collaborated with the marketing manager and we came up with the color palette you see today.

Home dashboard

home-dashboard

Dispense PRN dashboard

dispense-prn-med-dashboard

How Do I dashboard

how-do-i-dashboard

How Do I – Video dashboard

video-changing-the-paper-dashboard

More Options dashboard

select-an-option-dashboard

Re-Dispense dashboard

re-dispense-dashboard

Next step

By the end of the two month project, the mock-ups were approved. I created redlines and worked with the senior developer to build and implement the new design. When the InSite System software was completed, we launched a redesigned and updated medication management experience that is unmatched in the industry.