Back

Johnson & Johnson

Supply

chain

maps

Improved delivery of medicines worlwide

Atoms

Components

See Figma file

Johnson & Johnson

Supply

chain

maps

Improved delivery of medicines worlwide

Atoms

Components

See Figma file

Johnson & Johnson

Supply

chain

maps

Improved delivery of medicines worlwide

Atoms

Components

See Figma file

Use case

Context

Context

Context

Project

Project

Project

UX Process

Research

Research

Research

Define

Define

Define

Ideate

Ideate

Ideate

Prototype

Prototype

Prototype

Test

Test

Test

Dev specs

Dev specs

Dev specs

Results

Outcomes

Outcomes

Outcomes

Metrics

Metrics

Metrics

Awards

Awards

Awards

Lab

Lab

Trials

Trials

Production

Production

Global delivery

Global delivery

Local delivery

Local delivery

Sales

Sales

J&J operates one of the largest and most complex supply chains in the world

The vision:

The Supply Chain Maps app was created to unify fragmented data, provide real-time visibility, and empower 12,000+ managers worldwide to make faster, smarter, and safer decisions.

J&J operates one of the largest and most complex supply chains in the world

The vision:

The Supply Chain Maps app was created to unify fragmented data, provide real-time visibility, and empower 12,000+ managers worldwide to make faster, smarter, and safer decisions.

J&J operates one of the largest and most complex supply chains in the world

The vision:

The Supply Chain Maps app was created to unify fragmented data, provide real-time visibility, and empower 12,000+ managers worldwide to make faster, smarter, and safer decisions.

My

role

I led the end-to-end redesign of the Value Chain Maps platform, originally developed by business analysts and engineers, my focus was to: - Integrate real user needs into the product - Improve platform usability - Rebuild the UI with a new design system aligned to the updated J&J brand - Enhance accessibility and user effectiveness I collaborated closely with Product Managers, Business Analysts, Capability Managers, and Software Engineers.

My

role

I led the end-to-end redesign of the Value Chain Maps platform, originally developed by business analysts and engineers, my focus was to: - Integrate real user needs into the product - Improve platform usability - Rebuild the UI with a new design system aligned to the updated J&J brand - Enhance accessibility and user effectiveness I collaborated closely with Product Managers, Business Analysts, Capability Managers, and Software Engineers.

My

role

I led the end-to-end redesign of the Value Chain Maps platform, originally developed by business analysts and engineers, my focus was to: - Integrate real user needs into the product - Improve platform usability - Rebuild the UI with a new design system aligned to the updated J&J brand - Enhance accessibility and user effectiveness I collaborated closely with Product Managers, Business Analysts, Capability Managers, and Software Engineers.

The roadmap

The roadmap

The UX
process

The UX
process

The UX
process

The core user

Name

Name

Name

Jill Tanner

Jill Tanner

Location

Location

Location

New Jersey, USA

New Jersey, USA

Position

Position

Position

Value Chain Manager

Value Chain Manager

Age

Age

Age

42

42

Goals

Goals

  • Design and optimize an end-to-end pharma supply chain.

  • Design and optimize an end-to-end pharma supply chain.

  • Ensure product availability across all geographies.

  • Ensure product availability across all geographies.

  • Identify dependencies, risks, and inefficiencies.

  • Identify dependencies, risks, and inefficiencies.

  • Facilitate cross-functional alignment.

  • Facilitate cross-functional alignment.

  • Visualize relationships between suppliers, manufacturing sites, and distribution centers.

  • Visualize relationships between suppliers, manufacturing sites, and distribution centers.

  • Highlight critical nodes, bottlenecks, and risk-prone dependencies.

  • Highlight critical nodes, bottlenecks, and risk-prone dependencies.

  • Overlay regulatory zones, shipping constraints, and lead times.

  • Overlay regulatory zones, shipping constraints, and lead times.

  • Ability to simulate alternative supply chain scenarios (e.g., dual sourcing).

  • Ability to simulate alternative supply chain scenarios (e.g., dual sourcing).

  • Integration with ERP (SAP), MES, WMS, and regulatory databases.

  • Integration with ERP (SAP), MES, WMS, and regulatory databases.

  • Ability to collaborate across teams (e.g., digital twin capabilities, version control, annotation tools).

  • Ability to collaborate across teams (e.g., digital twin capabilities, version control, annotation tools).

Frustrations

Frustrations

  • Lack of visibility into networks.

  • Lack of visibility into networks.

  • Inconsistent data sources and fragmented systems make it hard to get a unified view.

  • Inconsistent data sources and fragmented systems make it hard to get a unified view.

  • Managing unexpected disruptions (e.g., regulatory shutdowns, geopolitical issues, pandemics).

  • Managing unexpected disruptions (e.g., regulatory shutdowns, geopolitical issues, pandemics).

  • Difficulty in modeling and simulating changes in supply chain design.

  • Difficulty in modeling and simulating changes in supply chain design.

  • Comply with strict validation processes before implementing supply chain changes.

  • Comply with strict validation processes before implementing supply chain changes.

  • Struggle to communicate complexity of the supply chain to non-experts and executives.

  • Struggle to communicate complexity of the supply chain to non-experts and executives.

Usability test

The usability testing divided the app in 3 sections, explore maps, edit maps, create maps, the test consisted in:

The usability testing divided the app in 3 sections, explore maps, edit maps, create maps, the test consisted in:

0
0

Participants

0
0

Tasks

0m
0m

Duration

Moderated test

Made on the previous solution to identify pain points and uncover missing features.

Made on the previous solution to identify pain points and uncover missing features.

Made on the previous solution to identify pain points and uncover missing features.

All visuals use obfuscated data to protect confidentiality.

“Not sure what to do next on the map creation”

Nils

“Not sure what to do next on the map creation”

Nils

“I can't understand well the product flow, it take me a while every time.”

Nils

“I can't understand well the product flow, it take me a while every time.”

Nils

Test results

The success rates across testing phases indicate that the map creation process is where users struggled the most, followed by editing and certain visualization features.

0%

Explore maps

0%

Edit maps

0%

Create Maps

Problems and Hypothesis

Problems and Hypothesis

After analyzing the notes from the test I came with a number of hypothesis.

Expore maps: The screen feels cluttered, and the product flow is not following an order, making it hard for users to clearly interpret the map.

Explore maps: Users cannot quickly visualize product quantities at a glance, one of the most important required features.

Edit Maps: The process is overly complex, requiring manual drawing of the nodes, and go across modals, requiring help for developers, that slow users down.

Create maps: Require help from dev teams also require creation of each step manually and drawing each box, taking an excel as a reference.

Apply design principles establishing clear visual hierarchy and information, consistent spacing, typography scales, iconography and progressive disclosure to reduce cognitive load.

Create the initial view combining nodes with sankey diagram elements to display the flow of products from location to location

Create the initial view combining nodes with sankey diagram elements to display the flow of products from location to location

Reorganize menus per categories, and change the titles to more specific actions also redesign the map selection form and map creation flow introducing a wizard with stepper status.

Problems to solve

  • Difficulty selecting maps: Users struggle to identify and choose the correct map for their needs.

  • Map versioning confusion: Multiple versions create uncertainty about which one is up to date.

  • Lack of flow clarity: Users find it challenging to understand how the map flows and connects.

  • Complex map creation: Building a new map is a complicated process, requiring assistance or guidance.


Success metrics

The main success metric for the succesfull completion of tasks was the reduction in the number of requests of help for simple tasks to the development team.

Problems to solve

  • Difficulty selecting maps: Users struggle to identify and choose the correct map for their needs.

  • Map versioning confusion: Multiple versions create uncertainty about which one is up to date.

  • Lack of flow clarity: Users find it challenging to understand how the map flows and connects.

  • Complex map creation: Building a new map is a complicated process, requiring assistance or guidance.

Success metrics

The main success metric for the succesfull completion of tasks was the reduction in the number of requests of help for simple tasks to the development team.

Problems to solve

  • Difficulty selecting maps: Users struggle to identify and choose the correct map for their needs.

  • Map versioning confusion: Multiple versions create uncertainty about which one is up to date.

  • Lack of flow clarity: Users find it challenging to understand how the map flows and connects.

  • Complex map creation: Building a new map is a complicated process, requiring assistance or guidance.


Success metrics

The main success metric for the succesfull completion of tasks was the reduction in the number of requests of help for simple tasks to the development team.

The wireframes

The wireframes

During a co-creation workshop, we transformed hypotheses into potential solutions, visualizing them through wireframes to guide the next design iteration.

During a co-creation workshop, we transformed hypotheses into potential solutions, visualizing them through wireframes to guide the next design iteration.

The prototypes

Based on the analyzed hypotheses, I designed a prototype focusing on the flows with the highest pain points, ensuring consistency by applying the J&J Design System.

Based on the analyzed hypotheses, I designed a prototype focusing on the flows with the highest pain points, ensuring consistency by applying the J&J Design System.

The

design

Select map screen

Validator details metrics

Governance active voting proposal

DEX liquidity positions and Swap executions

The

design

Select map screen

Validator details metrics

Governance active voting proposal

DEX liquidity positions and Swap executions

The

design

Select map screen

Validator details metrics

Governance active voting proposal

DEX liquidity positions and Swap executions

Final testing

Each hypothesis has been mocked in high fidelity wireframes and tested with end users before handoff to development.

Problem

The timeline is hard to read, as it relies on hover for details and requires a large legend to interpret multiple statuses.

Hipothesis

Show key information with chips to avoid hover and long legends.

Metric

Time on task, Error rate How long it takes users to make a set of tasks that involve the use of the timeline.

Usability testing results

After the redesign the Time on task, has significantly been reduced in a 66% from 3 minutes per task to 1 minute, and 0% error rate.

Design system

The handoff to development was made using the J&J design system, project that I also did for J&J.

Outcome

The platform was designed, developed and launched on time with many key new features, increasing the relevance of the information this was measured trough new and returning visitors and engagement.

Changes in the design process of the dev team where introduced as improving team workflow for future feature releases.

The platform was designed, developed and launched on time with many key new features, increasing the relevance of the information this was measured trough new and returning visitors and engagement.

Changes in the design process of the dev team where introduced as improving team workflow for future feature releases.

0%

Time cost savings

0%

Adoption rate

0%

Session frequency and duration

0%

Time cost savings

0%

Adoption rate

0%

Session frequency and duration

0%

Time cost savings

0%

Adoption rate

0%

Session frequency and duration

Awards

This app was recognized with the award, process or technology innovation of the year 2025

This app was recognized with the award, process or technology innovation of the year 2025