Case Study

Every campaign,

one timeline.

Product design and front-end development for a Swedish ad-agency SaaS — unifying multi-channel campaign planning, Airtable data architecture, and Looker Studio dashboards into a single operational platform.

adgrabber SaaS · Ad-tech · Sweden

Client

Adgrabber AB

Year

2023–2024

Deliverables

Product design, Front-end

Stack

Airtable · Looker Studio · React

The Brief

Airtable

a adgrabber academy

Looker Studio

One source of truth for every media buy.

Adgrabber is a Stockholm-based ad-tech company helping agencies manage multi-channel campaigns across Meta, Google, TikTok, Snapchat, Display, and YouTube. Before our engagement, campaign data lived in scattered spreadsheets, briefs arrived as email threads, and no single screen showed the full picture.

The brief was clear: design a platform where a media planner can open a campaign, see every buy on a Gantt timeline, drill into creative specs, and share a live performance dashboard — without leaving the tool.

We needed something our planners would actually use on a Monday morning, not another tool that gets abandoned by Wednesday.

— Adgrabber product team

Design Pillars

Four principles that shaped every screen.

Clarity at a glance

Media planners manage 10–20 live campaigns simultaneously. Every view was designed to surface the critical signal — status, spend, deadline — without hunting.

Data without friction

Airtable is the backbone, but planners should never feel they're operating a database. The UI abstracts the schema into familiar campaign language.

Consistent visual language

Each media channel carries a fixed colour across Gantt bars, dashboards, and export reports — so any team member reads a chart instantly.

Built to hand off

Client-ready outputs — PDF exports, embedded Looker dashboards, shareable campaign URLs — are first-class features, not afterthoughts.

UI Walkthrough

From sign-in to full campaign view.

The platform opens on a clean authentication screen that sets the visual tone — tight grid, high-contrast accent, no noise. From there, the campaign hub gives planners an immediate overview of every active buy.

01 — Sign-in

Brand-forward auth screen with minimal form fields and a single clear CTA.

02 — Campaign platform

The main hub: channel-coded Gantt, campaign cards, spend totals, and quick-access brief panel.

Gantt Anatomy

A timeline built for media planners.

The Gantt chart is the centrepiece of the platform. It needed to handle overlapping campaigns across six channels, a scrollable year-long axis, and a live 'today' indicator — all without visual clutter.

Gantt component spec

Rows

One per campaign or media buy

Columns

Monthly grid, 12 per year

Scale

Day-level precision, month-level display

Today marker

Live vertical rule, auto-positioned

Colour coding

Fixed palette per media channel

Drill-down

Click any bar to open campaign brief

Campaign timeline 2024 Today

Channel

JAN

FEB

MAR

APR

MAY

JUN

JUL

AUG

SEP

OKT

NOV

DEC

Always-on Meta

Spring sale

Display burst

TikTok creators

Summer Snap

YT pre-roll

Airtable Architecture

Ten fields. One schema. Zero ambiguity.

The Airtable base was re-architected from scratch. Every field maps to a single, clearly-named column visible in the platform UI — eliminating the double-entry that had plagued the previous workflow.

Platform column

Airtable source field

Kampanj

Kampanjer · Brief. Kampanjnamn

Produkt

Mediaköp / Produktion · Mediatyp, Produktionstyp

Start

Kampanjer / Mediaköp · Brief. Start, Startdatum

Slut

Kampanjer / Mediaköp / Produktion · Slut, Deadline

Spend

Kampanjer / Mediaköp · Ek. budget. Intäkt

Mål

Kampanj · Brief. Mål

Målgrupp

Kampanj · Brief. Målgrupp & Geo

Mätvärden

Kampanj · Brief. Mätvärden

Target

Kampanj / Mediaköp · Brief. Target

Dashboard

Kampanj · Sys. GDS embed (Looker Studio URL)

Tables

Campaigns · Mediaköp · Produktion · Brief

Automations

Status roll-ups, deadline alerts, Looker URL injection

Integrations

Looker Studio via embedded iframe, PDF export via Airtable scripting

Visual Identity

A brand system built for data density.

Adgrabber's identity pairs a bold pink primary against a near-black surface — high contrast for data-heavy screens. A secondary cool-grey family handles the dozens of UI states without competing with campaign colours.

Brand palette

Adgrabber Pink#ED1C5E

Cool Grey 100#EEF0F6

Ink#1A1B26

Slate#6A6F7E

Surface#F6F7FB

Border#E1E4EC

Channel colours

Facebook

#4F46BA

Google Ads

#E6304A

Display

#F26B4A

TikTok

#7E4ED1

Snapchat

#00C2B5

YouTube

#6FC93A

Typography

Inter — functional by design.

Inter was chosen for its tabular number variant and exceptional legibility at small sizes — critical for a platform where planners read spend figures, dates, and campaign names in dense tables.

Wordmark — Inter 700, lowercase

adgrabber

Inter · Variable · 400 / 500 / 600 / 700 / 800

Hero headline — Inter 800

Every campaign,
one timeline.

Body — Inter 400 / 500

Media planners open Adgrabber to find every campaign on a single screen — spend, status, creative specs, and performance data — without switching tabs.

Tabular figures — Inter tnum

300.000 :-200.000 :-15 APR5 MAY

Column headers — Inter 600, uppercase, tracked

STARTSLUTSPENDMÅLMÅLGRUPP

Design Philosophy

Software should feel like a good brief: direct, clear, and ready to act on.

Ad-tech tools are notorious for interface bloat. Adgrabber was built on the opposite principle — every element on screen either helps a planner make a decision or it is removed. The result is a tool that respects the pace of an agency day.

Outcomes

Results the team felt on day one.

The platform launched to the full Adgrabber team in Q1 2024. Within the first month, measurable improvements appeared across planning speed, client reporting, and data accuracy.

−65%

Brief-to-live time

Campaign setup time fell from an average of 45 minutes to under 16, thanks to the unified brief form and Airtable automation.

Spreadsheet hand-offs

All inter-department data transfer moved inside the platform. Email-attached spreadsheets eliminated entirely.

Channels, one view

Meta, Google, TikTok, Snapchat, Display, and YouTube campaigns visible simultaneously on a single Gantt timeline.

Live

Client dashboards

Looker Studio reports embedded directly in each campaign — shareable with clients via a single URL, no export required.

In Summary

A platform that thinks like a media planner.

Adgrabber now has a single operational system where campaigns are planned, tracked, and reported in one place. The design system scales — new channels, new markets, and new clients can be onboarded without rebuilding the product.

Work with us

Ready to build your platform?

We design and build digital products for companies that move fast and need tools that keep up. Let's talk about what you're building.

Product Design UX / UI Front-End Development Airtable Architecture Looker Studio Design Systems Data Visualisation Brand Identity SaaS Platforms

Start a project See more work