Caroline Keem, UX Design

Allscripts Care Director

Bringing usability and accessibility to a legacy outpatient care coordination platform

The Care Director team had operated with a development-driven mindset for years, designing primarily for engineering ease. This resulted in significant UI inconsistencies, poor usability, and limited accessibility—hindering both patient care and market expansion.

My Role

Though originally brought on to improve usability, my true contribution was shifting the team toward a user-centered design approach.

Researched how care coordinators used the legacy tool in their day-to-day workflows
Shared real user feedback regularly to build empathy and buy-in from developers
Involved the entire team in user testing and observation
Created a detailed product usability and design style guide to support consistent, thoughtful design decisions
Informed broader redesign efforts through research that also supported the Care Director Plan project

The Impact

While a full redesign hasn’t been possible, incremental usability improvements have significantly enhanced the platform
The product is shifting from fragmented data views to showing patients as whole people
Due to improved accessibility and usability, Care Director has expanded into international markets with stricter accessibility standards

Empathize

Qualitative Data Collection

Contextual Inquiry: Interview 19 users to discover their real work
Gain a real-world assessment of what is and is not working

What are they doing?

Copying and pasting between multiple tools
Creating their own templates in Word
Creating their own task list in Excel
Duplicating efforts by writing on paper and transcribing into computer

Who are they?

Late-career, in their 40's or older & primarily female
Incredibly devoted to patient health & preventing readmissions
Unable to read small type on screen
Experiencing wrist pain

Consolidate qualitative data

Distill observations into consolidated data models and reveal themes

Teamwide participation

Involve team members of all disciplines to build a shared understanding of user data

Affinity diagram

All notes consolidated across users to uncover themes

Flow Diagrams

Flow model allows better visualization of user journey and highlights common breakdowns

accessibility

Present user feedback directly relating to accessibility issues to build teamwide empathy

Excerpts from a presentation of accessibility related user quotes captured during user tests.

Quantitative Data Gathering

System Usability Status Scoring to benchmark perceived usability

Lower than acceptable scores helped to establish the need for product improvement to stake holders.

Participants were also asked 3 fill-in questions at the end of the survey. Answers were matched to score ranges.

Create personas

Create persona libraries based on real qualities that users embody
Include these personas in feature discussions and user stories

Additional writing on personas

Ideate

Group ideation

Lead team-wide vision session

All team members "walk the wall" to absorb user data

Problem statements for visioning are captured

Participants split into groups, select a problem from the list, and brainstorm

Jobs-to-be-done

Identified jobs-to-be-done and matched these with solutions generated during visioning session

Creating team cohesion

Making usability everyone's job
Focusing the entire team on user-centered design thinking

Created regular dialog with development teams and integrated UX with sprint cycle

Prototpe

Sketching

First concepts start on paper, even if it's just writing my way through ideas
Paper and pen are more immediate and I always have a notebook on hand

Style guide

Empower teams to make design decisions by providing a usability sytle guide

A usability style guide walks through all possible interaction devices (e.g. form inputs, accordion controls, buttons) in a macro-to-micro fashion and gives its’ reader both a broad sense of how each device should be experienced as well as precise directions regarding functionality, accessibility, and layout. The guide is a complete design tool set so that someone working on a feature at 1:30 pm in Bangalore who has a question is not waiting on me who is snoozing away at 3 am in Chicago to get an answer. It empowers them to make decisions.

The prototype I give developers to work from needs to contain some of the directions from the style guide and give them a one-click reference to the one spot in the guide to which they must refer so they can stay in the mental flow of their work.

Additional writing about usability style guides

Wireframe

Presenting specs and decision trees with styling

This developement team struggled to comprehend wireframes or flow charts as these had never been put in front of them before. I found it easiest to make what I call "proto-frames" in which decision trees are presented using styled, non-interactive UI elements.

prototype

Interactive prototype with styling applied

Interactive protype of expanding patient banner for testing

Interactive worklist of patients consolidating patient tasks

Get the full feel for the user flow. Consider these in the light of our personas. If Overwhelmed Olivia is interrupted while using this, would she be able to pick up where she left off easily? Would Not-tech-savvy Nora be able to discover the functionality easily? Is this too many clicks for Frustrated Frank?

Validate possibility of design with development team.

Pre-testing iterations are done to make sure all requirements are met. This lets me poke through all interaction possibilities and often uncovers the need for new requirements.

Test

Remote testing of interactive prototype

I recruit 5-10 users from an advisory board consisting of customers willing to participate in product imrpovement. Our participants join in a Webex call and are given keyboard and mouse control to directly interact with the UI.

I set the test objectives, writing the test plan, create at least 3 different presentations of test results depending upon the audience.

Successful or failed assumptions are a clear benchmark to reference when making follow-up design recommendations. Some designs meet their end right here. They are not proven through testing to be an improvement.

One item consistently tested was a banner showing patient details. With the addition of customers in the UK the online patient record needed to display a patient banner compatible with their National Health System guidlines. This also provided an opportunity to give users a look across patient data in one glance without having to click around.

Test presentations can get long and wordy! Encapsulating feedback into a word cloud provided another way to keep the audience engaged.

Recommendations on how to iterate or move forward on designs that were user tested.

Iterate

Original feature

Iterating a single feature through testing

Patient banner, original design

Little of the functionality was used. White buttons below patient name are unituitive and require "hover and discover" to reveal their function (which does not match the icon...at all). Much of the data shown is not used at all.

First redesign

Patient banner, first iteration

Initial redesign adhering to UK National Health System regulations. Functionality of incons moved to drop menu. A cleaner design to the top portion with 5 expandable sections beneath to show more detail. Given the diverse nature of our user base, the sections of the banner are customizable to display what a particular client would need.

Test results

First round of test results - mostly successful with some need for clarity

Expanding and collapsing controls proved to be problematic. In addition users requested that certain features not be moved into the "quicklinks" drop down.

Redesign

Redesigned response to test results

Expand/collapse changed to a drawer control. Favorites icon moved back to next to patient name.

Feature Release

Releasing updates in phases

Phase 1

Content cleaned up, buttons remain.

Phase 2

Better banner released.