The challenge
A pharmaceutical client needed to understand the patient journey across the full cycle of a disease, and to do it for several diseases and many countries. Behavioral scientists researched and wrote the content of each map. My team’s job was to give that content a form: a universal map design that works for every disease and every market.
The first plan covered 40 maps (4 diseases in 10 countries). Later, we also built smaller maps for other diseases, based on the same foundations. Each report could reach around 100 pages.
maps at launch: 4 diseases × 10 countries
weeks per country before, days per disease after
designers and content authors sharing one system
Where we started
Earlier maps had been made by a graphic designer in Adobe InDesign. They looked good, but they were hard to work with, especially for a team of three designers who needed to produce many maps in parallel. Every map was built almost from scratch, and there was no shared structure to rely on.
The setup around the maps made it harder still. Each map had slightly different requirements, content came from around ten people, and the review process meant a steady flow of changes from behavioral scientists.
My role
I worked as one of three designers on the project, shaping the system together with the team and the content authors. For a period, I also acted as Design Lead. In that role I onboarded new designers to the project and handed the finished reports over to the main team.
The biggest improvements came from the base all the maps are built on: navigation, a scalable map component and a consistent set of steps, icons and phase colours. Together, they made these large reports something a new designer could pick up and work on.
Process
Understanding the old workflow
We reviewed the existing InDesign maps and what made them slow and difficult to maintain for a team of designers.
Agreeing on structure with the content team
Through many conversations with the behavioral scientists, we aligned on what every map has to show and where maps can differ, since each disease and market has its own needs.
Moving to Figma with a design system
We rebuilt the maps in Figma as a set of universal, reusable components, flexible enough to cover every variant without breaking the visual consistency.
Designing for constant change
We planned the system around frequent revisions. In review, a single map could collect around 100 comments, and the scientists often added further corrections afterwards.
Scaling to more maps
We delivered the full set of 40 maps, then used the same foundations for smaller maps for other diseases.
The system
Every map is divided into disease phases, and each phase into smaller steps of the patient’s journey. The base was designed so one structure could serve every disease and every country, and still be easy to use for people who did not build it.
Top and bottom navigation
Two navigation bars let the reader click through the steps of the patient journey and between the phases of the disease, so a long report stays easy to move around in.
A map component that scales
One scalable map component, split into phases and smaller steps. The same base works for every disease and every country.
One step component, 200 steps
The step component was built so that it could produce a set of four maps, around 200 steps in total. Every step has its own icon, and the component stays simple to use.
Colour assigned to every phase
Each phase has its own colours, so setting up a new map is quick and consistent. If a phase does not appear in a given disease, it can simply be left out.
What made it hard
Challenge 1
Changing how a designer works
The earlier maps were created by a graphic designer who did not want to move to Figma. We had to find common ground, and to build components universal enough to earn trust from everyone working with them.
Challenge 2
Constant changes
With around 100 comments on a map and new corrections from behavioral scientists even during review, the system had to make changes quick and safe, not painful.
Challenge 3
A tight timeline
Priorities between management and our design lead were not fully aligned, which left us with a short schedule. I later took over as Design Lead, when the system was already working. I focused on staying neutral in conflicts and calming them down, so the team could keep its attention on the work.
Before & after
Before
- Maps built in Adobe InDesign
- Hard for the design team to use
- About 3 weeks per country for one designer (4 diseases)
After
- Maps in Figma with a design system
- Universal components for every disease and market
- About 1 day per disease, 4 days per country
Results
The design system cut delivery time from about three weeks per country for a single designer to one day per disease, or four days for a whole country. The new setup also made the work easier to share between designers, and the same foundations supported additional, smaller maps for other diseases.
The system was refined enough that any designer who joined the team could start working on these complex reports, some of them around 100 pages long, without needing to learn each map from scratch.
Retrospective workshops
Besides the design work, our design team was responsible for organising the project’s retrospective workshops: two online and one in person. They gave everyone space to talk about how we were working together, and the team really liked them.
Learnings
A design system is also an agreement between people. Most of its value came from the conversations that shaped it, with designers and with content authors.
We worked as two teams for a client with high expectations, so we had to learn how to work with each other and how to communicate. On top of that came cultural differences between Poland and Ireland, and a language barrier. It was a lot. But in the end we felt that we could rely on one another, and that communication is the key.
Staying neutral and calm under time pressure helped the team keep working together.