Design System
Rebuilding "Simone" the design system for SupplyManager, a leading B2B e-commerce platform for medical supplies
Client
McKesson
Category
UI Design
My Role:
Rebuild &
Maintenance
Tools Used
Design System
Rebuilding "Simone" the design system for SupplyManager, a leading B2B e-commerce platform for medical supplies
Client
McKesson
Category
UI Design
My Role:
Rebuild & Maintenance
Tools Used
Design System
Rebuilding "Simone" the design system for SupplyManager, a leading B2B e-commerce platform for medical supplies
Client
McKesson
Category
UI Design
My Role:
Rebuild &
Maintenance
Tools Used
Problem
Problem
Prior to adopting the Atomic Design System, McKesson faced challenges in maintaining a cohesive user experience for supply manager. Design inconsistencies, duplicated efforts, and slow development cycles were hindering the company's ability to respond quickly to market demands.
Prior to adopting the Atomic Design System, McKesson faced challenges in maintaining a cohesive user experience for supply manager. Design inconsistencies, duplicated efforts, and slow development cycles were hindering the company's ability to respond quickly to market demands.
Prior to adopting the Atomic Design System, McKesson faced challenges in maintaining a cohesive user experience for supply manager. Design inconsistencies, duplicated efforts, and slow development cycles were hindering the company's ability to respond quickly to market demands.
Solution
Solution
Solution
The primary goal of implementing the Atomic Design System was to establish a robust foundation for design and development, promoting reusability, consistency, and collaboration across different teams working on Supply Manager.
The primary goal of implementing the Atomic Design System was to establish a robust foundation for design and development, promoting reusability, consistency, and collaboration across different teams working on Supply Manager.
The primary goal of implementing the Atomic Design System was to establish a robust foundation for design and development, promoting reusability, consistency, and collaboration across different teams working on Supply Manager.
Defining the Structure
Defining the Structure
Embracing the principles of Atomic Design, I divided the UI into five distinct levels: Atoms, Molecules, Organisms, Templates, and Pages.
Foundation & Core Components
This file includes the style guide, atoms and molecules
Components
This file includes organisms, templates and pages.
Foundations
Foundations
This part of the design system is made up of the foundation, style guide, and the core components aka the molecules. Each alphabetically sorted page includes all the atoms that make up each molecule.
This part of the design system is made up of the foundation, style guide, and the core components aka the molecules. Each alphabetically sorted page includes all the atoms that make up each molecule.
The foundations/style guide page includes brand logos, grid systems, elevations, typography scales and color systems.
Having defined a basic system for colors, typography and spacing, I then moved on to the most basic elements such as buttons, button groups and badges These would be the building blocks that make up more complex components and flows.
Having defined a basic system for colors, typography and spacing, I then moved on to the most basic elements such as buttons, button groups and badges These would be the building blocks that make up more complex components and flows.
Components
Components
This part of the design system is made up of organisms, templates and pages
This part of the design system is made up of organisms, templates and pages
Using Figma, I was able to create multiple variations of each component. No matter the complexity, each component can always be dissected down to the original atom. This keeps all design updates consistent, so when a designer changes something on the atom level, it will update across every component.
Using Figma, I was able to create multiple variations of each component. No matter the complexity, each component can always be dissected down to the original atom. This keeps all design updates consistent, so when a designer changes something on the atom level, it will update across every component.
Documentation
The documentation part of the design system explains the purpose, usage, and customization options for each design element. Collaboration between me and developers was essential to ensure a seamless integration of design elements into the development process.
The documentation part of the design system explains the purpose, usage, and customization options for each design element. Collaboration between me and developers was essential to ensure a seamless integration of design elements into the development process.
The pages section of the design system all have links to an interactive prototype and documentation so developers can easily view interactions and implement designs correctly.
The pages section of the design system all have links to an interactive prototype and documentation so developers can easily view interactions and implement designs correctly.
Cross functional teams can easily access any document associated with the final deigns built with the design system.
Cross functional teams can easily access any document associated with the final deigns built with the design system.
The Outcomes
Identifying the main problem led to the discovery of many micro-interaction problems. This led to the redesign of multiple current micro-interactions. After testing these small interactions, they were implemented and significantly enhanced the experience. Users can now spend half the time they were previously building out audiences.
The Outcomes
Identifying the main problem led to the discovery of many micro-interaction problems. This led to the redesign of multiple current micro-interactions. After testing these small interactions, they were implemented and significantly enhanced the experience. Users can now spend half the time they were previously building out audiences.
Get in touch
Get in touch
erikaweldon@gmail.com
The Outcomes
Identifying the main problem led to the discovery of many micro-interaction problems. This led to the redesign of multiple current micro-interactions. After testing these small interactions, they were implemented and significantly enhanced the experience. Users can now spend half the time they were previously building out audiences.
Get in touch
erikaweldon@gmail.com
The Outcomes
The rebuild of the design system at McKesson resulted in significant improvements in design consistency, collaboration efficiency, and overall user satisfaction.
Key outcomes include:
Increased Productivity: Designers and developers experienced improved workflow efficiency, as the modular components facilitated rapid prototyping and development.
Cost and Time Savings: The reduction in redundant design and development efforts led to cost savings and accelerated time-to-market for new features and updates.