Unified Design System for Johnson & Johnson
Overview
Johnson & Johnson worked with multiple partner agencies to create its websites. This created inconsistencies in layout, components, accessibility, documentation, and development handoff.
We created a unified design system to give designers, developers, and agency partners a shared source of truth. The system included reusable Figma components, brand and style guidelines, zeroheight documentation, and Storybook developer code.
I supported research synthesis, component design, documentation, prototyping, and handoff across Figma, zeroheight, and Storybook.
Client
Johnson & Johnson Innovative Medicine
Role
UX Designer
Team
6 UX designers, 2 senior UX designers, developers, producer
Duration
3 months (October - December 2023)
Tools
Figma, Storybook, zeroheight
zeroheight documentation for each component
Impact
The design system helped J&J create a more consistent and efficient website-building process.
Reduced project timelines by 45%
Cut review cycles by 20%
Designed and documented 50 reusable components
Created a centralized source of truth across Figma, zeroheight, and Storybook
Supported WCAG 2.2 accessibility standards
Improved collaboration between designers, developers, internal teams, and external agencies
Created an 80-page usage guide to support onboarding and adoption
The problem
J&J needed a shared system for designing, documenting, and building digital experiences. Without one central source of truth, teams were recreating similar components across projects, which slowed down delivery and made consistency harder to maintain.
The main challenge was to create a system that could standardize common website patterns while still being flexible enough for different brands, agencies, and content needs.
My role
I contributed to both the research and design system creation process. My work mainly included:
Auditing existing J&J website patterns and identifying repeated components
Supporting stakeholder workshops and synthesizing key findings
Designing and refining reusable Figma components with states, variants, styles, and variables
Documenting component usage, best practices, and accessibility guidance in zeroheight
Process
1. Auditing the existing ecosystem
Reviewed existing J&J websites to understand how digital assets were being designed and built to identify repeated patterns, inconsistencies, and areas where teams were duplicating work.
Key findings included:
no single source of truth for website components
inconsistent design patterns across digital assets
repeated design and development effort
accessibility requirements that needed to be embedded earlier in the process
Miro board used during the Design Thinking Workshop
2. Understanding system users
The design system needed to support multiple user groups, not just designers. We created personas for key users such as brand product managers, agency representatives, experience design leads, development leads, and digital experience directors.
This helped us understand how different teams would search for components, use documentation, approve designs, and implement the system in real projects.
Condensed versions of the personas
3. Designing reusable components
Using insights from the audit, we helped create 50 reusable Figma components. These components were built with auto layout, variants, states, styles, and variables to make them easier to reuse and maintain.
The system included:
grid architecture
typography and color guidance
reusable UI components
component states
accessibility considerations
documentation-ready specifications
Snippet of the Grid System Architecture that was submitted to the client. The same was also documented in zeroheight.
Using the atomic design methodology to structure our component system.
Each component had different states prototyped
Using styles and variables to build components
4. Creating documentation and handoff
Each component was documented in zeroheight with usage guidance, best practices, accessibility notes, and links to Storybook references. This helped designers and developers work from the same source instead of relying on scattered files or repeated explanations.
The documentation helped clarify:
when to use each component
how components behave across states
what accessibility considerations to follow
how design decisions connect to development implementation
Code snippets on zeroheight. Clicking on "Show code" takes the user to Storybook.
Code for component in Storybook.
5. Delivery and adoption
we reviewed the system with stakeholders and tested it with agency users. Their feedback helped refine the documentation and onboarding experience.
We also created an 80-page usage guide covering installation, debugging, resources, and implementation guidance. After delivery, the project moved into change management to support adoption across partner agencies.
Reflection
This project taught me that a design system is not just a component library. It is a coordination tool for large teams.
The most valuable part of the work was reducing ambiguity. By creating shared standards across design, documentation, and development, the system helped different teams make decisions faster and work with more confidence.
The biggest challenge was balancing consistency with flexibility. The system needed to create enough structure to reduce repeated work, while still allowing different brands and agencies to adapt components to their specific needs.
