St. John's Health

Designing Infographics to Support the Facilities Communication Plan

Designing Infographics to Support the Facilities Communication Plan

Designing Infographics to Support the Facilities Communication Plan

Designing Infographics to Support the Facilities Communication Plan

OVERVIEW

Client

St. John's Health

Scope of work

Design visuals that communicate the hospital's large infrastructure project to employees, the public, and donors.

Outcome

The visual assets were spread across ____ products and on average the visuals received a ______ favorability score out of 5.

THE PROBLEM

A complicated and consequential project

How to communicate the moving pieces and promoting why they matter was a challenge to the hospital team.

Issue 1

Visually communicating WHAT infrastructure projects are happening in a way that is clear

Issue 2

Visually communicating WHY these updates matter to people and why now

Issue 3

How to weave these pieces into a story throughout different media channels

TARGET AUDIENCE

Employees, the Public, and Donors

Employees, the public, and donors each have independent interests and concerns. Many visuals can speak to the groups, but the storytelling and content that wrap the visuals is different.

Employees

Public and Donors

ISSUE 1

WHAT infrastructure projects are happening

The hospital was undergoing multiple

ISSUE 2

WHY these projects matter and why now

The intended use of each map control was also not obvious to trailgoers. Through moderated interviews it became clear that most users of AllTrails didn’t use the map controls at all, and when they did, their ability to correctly identify what each button did what was relatively low.

ISSUE 3

How to weave these assets in stories across channels

When a trailgoer started navigation mode, the map did not change at all to help support the act of direction finding. Because the navigation mode was so similar to the regular map, participants in moderated testing often weren’t sure whether they’d entered navigation mode.

After

Before

THE APPROACH

Create a dedicated navigation mode to help trailgoers stay oriented while out on trail. Define unified map control states holistically across the product to improve usability and free up map real estate.

Create a dedicated navigation mode to help trailgoers stay oriented while out on trail. Define unified map control states holistically across the product to improve usability and free up map real estate.

From moderated interviews, it was clear that the existing navigation mode didn’t really provide additional value to trailgoers leading to a large drop off in use after the first time. Additionally, users largely denied using the map controls.

To promote on-trail usage of the product, I proposed creating a dedicated navigation mode that would start by default when users hit “start,” and help users stay oriented on their route. This new mode couldn’t exist in isolation, however, and since the existing map control states were inconsistent and confusing I proposed an update to the overarching map controls across the product to create a consistent experience. I also A/B tested iconography in the controls to improve overall information scent among users. 

IDEATING

Auditing the competitive landscape and sketching possible navigation models

To start, I audited a range of navigation and mapping applications to identify the most common patterns for iconography, map states, and overall map control behavior.

Next, I explored different navigation and map control options on paper. From research, I had learned that users on average glanced at the AllTrails map while on trail about 5 times per navigation session. This meant that any navigation aid would need to help the user self-orient at a glance. Some ideas I explored included audio turn by turn directions, highlighting one’s proximity to the next turn to the map, and simply applying a map tilt and tracking the user’s orientation to help improve the glanceability of the map while navigating.

TESTING

Testing each control to optimize comprehension

Participants in moderated research at times struggled to identify the intended uses for the existing map controls. Because of this, I decided to run quick unmoderated user testing with variant iconography to determine whether alternative icons would help users better understand what each control would do.

Through this process, I identified relatively small changes that drastically improved user confidence in map controls. For example, by adding an “N” for north in the compass, participants’ ability to correctly identify the intended use of the map control increased from 20% to 70%.

Participants in moderated research at times struggled to identify the intended uses for the existing map controls. Because of this, I decided to run quick unmoderated user testing with variant iconography to determine whether alternative icons would help users better understand what each control would do.

Through this process, I identified relatively small changes that drastically improved user confidence in map controls. For example, by adding an “N” for north in the compass, participants’ ability to correctly identify the intended use of the map control increased from 20% to 70%.

THE RESULT

The new navigation mode resulted in a 1% net (12% relative) increase in week-1 retention for users navigating in their first week.

Additionally, the overall core experience for the map controls was unified across iOS, Android, and web and documented for design and development for future reference.

PROJECT 1

PROJECT 2

I’m Cal — a freelance designer

Cal Brackin Design

©2024

I’m Cal — a freelance designer

Cal Brackin Design

©2024

I’m Cal — a freelance designer

Cal Brackin Design

©2024

I’m Cal 
— a freelance designer

Cal Brackin Design

©2024