Adopting Design Systems in Enterprise with Johnson & Johnson

When any new leader walks into an enterprise with more than a century of history—as Johnson & Johnson does—they know they must adapt to some of the existing processes. Improvements in technology, however, have made it necessary for all corporate designers to turn processes into even more efficient methods. If you start a new job tomorrow, you might find that you need to turn old style guides into design systems. Ultimately, these new systems make life easier for you, your design team, and other employees.

Ben Shectman, a UX design expert with decades of management experience, found himself in that situation. He became the Experience Design Expert Service Leader at Johnson & Johnson in 2019. The company had two style guides that UX designers used for language and graphics. Unfortunately, the style guides were only available as PDF files. It was clear to Shectman that he needed to adopt design systems and move away from the PDF style guides.

Table of Contents

• Design systems offer a single source of truth
• Atomic-based design systems improve workflows
• Create design systems for developers and designers
• Try UXPin Merge

Design systems offer a single source of truth

PDF and print style guides present a considerable problem: you can never know whether you have updated all of them to meet the enterprise’s current standards. You can hold as many meetings as humanly possible, but an outdated style guide will manage to sit in someone’s desk drawer, just waiting to make your life more difficult a year or two from now.

Design systems offer a single source of truth that exists in a digital format you control. Some companies get by fine using established design systems like Material Design, Carbon, or Fluent Design System. A robust, multinational corporation like Johnson & Johnson, however, needs a unique design system built from the ground up.

You maintain complete control over your design system, build it in a design tool such as UXPin, have the components coded and stored in a Git repository. When you make an update, everyone who accesses it will only experience the new version. You never have to worry about outdated copies because you control the source for the company’s digital products.

Design systems based on atomic design processes improve workflows

Shectman decided to build the J&J interactive design system with atomic design. Atomic design serves J&J well because it lets designers break down features and designs into their most basic components (called “atoms”). Using UXPin, anyone in the company can potentially access the approved components and create new tools that comply with J&J’s guide.

In reality, Johnson & Johnson’s design team makes its internal products. The team even created a process that makes it easier for Shectman to approve new components and add them to the design system.

Regardless of who actually builds a prototype, the atomic design improves workflows by providing all of the approved components. From there, you just choose the components you need and adjust them to meet the project’s goal.

Create design systems for developers and designers

Johnson & Johnson’s design team meets with developers regularly to gain insight into their approach to building products. Getting developers involved makes it easier for designers to avoid concepts that don’t function well when put into code.

Building an interactive design system is a great start to improve design consistency. You can go one step further and try out a new technology called Merge. It makes it even easier for enterprise users to bring designers and developers together. The all-in-one designing and prototyping app powered by code, allows you to bring components from developers’ libraries (from Git repository or Storybook) and use them in your designs. These components keep all the interactivity and are still production-ready, which saves a lot of handoff troubles. It speeds up building digital products; both the design and development process.

Everyone also benefits from Merge’s ability to make prototypes that function like finalized products. Whatever you design with Merge technology, will work exactly the same after the development team completes the project. 

Try UXPin Merge

Shectman and members of his design team offer a deeper look into their process in this webinar. It includes a demonstration of a J&J designer using their interactive design system to transform an outdated tool into a new version with better functionality and aesthetic appeal. Go beyond a design system and bring UI code components to the UXPin editor. Make it easier for designers and developers to create prototypes from approved components in a design system. Request access to UXPin Merge so you can speed up your product development process and make it smoother.