Pavel | Product Designer in London

Designing the intelligence layer for connected places

A zero-to-one platform unifying live sensor data, operational analytics, and public digital experiences — built for the organisations running the places people actually use.

Role: Lead Product Designer (End-to-end)

Platform: Admin Portal · Web

Users: Councils · Destinations · Estates

2 months

Product modules designed end-to-end

Critical UX findings resolved pre launch

Design system powering full product

TL;DR

The Gap

No platform existed that connected live operational data, analytics, content management, and public digital experience in one governed system for place operators.

The Audience

Risk-aware, governance-focused organisations, councils, destination management bodies, and estate operators , who needed trust and delivery confidence, not just software features.

My challenge

Design a platform spanning six capability modules, three buyer deployment plays, and multiple user roles all from a single, consistent design system.

The Problem

Everyone was running the same broken stack

Destination operators, estate managers, and smart city leads all shared the same fragmentation, CMS here, BI tool there, sensors nobody could read, a public app disconnected from all of it.

"The tools existed, CMS, dashboards, IoT feeds, but nothing was designed to work together for this buyer type. Operators were patching five tools that never talked to each other."

Fragmented content ops

Venue information maintained across disconnected tools with no central governance layer or consistent publishing model.

Insight nobody could use

BI tools built for analysts. Non-technical operators and executives had no fast path to answers without raising a request.

Invisible infrastructure

Sensors and cameras deployed across sites with no unified visibility layer, no spatial context, and no actionable output.

Disconnected experience

Public-facing apps had no live connection to operational data. Content and reality were always out of sync.

Process & Tools

How I approached it

Before any wireframe, I mapped each buyer type to their operating context: what decision they needed to make, what was blocking it, and what success looks like in 60 seconds. That gave me a use-case hierarchy that shaped every IA decision.

Figma

Single source of truth for all screens, components, and flows across six modules and three buyer contexts.

Figma Make

Interactive prototypes that moved stakeholder conversations from "what will it look like" to "this is how it works."

Claude Code

Used to surface structural inconsistencies in the IA and generate component documentation drafts accelerating audit and handoff.

Design System

Built in parallel with the product colour tokens, component variants, interaction patterns, locked helper text, and handoff docs.

Key Decisions

Five decisions that shaped the platform

Each one is grounded in a real audit finding. Each annotation maps directly to the element it changed and every decision includes the reasoning, not just the outcome.

Decision 1: Separate operational monitoring from analytical reporting

The dashboard was doing two fundamentally different jobs on one page live status monitoring and trend analysis. An operator checking a live incident is not in the same headspace as an analyst reviewing monthly footfall. Combining them created noise at exactly the wrong moment.

I split the surface into three labelled zones, each with its own visual language and priority level.

Reduces cognitive overload for operators managing live incidents the right information at the right time, not everything at once.

Decision 2: Make the map the primary operational surface not a decoration

The original map showed a single device pin despite eleven connected devices. The most spatially powerful element on the page was the least informative. Operators had no way to understand their estate geographically or locate an issue quickly.

I redesigned Atlas Live so the map and device list are fully synchronised selecting a device flies the map to its pin, and each device has consistent visual states across both surfaces.

Operators can locate an offline device spatially in seconds. The map becomes actionable intelligence, not decorative context.

Offline, selected state with pulse ring

Online, transmitting normally

Warning, threshold or signal degraded

Decision 3: Move destructive actions behind a protected interaction

Delete was sitting inline next to Edit across all tables, venues, users, cameras with no confirmation step. With 256,000 camera entries in the system, a misclick is a trust-breaking event with no recovery path.

I moved all destructive actions behind a three-dot kebab menu with a mandatory confirmation modal that names the item and states the consequence. Edit stays one click. Delete requires intent.

Essential for councils and public sector buyers who require audit trails — accidental deletion can never be an option in a governed platform.

Kebab trigger: destructive action de-emphasised behind

Dropdown: Edit fast, Delete grouped with a second step required

Modal: names the item, states consequences, demands confirmation

Decision 4: Lock filter state to chart output, make the data trustworthy

Filters said "Today." The chart showed a full year of data. The Venue dropdown showed "Select Venue" while Location was already set. Filters and chart were visually and logically disconnected.

I redesigned the insight module so chart title, axis labels, time range, and data always reflect the active filter state — with a sync badge confirming the connection is live.

Filters said "Today." The chart showed a full year of data. The Venue dropdown showed "Select Venue" while Location was already set. Filters and chart were visually and logically disconnected.

I redesigned the insight module so chart title, axis labels, time range, and data always reflect the active filter state — with a sync badge confirming the connection is live.

Data operators can trust is the foundation of any intelligence platform. Broken filter logic destroys confidence in the entire product.

All four filters highlighted when active, visually grouped as one control

Chart title dynamically reflects filter state, never generic or stale

SYNCED badge: visible confirmation that output matches filter input

Decision 5: Build a role badge hierarchy that makes access governance scannable

Five role types were styled inconsistently with no colour logic some solid, some outlined, different shapes, no hierarchy. On a platform with 40+ pages of users across multiple organisations, admins couldn't tell who had what access at a glance.

I introduced a colour-tiered badge system where colour maps directly to permission level. Each badge includes a coloured tier bar as a secondary cue — making access scannable in under a second.

Governance and access control are primary selling points for this buyer type. Role clarity is a trust signal, not an aesthetic choice.

Super Admin: red, highest permission, immediately distinct

Admin: violet, platform-wide access

Venue Admin: blue, scoped to assigned venue

Operator: green, operational access only

Viewer: grey, read-only, lowest tier

Feature Spotlight

Atlas Live: real-time place intelligence

The standout feature. A live operational view combining a synchronised map, connected device list, and camera feeds giving operators a single surface to understand everything happening across their estate, right now.

Alert fires

Operator notified of offline device

Locate on map

Pin highlighted and synced with list

Inspect

Right panel shows type, venue, status

Go deeper

One click to full dashboard report

Resolve

Issue logged, audit trail maintained

Design note 01

Map ↔ List sync

Selecting a device in the list flies the map to its pin. Selecting a pin populates the detail panel. Both always reflect the same truth.

Design note 02

Consistent state system

Green = online, Red = offline, Amber = warning — across the map pin, list row, and detail panel. Never contradictory.

Design note 03

Single escalation path

The panel shows enough to act immediately. "View in Dashboard" is the only escalation route, no cognitive dead ends.

Outcome

A platform that entered the market ready

From blank Figma file to a fully prototyped, design-system-backed product shipped across six modules, three buyer plays, and multiple user roles through a modern AI-assisted design workflow.

Product modules designed end-to-end, from Core to AI-assisted reporting

Critical UX findings resolved before a single line of code was written

Unified design system powering the full product, clean engineering handoff

The platform addressed a gap no existing product had cleanly filled — a governed intelligence layer for the organisations running connected destinations, venues, and public places. The design system made handoff clean. The AI-assisted workflow cut audit and documentation time. The product is live.

pavel

pavel