Johnson & Johnson Design System
Streamlining the design and development process by creating a library of 50+ reusable components, patterns, and guidelines that unite Johnson & Johnson product teams around a common visual language
Role
Product Designer
Team
3 product designers, 1 PM, 2 developers
Timeline
Sep - Dec 2023
Background
Johnson & Johnson Innovative Medicine operates in multiple regions across the world and employ a different design agency for each region. These design agencies do not have a common design language to ensure consistency across all digital products.
Working in the Experience Transformation group at TCS, my team was responsible for building a design system to increase the speed and productivity of the Johnson & Johnson design agencies.
To support best practices and consistency of user interface design, we created guidelines, a library of UI components, and documentation to enable any design agency to easily build digital tools for Johnson & Johnson.
This project resulted in better consistency and usability for Johnson & Johnson Innovative Medicine sites, streamlined collaboration between designers and developers, and helped teams quickly build beautiful products.
Using variables to change properties for the button component
As a UX designer on this project, I had two main goals — create a library of scalable UI components that could be used by all Johnson & Johnson Innovative Medicine brands, and structure the design system in a way that designers and engineers (users) could easily follow.
After much trial and error, and multiple discussions with our internal team, we decided on an atomic design system with brand-agnostic components. I collaborated with my fellow UX designer to document style and brand guidelines for each Innovative Medicine brand. Next, I created a set of responsive UI components in Figma.
To foster ease of use, I populated each component in our Figma library with usage guidelines, educated the team on usage, and provided a document highlighting accessibility and best practrices.
Impact
Reduced project time by 45%, facilitating smoother collaboration between designers and developers.
Cut review cycles by 20%, streamlining the design and development process.
Established a centralized source of truth, aligning design elements with J&J brand identity.