{"id":30709,"date":"2021-06-23T07:31:11","date_gmt":"2021-06-23T14:31:11","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=30709"},"modified":"2024-05-20T00:10:40","modified_gmt":"2024-05-20T07:10:40","slug":"design-system-enterprise-webinar-summary","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-enterprise-webinar-summary\/","title":{"rendered":"Webinar Wrap-Up: From Style Guide to Interactive Design System in Enterprise"},"content":{"rendered":"\n
\"Webinar<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

The PDF documents also made it difficult to keep everyone informed of design updates. If someone had an outdated version, they wouldn\u2019t know how to follow the correct guidelines.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

With UXPin, Shectman and his team built atomic UI components<\/a> 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.<\/p>\n\n\n\n

<\/div>\n\n\n\n

The ongoing process of maintaining a design system<\/h2>\n\n\n\n

Designers at Johnson & Johnson typically work in two-week sprints. During this time, product development runs parallel to product design.<\/p>\n\n\n\n

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\u2019s 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.<\/p>\n\n\n\n

Getting developers involved in the design process<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Frequent meetings keep everyone focused on a common goal that offers aesthetic appeal and excellent functionality.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A demonstration of UXPin in action<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

<\/div>\n\n\n\n

What You Will Learn<\/h2>\n\n\n\n