Johnson & Johnson | Design System
As the UI/UX Team Lead, I directed a compact team comprising two designers in the creation of the design system for Johnson & Johnson’s three primary products: Chime Care, Chime Connect, and Vision Pro. This project was successfully executed over a span of three months.
- Design System
- June 4, 2023
- Team Lead
- jnjvisionpro.com
Background
Johnson & Johnson, a healthcare industry leader for over 138 years, aims to sustain growth and ensure product consistency by developing a new design system for both existing and future products.
The Problem
Johnson & Johnson encountered challenges with inconsistencies across their services, including Chime Care, Chime Connect, and Johnson & Johnson Vision, stemming from diverse design components, styles, and colors. The company aimed to unify the aesthetic and functionality of their existing platforms to serve as a benchmark for future projects.
Objective
Our objective was to create a unified design system that streamlined UI components, ensuring brand consistency and enhanced accessibility. This involved harmonizing design elements across services to improve the user experience and establishing a scalable, accessible design language.
Understanding the problem
Before starting the project, I encouraged the designers, myself included, to undertake the following actions:
The Process
To initiate the project, we began with Atomic Research to experiment with existing products, gather facts, insights, and conclusions for enhancement, focusing deeply on current states.
We refined our process through a series of experiments, rigorously examining each section of the page, including forms, modals, buttons, colors, and styles. Subsequently, we analyzed factual data, focusing on the components’ actual status and the product page’s aesthetics. Our findings led us to recommend standardizing elements like the J&J circular font, color palette, and font sizing. For greater flexibility, we opted for fully customizable components over fixed primary, secondary, and tertiary variants.
Gathering Insights | Research Desk
Developing the solution
In developing our design system, we built new elements and styles grounded in our research. Components were crafted using predefined templates, with each page dedicated to a specific component for comprehensive documentation. This approach facilitates detailed scenario mapping for both designers and developers, ensuring clarity and ease of use across our team.
Prototyping with the solution
To ensure the optimal functionality and performance of each component, we initiated a prototyping phase. This involved replicating existing screens for Johnson & Johnson products, incorporating the newly defined styles, text, colors, input fields, buttons, etc. Subsequently, we organized several sessions involving developers, designers, and stakeholders aimed at refining every aspect of these new components. As a result of these collaborative efforts, adjustments were made to optimize the sizing and color hierarchy across each project.
Results and takeaways
In the course of unveiling our design system, we collaborated in conjunction with other design teams, collectively comprising over 20 designers, to concurrently develop a design system for the broader array of Johnson & Johnson family products. Throughout the presentation, stakeholders were notably impressed by the meticulous attention to detail and organizational coherence exhibited in our design system, which was the product of a dedicated effort from a compact team of three designers, myself included as the team lead, in contrast to the system developed by the larger contingent of 20 designers.
The culmination of these efforts resulted in the amalgamation of both design systems to form a comprehensive suite of resources now accessible to developers and UI designers alike. Since its implementation in late 2023, the design system has been operational, offering enhanced performance metrics which can be observed firsthand via jnjvisionpro.com. It is important to note, however, that the full breadth of these components’ capabilities can best be experienced through the use of internal dashboards designed for our services.
Luis is one of those people whose energy is contagious, and I believe that's because he genuinely cares about creating value for customers through his work.
