A Design System for Alberta Blue Cross®

Project Details

Alberta Blue Cross® was looking to build a comprehensive, understandable, and scalable design system that aligned with their digital strategy. The design system would be a large-scale system that would serve over 300+ employees.

Problem Statement

Alberta Blue Cross® had reached a pivotal point where they knew they needed a design system. They wanted to implement a system that would be easy to follow for designers and developers, and efficient to reference and update over time. The goals of the project included:

• Develop a comprehensive, understandable, scalable, and usable design system aligned with the Alberta Blue Cross® digital strategy.
• Create an executable plan to grow the design system culture within the organization.
• Evolve Alberta Blue Cross® visual design language and establish guidelines.
• Improve Alberta Blue Cross® component library and system documentation.
• Develop UI standards based on atomic design.
• Organize accessible web development standards.

They needed an experienced external perspective to not only help research viable solutions but also kick-start the initial build. The team at Alberta Blue Cross® ultimately chose to partner with Paper Leaf because they wanted to:

• Access a large team with diverse expertise, including developers, designers, project managers, and product strategists.
• Get the project moving quickly, as Alberta Blue Cross® didn’t have the internal capacity to tackle the project alone.
• Receive unbiased feedback—Paper Leaf, with no prior experience or bias toward specific products, could audit and make recommendations based solely on the true needs.
• Build internal maturity—Paper Leaf supported Alberta Blue Cross® staff in learning Figma, organizing their workflow, and implementing new processes, including adopting a new coding language.

At the same time, Alberta Blue Cross® was undergoing a rebranding process and had complex internal processes that required review and approval of Paper Leaf work, adding another layer of intricacy to the overall project.

What We Did

To begin, we needed to fully understand current processes, products, systems, and where gaps existed. Our discovery process for this project included:

• Product walkthroughs and audits
• Stakeholder interviews
• User interviews
• Competitor/comparative analysis

From the research, we were able to create a roll out plan, governance model, and technical plan for Alberta Blue Cross®. We created a shared vision that aligned with the various teams and collaborated with Alberta Blue Cross® to roll out their new plans with internal teams. 

The design system was built on Storybook as a single source of truth for all Alberta Blue Cross® products, with accessibility as a key priority—one of Alberta Blue Cross®’s core values. The system was designed  to be modular and scalable, making tooling and updating easy for administrators. We introduced the Alberta Blue Cross® design and development teams to Storybook early on, working collaboratively throughout the process. This approach ensured that  as the system evolved, their teams had developed the skills needed to manage and develop the system independently.

Outcomes

We created a highly accessible and interactive design system to meet the different needs of a variety of departments. The Storybook interface acts as a company-wise source of truth for style and functionality, while the corresponding Figma base lets designers create mockups quickly and easily utilizing vetted and approved components. This has allowed Alberta Blue Cross® teams to drive and deliver a consistent product experience across all products while increasing the efficiency of their teams. 

The client was extremely happy with the final result delivered by the Paper Leaf team, so much so that we have co-presented our project learnings at conferences to share the knowledge gained through this collaborative partnership.
We’ve also written an article on “The Taming of the Design System”, written by Sara Ferguson, the designer on this project, which includes learnings from our work with Alberta Blue Cross®.