Connect Evolution — Design System for McKesson

About the Project

McKesson Corporation distributes pharmaceuticals and provides healthcare information technology, medical supplies, and care management tools. The company supplies one-third of all pharmaceuticals used in North America. Connect Evolution is the design system initiative for their global wholesale purchasing management platform.

The Challenge

Revamp the UI of a global legacy application for wholesale purchasing management. Enable quick updates and flexibility for future redesigns. The main challenge was the complete absence of documentation for the existing system. Timeline: 6 months.

My Role

Lead Designer responsible for deconstructing the existing UI, production planning, tokenizing UI components, Storybook integration, and fostering effective designer-developer collaboration throughout the project.

Process

Discovery — Deconstructing UI Patterns

Started by systematically deconstructing the existing legacy UI into its fundamental patterns, identifying every unique component, layout variation, and interaction pattern across the application. This was especially challenging due to the complete lack of documentation.

Task Breakdown & Team Collaboration

Organized the design system work into manageable tasks distributed across the design and development team. Created clear component ownership assignments and established regular sync meetings to ensure alignment between design and implementation.

Design Token Convention

Established a comprehensive design token convention defining the pipeline from Figma to JSON to GitHub. Created a systematic naming convention and hierarchical token structure that enabled automated synchronization between design tools and the development codebase.

Tokenization & GitHub Integration

Tokenized all UI components — colors, typography, spacing, shadows, border-radius, and component-specific tokens. Integrated the token pipeline with GitHub for version control, enabling developers to pull the latest design tokens directly into their build process.

Storybook Real-Time Review

Set up Storybook as the single source of truth for component implementation, enabling real-time review cycles where designers could verify component fidelity against design specifications without waiting for full application deployments.

Results

Delivered a developer tool for easy UI changes that dramatically reduced the time needed for visual updates. Created a comprehensive client toolkit with documentation and guidelines. Streamlined design-to-development processes and established comprehensive documentation that did not exist before.

Key Learnings

Gained deep expertise in tokenizing complex legacy systems where no prior documentation exists. Learned best practices for organizing Storybook at scale for enterprise applications. Strengthened cross-functional designer-developer collaboration skills, particularly in establishing shared workflows and automated pipelines.