Design System Adoption on Existing Member Experiences, Blue Shield of California
The Cerulean Design System has existed since the beginning of 2024 at Blue Shield CA. Our 2024/2025 priorities focused on developing comprehensive microlibraries, then adopting the system on existing member experience from a visual design and code perspective.
Microlibraries
The first step in the process of building our design system was designing and building our component microlobraries in all of our codebases:
- Accordians
- Badges
- Banner alerts
- Buttons & links
- Breadcrumbs
- Card & tiles
- Footers
- Form elements
- Foundations (colors, typography, icons, grid, shadows, accessibility, logos)
- Heros
- Modals
- Navigation
- Progress indicators
- Tables
- Tabs
- Tooltips
These microlibraries act as a reference for:
- Component variations
- Visual rules
- Interaction rules
- Content rules
- Accessibility considerations
- Unpublished one-offs
Button component variations
Process
As we developed the Cerulean Design System, it was essential to establish a clear process for project teams to implement the system and engage the Cerulean team for support. This framework eased the transition for the broader UX team, allowing them to design new projects using Cerulean while the Cerulean team adopted the design system in existing experiences. The process flow we created addresses the needs of four key groups: the Agile team, the UX team, the digital content team, and the Cerulean team.
Member reskins
After designing and building our component microlibraries, we adopting cerulean in existing member experiences. While the primary focus has been a visual uplift, we also make functional and content improvements when scope permits. We also connect with current or previous product owners to ensure we consider all scenarios and maintain the integrity of the product. Below are several experiences where I led the visual design side of the adoption.
Message center before
Message center after
Out-of-network claim form before
_Out%20of%20Network%20Claim_Form%20Check%20Filled_1.svg)
Out-of-network claim form after
Claims summary before
_Medical%20Claims%20Summary_1.svg)
Claims summary after
Claim details before
_Claim%20details_1.svg)
Claim details after
Claims you submitted before
_Claims%20you%20submitted_1.svg)
Claims you submitted after
Demos
Along with QA and development leads, I demo these cerulean adoptions for product owners and stakeholders to demonstrate the changes being made, answer questions, and receive any feedback for future iterations.
2025 Cerulean scope
Our 2025 goals for Cerulean include:
- Continued adoption of the design system across member-facing platforms.
- Expanding Cerulean implementation to the member mobile app.
- Integrating Cerulean into our Health Record and Find a Doctor experiences, each of which operates on separate codebases.