Building Vital Design System: Modernizing MCG’s Product Suite for Growth
50
Reusable building blocks
50–75%
faster
ideation to first-draft prototype
20–30%
less
UI implementation time
Context
I initiated MCG’s design system creation, evolving Vital from a style guide into the shared starting point for new feature work across product teams.
Constraint
Vital DS had to support different workflows across Payer and Provider clients, fit the existing Vue and MUCL stack, meet accessibility needs, and enable shared patterns without blocking delivery or erasing legitimate product differences.
Key decisions
The team started with a token-first foundation. I partnered with stakeholders to adapt it to MCG’s product needs and helped establish guiding principles for accessibility, consistency, responsiveness, and collaboration.
Trade-off
I prioritized components by product need using an Impact-Effort matrix to improve usability, rather than a fixed roadmap. This helped address immediate usability needs, but sometimes left short-term inconsistencies across products.
Adoption & design judgment
Some PMs worried that shared patterns would constrain solution-specific needs. I helped them decide when to follow Vital: when a product-specific need justified a deliberate exception vs. when recurring exceptions signaled that Vital should evolve. This kept shared patterns coherent while allowing products to support their distinct workflows.
Deliverables
1:1 shared Figma library and Storybook component library and guidelines, as well as a design-system-aware prototyping workflow.
I think that's a good one. Yeah. Yeah, I'm not sure. I think that's what we're saying. So we got that once. So it's a need um shared to keep the data just the share so yeah, that but it's safe to like share like the math uh
The challenge
Across MCG’s solutions, teams were solving similar UI and accessibility problems in different ways. This duplicated design and engineering effort and made it harder to maintain consistent experiences. As accessibility expectations grew, addressing gaps screen by screen was not a sustainable approach.
Vital began as a style guide. The opportunity was to make it a shared system that helped teams repeat accessible product decisions, reuse patterns, and feed new needs back into the system.
My role
UX Designer. As MCG’s solo designer, I connected Vital’s foundations to product needs, with support from a design system contractor. I audited screens and workflows across the portfolio to identify inconsistent patterns, duplicated work, and accessibility gaps. I used those findings to help prioritize the areas where the system could have the greatest impact.
I shaped the semantic token strategy and roadmap priorities, balancing product urgency, accessibility risk, team capacity, and maintainability. I also helped establish a contribution workflow so teams could use Vital in product work, raise gaps, and decide with design and engineering whether a solution should become a reusable pattern.
1. Build for product leverage
We treated Vital as delivery infrastructure, not just a component inventory. The goal was to make useful, accessible product decisions easier to repeat across teams without requiring every product to adopt the same interface all at once.
I helped shape a token-first foundation that separated raw values from semantic intent. This gave designers and engineers a shared vocabulary for color, spacing, elevation, and interaction states. We also set guiding principles for user-centricity, accessibility, responsiveness, consistency, innovation, and collaboration, giving teams a basis for decisions when a system pattern did not yet exist.
We prioritized work through an impact-effort lens rather than following a fixed component roadmap. This let us address immediate product and usability needs first, while accepting some short-term inconsistency as the system matured.
2. Make adoption part of the system
A design system only helps when teams can use it without creating new debt. I helped establish a closed-loop contribution model: product work drew from Vital, and each design ticket included developer signoff and a decision about whether the work should become a reusable system pattern.
When a team encountered a gap, we assessed whether it was unique to that product or likely to help other teams. Standups, prioritization, a contribution checklist, office hours, and a dedicated Slack channel helped reinforce the workflow and bring feedback into the roadmap.
Migrating to Semantic Design Tokens v2
As Vital usage grew, the original token structure made foreground and background values harder to distinguish. Rather than patching inconsistent uses one by one, I helped drive a structured migration: auditing existing usage, defining token mappings and a compatibility path, and supporting gradual adoption with linting and codemods.
The aim was to improve consistency without interrupting active product work.
3. Extend Vital into AI-assisted prototyping
We paused further investment in standalone Figma documentation because static reference material alone was not the most direct way to help teams move from system guidance to a testable product experience. We began building a hosted prototyping environment connected to Claude, using the organization’s front-end stack: Vue 3, TypeScript, the existing component library, and Vital.
Designers can use the environment to turn requirements into interactive, multi-page prototypes using approved patterns and system guidance. Each prototype generates Vue code intended to map to the existing component library, giving engineers a system-aligned starting point for implementation. This creates an AI-enabled way to move from concept to code faster, surfaces feasibility questions earlier, and can reduce the translation between design and development.
The shift changes where guidance is used, not the need for it. Designers and engineers review generated work for accessibility, clinical safety, and fit with customer needs. AI supports exploration; people remain responsible for design decisions and implementation approval.
Impact
Vital provides shared tokens, components, application patterns, and contribution practices across seven healthcare solutions and four product teams. It gives teams a common foundation for reusable UI and a clearer path from design decisions to implementation.
For common interface work, teams estimated a 30–50% reduction in time to first draft.
Vital includes 43 components and composables and seven application patterns.
What I learned
Governance is part of the product. Contribution practices help keep the system connected to real product work and reduce parallel patterns.
Guidance works best near the work. Bringing patterns and usage guidance into prototyping can help teams apply the system while exploring a solution.
Accessibility needs to be built into the foundations. Tokens, components, and review practices all affect whether teams can create usable experiences consistently.
AI increases the value of a well-defined system. Faster generation makes clear component rules, accessibility guidance, and implementation mappings more important. AI can help teams explore, while designers and engineers remain accountable for what ships.