Panorama 360

The problem

The 2022 portfolio recommender had fixed one kind of decision. Everything else in the portfolio picture was still assembled by hand, once a month. Panorama 360 rebuilt the whole landing page.

From the docs

Turn a monthly report into a daily landing page, scannable in thirty seconds.

• Who. Product managers running 20 to 40 pharmaceutical products each, and the division heads above them.
• What was happening. The old dashboard was opened once a month, to compile a report. Assembling that report took four or more hours a week by hand.
• How it felt. PMs were unsure whether they were focusing on the right products, and found problems too late.
• The deadline. A first release in six months, inside a thirteen month engagement, on a design system being repaired at the same time. That repair is sheet A-04.

What the research found

How. Three weeks shadowing eight PMs through their real week, then synthesis workshops: a Rumsfeld matrix, card sorting, and forty How Might We ideas ranked by pain and feasibility.

Finding 1 · Daily chaos. One answer meant opening six to eight modules. So one page has to answer the first question on its own.

Finding 2 · A confidence crisis. “I never know if I’m focusing on the right products.” So status comes first, before any chart.

Finding 3 · AI distrust. “Show me the data or I’m not acting on it.” So every recommendation carries its numbers and its reason.

Finding 4 · Always too late. “I feel like I’m always discovering problems too late.” So the page raises issues before the PM goes looking.

Finding 5 · Five mental buckets. Card sorting grouped everything into revenue, market, customer, supply chain and risk. So those became the categories, in the PM’s words. The shipped score chart carries six: the customer bucket split into customer intelligence and customer experience, and risk became long-term readiness.

The insight under all five: PMs did not want more data. They wanted clarity, and to feel confident rather than anxious.

Finding	Design decision
Six to eight modules per answer	One landing page that answers the first question alone
Unsure where to focus	Portfolio health first, products ranked by urgency
Distrust of black-box AI	Specific numbers and the reason on every card
Problems found too late	Proactive alerts inside each section
Five mental buckets	Revenue, market, customer, supply chain and long-term categories

Before and after

Before · the early Panorama report shell

After · the daily landing page

1. Everything at equal weight becomes one question first: am I okay overall.
2. Products are ranked by urgency, not alphabetically, with at most three metrics each.
3. Portfolio health is a chart with four states: critical, emerging, moderate and potential.
4. AI recommendations sit inside the section they belong to, with their reasoning one click away.

Three levels, one question each

• Level 1 · Portfolio overview. “Am I okay? Where should I focus?” Scannable in thirty seconds.
• Level 2 · Product deep dive. The five categories, comprehensive but organised.
• Level 3 · Action details. Full AI transparency: the reasoning and the data sources behind each recommendation.

AI that shows its working

• Specific, not vague. Every card states the number it is about.
• In context. Cards appear in the section they concern, not in a separate AI inbox.
• Plain language. No AI jargon, only what changed and why.
• The PM stays in control. Every card expands, can be acted on, or dismissed.

Six weeks, three fidelities

1. 

   01Weeks 1 to 2

   Low fidelity structure

   The bet

   Settle the structure before any visual design: which zones the page needs, and in what order.

   Carried forward

   The zones themselves, including critical actionable notifications as their own area.

   What the next stage fixed

   Tested with five PMs, vertical stacking read as a long report, not a scan, so the next stage moved to a sidebar and grid.

2. 

   02Weeks 3 to 4

   Data structure

   The bet

   Fill the structure with real finance tables and metric categories so the density could be judged.

   Carried forward

   The metric categories and the finance and market tables.

   What the next stage fixed

   With real data in, the hierarchy read flat and product health was a single number; the next stage added colour, the score chart and the AI cards.

3. 

   03Weeks 5 to 6

   Visual design

   The bet

   AI cards, colour, and a product health chart, so status reads before numbers.

   Carried forward

   Everything here went forward into the shipped page.

   Verdict

   Accepted. This is the direction taken ahead.

The calls that could have gone another way

Option B · one hue

Option A · colour-coded status, chosen

1. 13 of 20 PMs chose Option A.
2. They could read status from the colour without a legend.
3. They looked at the issues first and the charts second, not the usual F-shaped scan.

What changed

• 87 percent of AI recommendations accepted, because PMs could see why.
• Four hours to two a week spent assembling the portfolio picture.
• Daily active users up 39 percent after launch, for a page that used to be opened once a month.

From the docs

Scannable in 30 seconds. I feel confident I know my portfolio status.

That is a product manager, in feedback on the portfolio overview.

If I rebuilt it today: an accessibility pass

A concept, not the shipped product. I audited the shipped overview against WCAG 2.2 AA by measuring colour pairs straight from the screen, then rebuilt the same page with the same data so every failure is fixed. The rebuilt page was checked with axe against WCAG 2.2 AA: no violations.

Most of the shipped text already passed. Labels sit at about 6.7:1 and the filter text at about 9:1. The problems were elsewhere:

Check	Shipped, measured	Concept	WCAG 2.2
Score bar fill against its track	1.9:1, fails	6.8:1	1.4.11 non-text contrast, 3:1
Chart label on the red segment	about 4.4:1 at small size, fails	Dark text on white, 17:1	1.4.3 contrast, 4.5:1
Portfolio health	Colour alone tells critical from potential	Colour, a shape, a word and the score	1.4.1 use of colour
Selected filter	Shown by fill only	Fill plus a check mark, and a pressed state	1.4.1 use of colour
Second product’s button	An arrow with no visible label	Review Gsuboxone	2.5.3 label in name
Timestamps	About 10px	13px at 8.3:1	1.4.4 resize text
Status bars	Health colours on a pale track	Every bar at 3:1 or more against its track	1.4.11 non-text contrast, 3:1
Keyboard focus	Not specified	A 3px ring at 4.6:1, offset from the button	2.4.7 and 2.4.11 focus
Click targets	About 30 to 35px, passes	44px on every control, for touch	2.5.8 target size, 24px

Shipped · the portfolio overview, 2025

Concept · the same page after the accessibility pass

1. Health reads without colour: each category carries its score, a status word and its own shape.
2. Every button says what it opens, so a screen reader and a sighted user hear the same thing.
3. Bars, borders and focus rings all clear 3:1, so the page holds up for low vision and in sunlight.
4. Nothing smaller than 13px, and every control at least 44px tall.

With the team

• Lead designer for the product and for the Proton system under it. I led the research and the product direction and owned system governance; the three designers I led owned data visualisation, dashboard structure, and interactions.
• Three designers split between India and the USA, ten and a half hours apart, each owning an area. The rituals that held it together are on sheet A-04.
• Wireframes tested with five PMs before any polish, then a guerrilla test with twenty.

With engineering. The first thing an engineer said was that they had seen design systems die before. The answer was a question back, what do you need, and a deal on those terms: twenty core components rebuilt with engineering so Figma matched code, before the landing page was built on them.