Johnson & Johnson

Johnson & Johnson

Johnson & Johnson

Johnson & Johnson

Design Ops

A shared knowledge base for empowering teams to work with clarity, speed, and consistency.

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.

0

Designers

0

Developers

Distribution Centers

300

0

Stakeholers

0

Base components and variants

The challenge

I took on the challenge of leading the creation of a design system to support digital transformation. To make it happen, I asked colleagues from different projects to form a dedicated system team using a % of their time allocated to design system.

With thousands of designers embedded across product teams worldwide, each with varying levels of expertise, it was clear that a shared knowledge base was essential. My vision was to align teams and ensure consistent design quality across all products.

More than just a component library, a DesignOps strategy provides structure and clarity. It helps teams understand where they are in the process, how to move forward, and which tools to use. It becomes a practical, accessible toolbox of design knowledge that empowers everyone involved.

Design Thinking sprints

Research sprint

4 Sprints

Empathize

Design of presentation of the idea

Stakeholder aligment core global PMs, Architects, Designers, brand managers, and Devs

4 Sprints

Define

Tech aligment

Prioritization workshops

Roadmap of integration 70% of portfolio

SOW

Sprints per components batch

Week 1

Ideate

Brainstorming the component shape and behavior

Prototype

Design the component in Figma

Test in design and mockups

Create the component documentation

Week 2

Development

Develop the component in code

Create dev documentation

Test

Handoff to front-end and Q&A

Deploy in NPM and documentation

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

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

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 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

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.

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

The Design