Adoption of the product portfolio
Hand-off cycle time
Time to design a new screen
Adoption of the product portfolio
Hand-off cycle time
Time to design a new screen
Adoption of the product portfolio
Hand-off cycle time
Time to design a new screen
My
role
With countless internal and external teams working at high speed, the scale and pace of product development in J&J demanded a solution that truly help the teams overcome the challenges they face day to day regarding design. I proposed the creation of a design ops strategy including a full fledge design system as a base for knowledge management of internal product design, and design processes for digital transformation.
My
role
With countless internal and external teams working at high speed, the scale and pace of product development in J&J demanded a solution that truly help the teams overcome the challenges they face day to day regarding design. I proposed the creation of a design ops strategy including a full fledge design system as a base for knowledge management of internal product design, and design processes for digital transformation.
My
role
With countless internal and external teams working at high speed, the scale and pace of product development in J&J demanded a solution that truly help the teams overcome the challenges they face day to day regarding design. I proposed the creation of a design ops strategy including a full fledge design system as a base for knowledge management of internal product design, and design processes for digital transformation.
Designers
Developers
Distribution Centers
300
Stakeholers
Base components and variants
The challenge
The challenge
I took on the challenge of leading the creation of a global design system to support digital transformation. With thousands of designers embedded in product teams worldwide, each with different levels of expertise, the key was to build a shared knowledge base that aligned teams and ensured consistent quality across products.
To make it possible, I rallied colleagues from different projects to form a part-time dedicated design system team. More than a component library, my vision was to establish a DesignOps strategy: a practical toolbox that provided structure, clarity, and guidance on process, tools, and best practices, empowering every designer to contribute with confidence and consistency.
I took on the challenge of leading the creation of a global design system to support digital transformation. With thousands of designers embedded in product teams worldwide, each with different levels of expertise, the key was to build a shared knowledge base that aligned teams and ensured consistent quality across products.
To make it possible, I rallied colleagues from different projects to form a part-time dedicated design system team. More than a component library, my vision was to establish a DesignOps strategy: a practical toolbox that provided structure, clarity, and guidance on process, tools, and best practices, empowering every designer to contribute with confidence and consistency.
Atoms codebase
Atoms codebase
Atoms codebase color mode
Atoms codebase color mode
Components codebase
Components codebase
Components codebase
Components codebase
Data visualization codebase
Data visualization codebase
Data visualization codebase color mode
Data visualization codebase color mode
Design system roadmap
Design system roadmap
Design system structure
The design system is structured into multiple files, creating a flexible architecture that can connect with other systems through the foundations file or design tokens. It also includes dedicated files for base components, data visualization elements, icons, and illustrations.
Design system structure
The design system is structured into multiple files, creating a flexible architecture that can connect with other systems through the foundations file or design tokens. It also includes dedicated files for base components, data visualization elements, icons, and illustrations.
Design system structure
The design system is structured into multiple files, creating a flexible architecture that can connect with other systems through the foundations file or design tokens. It also includes dedicated files for base components, data visualization elements, icons, and illustrations.
Design system documentation
The files are organized in sections and each component contained the Master component as well as documentation with variants, status and tokens.
Design system documentation
The files are organized in sections and each component contained the Master component as well as documentation with variants, status and tokens.
Design system documentation
The files are organized in sections and each component contained the Master component as well as documentation with variants, status and tokens.
The Design
Documentation of the atoms in the J&J design system
The whole design system is based in variables and has different color modes
Documentation of the components in the J&J design system
Data visualization design system
Documentation of the icons in the J&J design system
Some screens designed by different teams using the design system
Core Insight
The tokenized design system enabled teams to move faster while efficiently supporting multiple brands.
The Code
Documentation of the atoms in the codebase of the J&J design system
Documentation of the atoms in the codebase of the J&J design system with different color modes
Documentation of the components in the codebase of the J&J design system
Documentation of the components in the codebase of the J&J design system
Documentation of data visualization components in the codebase of the J&J design system
Documentation of data visualization components in the codebase of the J&J design system
Outcome
The design system adoption was the 70% of product portfolio, I trained multiple Product Managers across the organization on the DesignOps framework including the design thinking process in a program called train the trainers, and contributed to the creation of the Product Design chapter in the official PM Playbook adapted to be used with SAFe Agile. I also integrated the design system documentation into the company-wide knowledge base.
On the delivery side, I built a comprehensive design system in Figma and translated it into production-ready code using MUI, leveraging both AI tools and my deep CSS expertise. The system was developed to align with the company’s standardized tech stack, built on React and Next.js.
Teams
Adoption
Adoption
Adoption
%
%
%
Desing dev handoff time
Distribution Centers
300
%
%
%
Dev times
Dev times
%
%
%
UI inconsistencies
UI inconsistencies
The Design
The code
Atoms Figma
Atoms Figma
Components Figma
Components Figma
Data visualization Figma
Data visualization Figma
Icons Figma
Icons Figma
Screens designed with the design system
Screens designed with the design system
Atoms Figma
Atoms Figma
Components Figma
Components Figma
Data visualization Figma
Data visualization Figma
Icons Figma
Icons Figma
Screens designed with the design system
Screens designed with the design system
The code
Atoms codebase
Atoms codebase
Atoms codebase color mode
Atoms codebase color mode
Components codebase
Components codebase
Components codebase
Components codebase
Data visualization codebase
Data visualization codebase
Data visualization codebase color mode
Data visualization codebase color mode