Brandy Shigemoto
Artboard 1.png

CalHEERS: Visual Design System

The California Healthcare Eligibility, Enrollment, and Retention System (CalHEERS) is jointly administered by Covered California and the California Department of Health Care Services. It’s a one-stop shop for Californians to apply and select health care. When CalHEERS approached Fjord to redesign the portal’s application, our team was tasked with the challenge of making the process of applying for health care easy (and dare I say, fun).

 
BearCapitol.png
 
 

Creating an approachable government design system

The California Healthcare Eligibility, Enrollment, and Retention System (CalHEERS) is a one-stop shop for Californians to apply and select health care. When CalHEERS approached Fjord to redesign the portal application, our team was tasked with working alongside Covered California and the California Department of Health Care Services to make the process of applying for health care easy (and dare I say, fun).

The Challenge

  • Adhering to ADA compliance standards
  • Appealing to two clients with different brand guidelines
  • Creating a visual style that feels safe and supports the intake of sensitive information
 
 
Process.png
 
 

Bear With Us

As we began designing the CalHEERS application, it became increasingly clear that a bold, identifiable visual style was necessary to clarify the complex content. Our team wanted to reinforce our established design principles and brand voice, as well as tell a compelling story that guided our users down the path to enrollment. When brainstorming how we could evolve the visual style, we decided to use the bear on the state flag as a friendly, approachable symbol throughout the application. What better mascot to have for the golden state? 

 
 
Avatars.png
Bear-Desktop.png
Illustrations.png
Bear-Desktop2.png
 
 

Supporting Design Pillars

We incorporated bear illustrations to reinforce our design principles, compliment the brand voice, and use storytelling to inspire users to apply for health care.

 
 
Humanize.png

Humanize

The bears helped us focus on the users as people, avoid touchy demographic issues, and prevent the application from feeling like a sterile government website.

 
Simplify.png

Simplify

Illustrations helped guide users through the experience from beginning to end by capturing their attention and highlighting important messages.

 
Personalize.png

Personalize

We assigned each user their own bear to help users distinguish household members throughout the application process.

 
 
 

Functional Storytelling

We found that asking questions at a household level helped minimize user generated errors and improve the experience. The bears helped users visually differentiate between household members and represent an inclusive perspective on demographics without removing the human element. They represent all Californians, no matter their race, gender, sex or otherwise.

 
 
Bear-Mobile2.png
 
 

User Testing

Due to the changing political landscape, some client sponsors were hesitant to move forward with a bold visual mark. To help them decide, we ran qualitative A/B user testing with 51 Californians. We asked participants to navigate through two unique mock application flows. One prototype represented the illustrative bears, and the other leveraged photography from Covered California’s marketing campaigns. After concluding the given flow, participants completed a reaction card survey to show their impressions of the experience. We used these reactions to determine the direction that best aligned with our design pillars.

 
 
Direction A

Direction A

Direction B

Direction B

 
 

Bear and Square

Our participants felt that the bears were friendly, warm, and represented Californians more than typical marketing stock imagery. We received a few comments that the bears were child-like, so we iterated and updated the style to appear more mature and less-cartoony. We found that the bears had people talking and were great for brand recognition.

 
 
UserTesting.jpg
Quotes.png
Bear-Map.png
 
 

Grin and Bear It

After many rounds of iterations, conflicting goals from both governing organizations proved that CalHEERS was not ready to move forward with the bears. There are several stakeholders still hoping for a come back, but for now the bears live in the graveyard. 

 
 
deadbears6.gif
 
 

X-Rays, Clipboards, and No Bears, Oh My!

After dedicating a significant amount of time focusing on bears (months!), we had to pivot our design direction quickly. We still needed to appeal to a diverse user-base, so we started illustrating everyday objects that complimented questions and didn't represent human characteristics. These avatars also went through several rounds of iterations with our risk-averse client sponsors. We eventually landed on twenty unique illustrations representative of the state of California. The avatars are assigned to users at the beginning of the application and help them focus on each individual throughout the application process. This direction allowed our team to keep the same vibrant visual styling the bears had without the concern of diversity or drastic marketing shift. 

 
 
Process - Generic.png
Avatars - Generic.png
Illustrations - Generic.png
Illustrations - Generic 2.png
Illustrations - Generic 3.png
 
 

Working With Shifting Government Policies

Being a government entity within a constantly changing political landscape, CalHEERS is routinely under scrutiny. The sponsors required a flexible design system that could be easily updated and maintained to adhere to government mandates. This kept us on our toes as we designed, and required our team to be adaptive throughout the process.

Once we ironed out the application's visual direction, we created a cohesive and holistic design language. It was important to establish a strong design foundation that could grow and support a large system. Using Brad Frost’s Atomic Design Methodology, we worked to create a system of modular components to support this challenge. These repeatable elements and patterns exponentially sped up the design and development process, improved efficiency, and reduced design refactoring. We found the flexibility and scalability of components to be extremely important, particularly due to the ever-changing policies and regulations. We documented these guidelines in an interactive, application specific style guide for both designers and developers. 

 
 
Color.png
 
StyleGuide1.png
 
 

Lessons Learned

An important takeaway I had from this experience is to establish a small, core team of stakeholders from the start of the project. With too many cooks in the kitchen, it was difficult to find alignment and agreement for a visual system. The bears cost us months worth of time that could have been avoided by having visual buy-in as soon as we completed the moodboards. With a quick pivot and fast thinking, the design style ultimately supported both the sponsor’s business objectives and the consumer’s user experience. In the end, I learned a great amount about evolving and adapting a brand’s style across a digital ecosystem. 

 
 

 
 

Date: 2016-2018
Company: Fjord
Project: CalHEERS
Role: Visual Design Lead

 

 

Core Design Team:
John Norton, Dominick Bellia (Design Director)
Anna Owens (Project Management)
Kenzie Haynes (UX + Design Lead)
Antonia Aglialoro (UX)
Ben Leffler (Content)
Brandy Shigemoto (Visual)