Skip to main content

One working system for eighteen pharmaceutical brands

Janssen

An expired link should tell the person what happened and what they can do next.

View original
Original Janssen expired-link design review with the expired status and resend action considered together

The review connects the expired status with a next action. The comments show the design question still being discussed.

Source: Original Janssen CarePath design-review artifact, cropped for portfolio use

My decision

Review the status, resend action and required wording together, then compare the desktop and phone states.

The design change
I led UX across eighteen brands and managed two designers. We kept shared patterns and brand-specific copy in the same Figma review.
What happened
The team produced reviewed designs and handoff work. Project records list more than 2,000 approved desktop and mobile screens. The artifact shows a design review, not a measured launch result.
Role
Lead UX Designer
Facts
Client
Janssen
Employer
IBM
Dates
May 2021 to May 2022
Scope
Eighteen pharmaceutical brands
Team
Managed two designers
Working system
Shared Figma design system
Output
More than 2,000 approved desktop and mobile screens

Review regulated copy in context

CarePath flows combined interaction requirements with brand copy, legal language, and FDA review. The team needed to review required copy in the state and layout where a person would encounter it.

I led UX at IBM and managed two designers through that review cycle. The design team mapped forms, authentication, messages, and claims as explicit screen states so the interaction, responsive layout, and required copy could be reviewed together.

Related desktop and mobile savings designs place program copy beside an enrollment action. Their copy and action wording differ. These are historical design artifacts, not current program or eligibility guidance.

Review the program language with its action

View original
Desktop DARZALEX savings dialog with program text beside an illustration, a close control, and an Enroll button

The desktop dialog keeps the program language and Enroll action in one view. The crop excludes the surrounding account page.

Source: Original Janssen CarePath design artifact, cropped from the supplied board for portfolio use

View original
Mobile DARZALEX savings dialog with an illustration beside the introductory text, program terms below, a close control, and a Register for the Savings Program button

The related mobile dialog places its program terms above the registration action. Its wording differs from the desktop design.

Source: Original Janssen CarePath design artifact, cropped from the supplied board for portfolio use

Treat regulated copy as interaction design

Put requirements, copy, and screen state in the same review artifact instead of adding regulated language after the interaction was settled.

Share patterns, preserve brand differences

Eighteen brands shared form and authentication patterns but had different content and program rules. The Figma system kept common interactions together and made each brand's differences visible to reviewers.

Compare form behavior in one sheet

View original
Design-system sheet of desktop and mobile text fields, menus, password controls, selectors, uploads, and error states

This shared sheet let reviewers compare form behavior and required copy across desktop and mobile versions.

Source: Recomposed from original Janssen CarePath design-system exports

Share the interaction structure

Keep common interaction behavior in the system, then express brand differences through reviewed content and visual treatment instead of forking the flow.

Account access, form validation, messages, and claims changed after a person acted or the system responded. Desktop and mobile layouts also had to preserve the same status and next action.

I led the review work. The system sheets put related states beside one another so reviewers could compare copy, actions, and desktop and mobile layouts.

The same review included password requests, email guidance, and validation. Those designs proposed the return path; they do not establish working email delivery or password enforcement.

See the states side by side

View original
Design-system sheet comparing desktop and mobile notifications, status labels, modals, patient cards, form-step chevrons, and connected tabs

Reviewers could check the status, message, and next action in both desktop and mobile layouts.

Source: Recomposed from original Janssen CarePath design-system exports

Give every scenario a way into the file

The enrollment files supplied by Intechnic used screen identifiers, named flows, and brand or program labels. In my walkthrough, I explain how I used them to find each step. Provider and patient enrollment each had desktop and mobile pages.

The index connected named scenarios to their proposed screen states. I could start with therapy selection, eligibility, patient information, or confirmation and follow the relevant part of the flow. The identifiers helped me navigate, although their order was not always sequential.

Follow the scenario index into the work

Read the scenario indexView original
Figma enrollment index with numbered Xarelto and Spravato scenarios connected to screen states

Each entry names a flow, program, and step. The recording shows me reading the identifiers and selecting entries in the supplied file.

Source: Original file walkthrough; design file supplied by Intechnic; canvas-only excerpt

Watch the scenario walkthrough, 28 seconds

Silent excerpt. The pointer follows the numbered enrollment entries and selects their Figma connections. Each label combines the flow, program, and step; the numbering is not always sequential. The narration is summarized in the text above.

See the connected statesView original
Overview of the provider mobile enrollment page, with scenario links running from the index to rows of screen states

The mobile page shows where the index leads. Connections reach specific states across the enrollment screens; this is design organization and prototype intent.

Source: Original file walkthrough; Intechnic-supplied design file; canvas detail

Follow the team's review workflow

My work on the shared Figma system also involved content changes and stakeholder feedback. The team workflow connects those activities: prepare components from Intechnic source files, apply content changes, build interactive states, and prepare review PDFs before development handoff.

Our component stage made room for variants and final copy. The review stage brought PDF feedback, prototype connections, edge cases, and approval into the same process.

Keep components and review connected

Components and contentView complete original
Team workflow detail showing creation of component variants, final content changes, and replacement of legacy components

The component stage connects the shared system to the copy and variants the team needs to review. Open the complete diagram for the full workflow.

Source: Original Janssen and IBM team workflow; detail of component preparation

When a status also needs an action

Our review work reached down to the relationship between a status and its next action. This note brings together an expired-link state, the need to resend, and the decision to remove links from status pills. It shows the team working through where the resend action belongs.

Separate the status from the next action

View original
Review card 006 with expired-link status pills, a request for a resend button, and the open question about links inside status pills

The review pairs the expired state with the need for a resend action, keeping the behavior beside the status design.

Source: Original Janssen team design review, card 006

Keep enrollment answers and consent status distinct

Keep the shared structure, vary the requirements

Enrollment made the value of the shared system concrete. The reviewed designs use the same completed, active, and upcoming section patterns across different program requirements. An earlier therapy choice remains visible with an Edit action while eligibility questions occupy the active section.

The screens show several related enrollment variants. They are not a recording of one person completing a single tested flow.

Scope

These design artifacts show proposed states and program variations. They do not establish working insurance verification, issued cards, production release, or measured enrollment results.

See the original eligibility design

View original
Express enrollment with editable completed therapy, active eligibility questions and upcoming sections

The completed therapy stays reviewable above the active questions. Upcoming sections show what remains. The time estimate and program wording are historical draft copy.

Source: Original Janssen CarePath design artifact; fictional demonstration data

A consent request is not verified consent

A related rebate-enrollment variant makes a consequential distinction. Choosing payment to a treatment site requires an assignment-of-benefits form. If the form is missing, staff can request it through an electronic link. The subsequent design keeps payment directed to the patient until the form is verified.

These screens show the proposed rule and its explanation. They do not establish that links were sent, forms were verified, or payments were routed. The fixture name and email also differ in the follow-up draft.

Keep the pending authorization visible

View original
Payment-information design with treatment-site payment selected, missing assignment of benefits and an electronic-link question

Choosing payment to the treatment site introduces the authorization question. When the form is missing, the design offers an electronic request.

Source: Original Janssen CarePath design artifact; fictional demonstration data

View original
Electronic-link submission state explaining that payments continue to the patient until authorization is verified

Submitting the link does not immediately change the payment destination. The draft says the check continues to the patient until the authorization form is verified.

Source: Original Janssen CarePath design artifact; fictional demonstration data

Keep the patient queue in view

The dashboard separates work needing attention from other updates. Patient views distinguish enrollment, benefit verification, prior authorization, and claims. An open record keeps the selected row visible beside its details and previous/next controls.

Task-specific views and configurable columns kept the relevant status and next action in view. The team reviewed those patterns alongside required program copy in the shared Figma system.

Inspect a record without losing the queue

View original
Patient details open beside the dashboard with the source row highlighted and expandable program sections

The selected patient stays in context. The side panel groups summary, savings program and insurance information without replacing the queue.

Source: Original Janssen CarePath design artifact; fictional demonstration data

Keep the record connected to the queue

Open details beside the selected row so staff can inspect a patient and move to the next record without replacing the list.

The original portal screens use fictional demonstration records. They show design states, not real patient information or connected clinical services.

Route a message with incomplete information

The message form asks whether the sender knows the recipient's extension. If they do, one field handles routing. Otherwise, the form asks for therapeutic area and state. Patient association stays beside those fields.

Compare the two routing paths

View original
New Message design with Yes selected and an extension field beside optional patient association

Known recipient: the extension field provides a direct routing path. Product, condition and subject remain in the same form.

Source: Original Janssen CarePath design artifact; fictional demonstration data

View original
New Message design with No selected and therapeutic-area and state fields replacing the extension field

Unknown recipient: therapeutic area and state replace the extension field while preserving the rest of the message structure.

Source: Original Janssen CarePath design artifact; fictional demonstration data

These are proposed routing states, not a tested clickthrough. They do not establish delivered messages or response performance.

What the team delivered

I led UX and the review work, managing two designers in the shared Figma system. The designs brought interaction states, required copy, and desktop and mobile layouts into the same review.

Results

  • The project record lists more than 2,000 approved desktop and mobile screens across eighteen brands.
  • Janssen extended IBM's engagement.

Evidence limit

Surviving records do not define how variants or revisions were counted. They record that Janssen extended IBM's engagement, but they do not establish what caused the extension or attribute it to me, the design team, or the design system.

Resume and contact