THE ELEVATOR PITCH
Janssen Pharmacueticals is part of the Johnson & Johnson family of companies. Janssen is focused on addressing some of the most complex and serious diseases in 5 major healthcare areas: Cardiovascular & Metabolism, Immunology, Oncology, Infectious Disease & Vaccines and Neuroscience. The project aimed at creating a single, integrated platform for patients, healthcare providers, and hub partners to improve the quality of care & outcomes of patients.
IBM iX — 2017
Role: Lead UX/Visual Designer
Client: Janssen Pharmaceuticals
UX Design Team:
Barbara Wyse, UX Manager
Brendan Appe, Lead Visual Designer
Colleen Kaman, Content Strategist
Over the course of a year, we took a fragmented & siloed experience and designed a unified portal for patients, providers and hub partners to more easily access resources & services. The following Case Study will focus on the Design System implemented to maintain & align 20+ isolated product sites & portals.
EXPERIMENTING WITH COMPONENTS
In order to quickly iterate with confidence, our design team needed access to a single source of truth—or Golden Record—that allowed for a scalable UI language & streamlined UX guidelines. Because this project involved portals for patients as well as providers, we needed to build a library of design patterns, rules, and UX guidelines to prevent inconsistencies within the two platforms.
In order to attain a Golden Record, I first started experimenting with two different products that the system would be applied to—the Patient & Provider Portals—discovering, establishing, and stress-testing a library of components & patterns.
USING SCIENCE (SORT OF)
While searching for the best methodology to utilize, I came across Brad Frost’s Atomic Design (IBM’s Carbon Design System had yet to be developed).
If you are already familiar with Atomic Design, feel free to ignore my quick breakdown on the right (or below on mobile).
The Atomic Design methodology describes the smallest UI elements as atoms which serve as the elemental building blocks of an interface. These atoms can group together to form molecules which become simple UI components. Molecules bind together and turn into relatively complex components called organisms, that form discrete sections of an interface. Templates place those components within a layout and demonstrate the design’s underlying content structure, which pages then fill to demonstrate the final UI and test the resilience of the design system. SCIENCE!
EMPLOYING THE POWER OF SKETCH LIBRARIES
After determining my methodology, I created an adaptive & responsive library of UI components, synced & made available to my team via Sketch Library. This allowed the team to quickly construct UIs & flows using consistent, pre-made, and flexible Sketch symbols. Thus allowing them to focus on the user experience and not have to re-design the product over & over.
Below is a sample of the Design System & the Sketch Library of components.
REAPING THE REWARDS
Creating & implementing this Design System allowed us to:
INCREASE EFFICIENCY
It was much easier to divide & conquer without worrying about rebuilding the same parts or diverging on UI elements. It also streamlined our work with business analysts, content, marketing, and development.
IMPROVE CUSTOMER FOCUS
The designers & developers were able to spend less time thinking about design details & focus on crafting the best user experience since everything had already been agreed upon.
PROVIDE CONSISTENCY
As these platforms were massive in scope—involving multiple therapy areas & their respective medications—referring to the Design System helped us create a consistent experience across both the Patient & Provider Portals.
MAKE HANDOFF EASIER
This multi-year project led to a change in resources and by developing this Design System, we reduced the friction in our handoff process and provided an easier onboarding experience for any new designer or project team member.