Challenge
In 2022, CMS's Medicaid and CHIP Business Information Solutions (MACBIS) initiative faced significant challenges due to siloed operations across its nine product teams. Each team used different Human-Centered Design (HCD) practices and tools, leading to inefficiencies and inconsistencies. Additionally, non-disclosure agreements among vendors created barriers to information sharing. These issues resulted in duplicated efforts and inconsistent product experiences across the ecosystem.
The Solution
To address these challenges, CMS partnered with XCell to form the MACBIS HCDU Team. A key component of this initiative was the creation of Harmony, a component-based Figma design system. Harmony unified 150+ designers, developers, and stakeholders across the nine product teams, bringing them together under a shared vision. This approach streamlined the design process, reduced costs, and enhanced product quality and uniformity.
The Process
1. Research and Measure Ecosystem Maturity
Initially, our team did not aim to create a design system but to understand the needs and challenges of the MACBIS design community. We employed qualitative research methods, including interviews and surveys, to gauge each team's design maturity across five scaled axes:
- Access to Users
- Strategic Design Approach
- Community of Practice Participation
- Product Understanding
- Collaborating & Sharing Research
Our research revealed significant collaboration challenges and inconsistencies due to the use of multiple, product-specific design systems and varied technical tools. This highlighted the need for a centralized design system.
Key Findings:
- Collaborating & Sharing Research: Each product team was staffed by multiple vendors, causing uncertainty about information sharing due to NDAs. However, there was a strong desire for collaboration.
- Multiple Design Systems: Each team had its own design system, leading to duplicated efforts and inconsistent design standards.
Varied Tools: Teams used different design tools (Figma, Sketch, Adobe XD), complicating file sharing and collaboration.
2. Find Our Allies
Gaining buy-in from a diverse design community required identifying champions and influential leaders within the organization. We engaged two product teams as early adopters and formed a Win Alliance of key MACBIS leaders. Building trust through face-to-face conversations with stakeholders helped us understand their needs and garner their support.
3. Build a Proof of Concept with Pilot Teams
To demonstrate the value of a unified design system, we quickly developed a proof of concept using the U.S. Web Design System (USWDS) as a base. We introduced custom components and created a version-controlled UI library in Figma. A visual comparison of the existing and proposed design system highlighted the benefits of consistency and alignment.
Steps Taken:
Developed a UI Library: Built in Figma and shared with teams for feedback and adoption metrics.
Visual Comparison: Showed the difference between varied product designs and a unified system.
Distributed Licenses: Provided Figma organization licenses for team access to the design system prototype.
Constant Communication: Used Slack and monthly Community of Practice meetings to foster collaboration and alignment.
As the design community embraced this collaborative environment, we renamed the proof of concept "Harmony" to symbolize the unification of the entire MACBIS community.
4. Implement and Scale
With positive feedback from leaders and product teams, we focused on scaling Harmony. We adopted a federated model for maintaining the design system, where designers from various teams contributed to its upkeep, ensuring sustainability without the need for a separate design team.
The Results
The Harmony Design System, built using Figma, Stencil JS, and Storybook, enabled teams to:
- Access a shared set of design standards, templates, and components compatible with any tech stack.
- Make global changes to design components, automatically applied across the ecosystem.
- Apply product-level branding while maintaining consistency with MACBIS standards.
- Utilize technology-agnostic tools for frontend development and documentation.
- Follow Voice & Tone guidance for content design and strategy.
This approach streamlined design processes, reduced rework, and fostered instantaneous collaboration, aligning all nine teams under a single vision for MACBIS design standards.
Key Takeaways:
- Build Trust Early: Engage in face-to-face conversations with stakeholders to understand their challenges and build a foundation of trust.
- Find Advocates: Identify and leverage influential leaders within the organization to champion the design system.
- Start Small: Demonstrate value with small, feasible projects that address immediate needs.
- Shared Tools Unlock Collaboration: Tools like Figma facilitate collaboration and track adoption metrics.
- Involve Stakeholders Continuously: Keep stakeholders engaged throughout the process to ensure alignment and advocacy.
- Top-Down Vision Alignment: Leadership must consistently communicate the ecosystem vision to maintain alignment across teams.
- Bridge Stakeholders and Teams: Act as a connector to foster organic relationship-building and insights.
- Embrace Innovation: Move quickly with lightweight prototypes to demonstrate value and test hypotheses.
- Simplify Decisions for Stakeholders: Present stakeholders with clear, fact-based options to facilitate decision-making.
The success of the Harmony Design System illustrates the transformative impact of a unified design approach in a complex, multi-vendor environment, setting a precedent for future initiatives.
