• Skip to main content
Tom Hock Site Logo
  • Work
    • UX/UI Design
    • Print Design
  • About
  • Contact
  • | Home
insite-system-2_4-mobile

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

By the end of the two-month project, we launched a redesigned and updated medication management experience that is unmatched in the industry.

Previous InSite System software dashboards

Home dashboard
homepage-dashboard
Dispense PRN dashboard
dispense-prn-dashboard
My Options dashboard
my-options-dashboard
How Do I – Video dashboard
changing-the-packaging-paper-dashboard

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

Once 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, it went into beta testing.

More UX/UI Design Work

More UX/UI Design Work

Let's Connect:

© 2023 · Tom Hock

Tom Hock Site Logo
  • Work
    • UX/UI Design
    • Print Design
    • Back
  • About
  • Contact
  • | Home