Webinar Wrap-Up: From Style Guide to Interactive Design System in Enterprise

When Ben Shectman came to Johnson & Johnson as a Certified Design Leader, he found useful tools for establishing visual and verbal guidelines across digital design projects.

Unfortunately, the guides came as PDFs that made it challenging for designers to follow the established rules. Whenever uncertain, they would have to confirm their design choices by browsing a lengthy PDF document.

The PDF documents also made it difficult to keep everyone informed of design updates. If someone had an outdated version, they wouldn’t know how to follow the correct guidelines.

Shectman decided to undertake a project that would make designing easier for everyone. He and a small design team turned the PDF guides into an interactive design system. Although migrating from a static style guide to an interactive design system took about six months of work, it has resulted in faster product development for internal and client-facing tools.

With UXPin, Shectman and his team built atomic UI components that they could use to create larger elements, templates, and pages. Instead of starting each design from scratch, they could pull from a Git repository that serves as their single source of truth. When they update the design system, the changes occur globally. That way, no one gets left with an outdated version.

The ongoing process of maintaining a design system

Designers at Johnson & Johnson typically work in two-week sprints. During this time, product development runs parallel to product design.

When designers feel that they need a new component for a project, they can submit a request to add the idea. Johnson & Johnson has a very small design team, so it’s possible for them to move forward with their work before receiving approval. If the new component seems applicable to other projects, it can get added to the design system.

Getting developers involved in the design process

A lead developer attends meetings to provide feedback. This gives the design and development teams opportunities to share their ideas and concerns. For example, a lead developer might recommend taking a different approach because the current plan will put significant strain on the development team.

Frequent meetings keep everyone focused on a common goal that offers aesthetic appeal and excellent functionality.

At the end of each design sprint, the entire development team meets with the designers to talk about moving the project forward toward a finalized product.

The meeting provides an opportunity for harvesting new ideas that might get added to the design system. As products, services, and technologies evolve, the design system must change to accommodate emerging needs. Not all of the new concepts get added to the design system. Those that stand out as critical new approaches, however, can be included easily.

A demonstration of UXPin in action

About halfway through the webinar with Johnson & Johnson, designer Gil Gerard Austria provides a demonstration of how the team uses UXPin and their in-house design system to turn old, static forms into interactive, code-based designs that they can test as prototypes.

The demonstration shows the power of reusing components and testing fully functional prototypes. Gil completes his hi-fi design in less than 10 minutes. The result has a more pleasing look and functions better than the previous version.

What You Will Learn

• Johnson & Johnson’s approach to XD the design uses the Six-I strategy (Immersion, Insights, Ideate, Iterate, Implement, Improve) that focuses on building human-centred products [6:01].
• Ben Shectman describes the process he and his team followed while turning Johnson & Johnson’s static design guidelines into a dynamic design system [9:10].
• “Part of the reason we within the corporate business technology experience design team chose UXPin as our preferred prototyping tool of choice is because… we focus on applications that J&J’s workforce uses to get their jobs done… These transactions tend to be much more data-driven. Much more form-driven.” [10:04].
• The first step of creating the design system was taking content from earlier static guidelines and translating them into interactive, shareable pages [12:14].
• The design team created instructional videos to help employees use the JNJ design system [14:24].
• Translating a style guide into reusable components through atomic design [15:15].
• Gill Austria demonstrates turning a style guide into components of atomic design [17:49].
• Gill Austria offers a step-by-step demonstration of using UXPin and J&J’s design system to update an old tool [32:17].
• Sage Young demonstrates the benefits of code-based design with UXPin [55:45].

Watch the whole webinar here!