Multi-brand design system unifies healthcare organization’s experiences

Founded in 1955, Baptist Health provides comprehensive medical care to families throughout Northeast Florida and Southeast Georgia. By the time they reached out to us, their dedicated team had already built a complex and thorough collection of web experiences representing hundreds of practices, clinics, services and more… but they were grappling with some recurring challenges:

• Existing sites were fixed-width or only partially responsive, which made them challenging to use on many devices.
• Each project was largely bespoke and self-contained. This resulted in inconsistencies overall while slowing the velocity of design iteration, feature development and ongoing maintenance.
• Due in part to these hurdles, Baptist Health’s web experiences had fallen a bit out of step visually and functionally with their brand and, even more importantly, their hospital experience.

They sought out Cloud Four for our expertise in responsive design, design systems, performance and accessibility, as well as our ability to closely collaborate with and train their team to embrace some new ways of working.

Solution

We designed and built the Baptist Health design system in steps, incorporating one web experience at a time. This kept our focus on the highest priority elements and allowed us to ship results with each iteration, starting with Wolfson Children’s Hospital (which had the most immediate needs) before expanding to include the main Baptist Health website as well as Baptist MD Anderson Cancer Center (the latter designed by a separate team working in parallel).

For each phase of design, we toured the relevant facilities in person, photographing architectural and interior design details, asking questions and taking copious notes. These artifacts fueled a series of collaborative sketching and prioritization exercises, mood boards and element collages to establish a basic look and feel, which in turn informed the most basic building blocks of our system.

From there, we tackled each design challenge through a series of in-browser mockups and rapid prototypes, frequently sharing for feedback and gut reactions. Each approved design would yield more patterns to flesh out and polish for consistency, flexibility, performance and accessibility, promoting continuous collaboration between designers, developers and stakeholders while improving velocity (as each design called for fewer and fewer brand-new elements).

The resulting design system consists of a few key elements:

• Design tokens define discrete stylistic properties like color, typography, spacing, etc. Style Dictionary was used to define these tokens while also allowing sub-brands of Baptist Health (such as Wolfson Children’s Hospital and Baptist MD Anderson Cancer Center) to override the primary brand’s tokens.
• Front-end components are written using Liquid for markup, CSS for presentation and vanilla JavaScript for behavior. Liquid was chosen after evaluating cross-platform template languages that would work with Baptist Health’s back-end in conjunction with their headless content management system.
• Common combinations of multiple components, which may be included on their own to streamline development.
• A prototyping sandbox to demonstrate new interfaces in their entirety and promote future exploration.
• An intuitive style guide with thorough design and component documentation. This is built using Eleventy and automatically updated whenever a change is merged in the project repository.

Outcome

The first site to implement the design system was Wolfson Children’s Hospital. The new experience was extremely well received, winning four eHealthcare Leadership Awards including “Best Site Design” and “Best Mobile Website,” as well as W3 Awards for “Website Photography” and “Visual Appeal.” That response continued as more websites adopted the system, with the main Baptist Health website recognized by the eHealthcare Leadership Awards for “Best Site Design” in its category.

The system also enabled us to iterate much more rapidly than before, designing new features like improved scheduling, better “find a doctor” tools, and a hub for relevant healthcare news and resources.

But perhaps most rewarding is the work the Baptist Health team has been empowered to do on their own: In 2020, they were able to create and launch a COVID-19 microsite in less than two weeks to help patients and families cope with the pandemic in its earliest days.

None of these opportunities came at the cost of performance. Although the Baptist Health design system includes more than 300 documented components, modifiers and other patterns, the resulting bundles are small. As of this writing, the largest Baptist Health bundle amounts to just 42 KB of CSS and 7.3 KB of JavaScript when minified and compressed, and its homepage regularly achieves Lighthouse scores between 90 and 100 in the Performance, Accessibility and Best Practices categories.

Cloud Four’s process stands out for being so transparent, iterative and collaborative. They listened carefully to our goals, asked tough but important questions, and encouraged contributions from everyone. I’m amazed by how much our web experiences transformed with their guidance.

Plus, they’re just a nice team to work with.

Nicole Jenkins, Digital Content Producer