Content Bridge

Visual data integration layer turning feeds into live platform content.

Client: Monterosa
Role: UX Lead
Date: 27-01-2025

Navigate to the next section

Content Bridge

Visual data integration layer turning feeds into live platform content.

The Brief

We spotted a pattern; every new client project burned around 20 days of resource in Sprint Zero just to get their data working with our platform.

At least 10 times per year, so a minimum of 200 days (or close to £100,000), spent every year on integration work. We built the case for internal investment around one idea: this wasn’t a one-off saving, it scaled with the company’s own growth targets. 20 new clients the following year meant £200,000 of value; 50 meant £500,000. That’s what got the project greenlit.

I led the UX and already knew the platform’s data model inside out as Product Owner of FanKit, the toolkit built on the same platform. I worked directly with our Extensions & APIs PM, sales team and account managers to keep every decision tied to real client need.

Constraints: build inside the existing Studio design system. No new visual language.

Context

  • Engineers hand-mapped every client feed to the platform’s data model
  • Logic lived only in code, invisible outside engineering
  • Producers and PMs waited on engineering for anything data-related
  • Clients had no visibility into how their own feed was handled
  • Cost repeated on every new client, every feed change

Intelligence

The problem wasn’t speed. It was knowledge locked in engineers’ heads: structural mismatches, inconsistent formats, missing fields, none of it written down anywhere. The job was making that knowledge visible so non-engineers could use it.

FanKit gave me the platform’s data structures from the consuming side, so I could sit with engineers and talk specifics: field types, null handling, nesting depth, not just “make it easier”. Priority and design decisions were then shaped by testing directly with real-world clients alongside the PM and commercial team, not assumption. That pushed the design towards trust and clarity as the core problems, not just speed.

Concept

Core idea: a visual bridge between a client’s raw feed and the platform’s data model. Show both structures side by side. Let a non-engineer map one to the other.

Built inside the existing Studio design system throughout, non-negotiable. This audience needed to trust the tool enough to use it unsupervised.

Three capabilities did the work, delivered in phases and shaped by client testing:

  • Mapping interface – the visual bridge, replacing hand-written transformation scripts
  • Formatter layer – date and number formatting rules with live preview, normalising inconsistent source formats without engineering
  • Audit log – system-led ingestion vs manual correction, every edit visible and reversible

Design System Discipline

Process for every new screen:

  1. Wireframes and user journeys first
  2. Identify every component required
  3. Existing components tagged and reused as-is
  4. Existing components needing a new error state, conditional state or data type get specified and checked with development
  5. New components only when nothing existing fits, and never bespoke to one feature. Designed for every edge case, data type and error state it could ever need platform-wide, paired with development before build

Three new components from Content Bridge, since reused elsewhere on the platform:

  • Horizontal dual-dropdown pairing control – source field and destination field selected side by side in one row. The atomic unit the mapping interface is built on.
  • Nested data explorer – access, expand, collapse and manage nested data from within existing components, without a separate view.
  • Free-type expression field – custom routes, unusual data paths, expressions, formatting and appending logic no fixed dropdown could anticipate.

Execution

Mapping interface. Made “this field becomes that field” concrete for someone with no engineering background. The premise of the whole tool rested on this.

Formatter layer. Live preview against sample data. The effect of a formatting rule was always visible before it went live.

Audit log. Real-time feeds need human correction: results get fixed, timestamps drift, brand edits happen by hand. Every change traceable to system or person, every change reversible. This is what let engineering hand the tool over.

Outcome

Data integration moved from engineering’s private domain to a configurable, auditable part of the platform, operable by producers, PMs and eventually clients directly.