Studija slučaja

Sve kampanje,

jedna vremenska linija.

Dizajn proizvoda i front-end razvoj za švedski ad-agency SaaS — objedinjavanje planiranja višekanalnih kampanja, Airtable arhitekture podataka i Looker Studio dasbordi u jednu operativnu platformu.

adgrabber SaaS · Ad-tech · Švedska

Klijent

Adgrabber AB

Godina

2023-2024

Isporuke

Dizajn proizvoda, Front-end

Stack

Airtable · Looker Studio · React

Zadatak

Airtable

a adgrabber academy

Looker Studio

Jedan izvor istine za svaki medijski zakup.

Adgrabber je stockholmska ad-tech kompanija koja pomaže agencijama da upravljaju višekanalnim kampanjama na Meta, Google, TikTok, Snapchat, Display i YouTube platformama. Pre naše saradnje, podaci o kampanjama bili su rasuti po tabelama, briefovi su stizali emailom, a nijedan ekran nije prikazivao celokupnu sliku.

Zadatak je bio jasan: dizajnirati platformu gde media planer može da otvori kampanju, vidi svaki zakup na Gantt vremenskoj liniji, pregleda kreativne specifikacije i podeli live performance dasbord — bez napuštanja alata.

Trebalo nam je nešto što će naši planeri zaista koristiti u ponedeljak ujutru, a ne još jedan alat koji se napusti do srede.

— Adgrabber tim za proizvod

Dizajnerski principi

Četiri principa koja su oblikovala svaki ekran.

Jasnoća na prvi pogled

Media planeri upravljaju 10-20 aktivnih kampanja istovremeno. Svaki prikaz dizajniran je da istakne ključni signal — status, potrošnju, rok — bez traženja.

Podaci bez trenja

Airtable je osnova, ali planeri ne bi trebali da osećaju da rade s bazom podataka. UI apstrahuje šemu u poznati jezik kampanja.

Dosledan vizuelni jezik

Svaki medijski kanal nosi fiksnu boju kroz Gantt trake, dasborde i izvozne izveštaje — tako da svaki član tima odmah čita grafikon.

Izgrađeno za predaju klijentu

Outputi spremni za klijenta — PDF izvozi, ugrađeni Looker dashboardi, deljivi URL-ovi kampanja — su prvoklasne funkcionalnosti, a ne naknadna razmišljanja.

Pregled UI-ja

Od prijave do punog prikaza kampanje.

Platforma se otvara na čistom ekranu za autentifikaciju koji postavlja vizuelni ton — čvrsta mreža, visokokontrastni akcenat, bez šuma. Odatle, hub kampanja daje planerima neposredan pregled svakog aktivnog zakupa.

01 — Prijava

Ekran za autentifikaciju orijentisan na brend sa minimalnim poljima i jednim jasnim pozivom na akciju.

02 — Platforma za kampanje

Glavni hub: kanalski kodiran Gantt, kartice kampanja, ukupna potrošnja i brzi pristup panelu brifa.

Anatomija Gantograma

Vremenska linija izgrađena za media planere.

Gantt grafikon je centralni element platforme. Morao je da podržava preklapajuće kampanje kroz šest kanala, skrolabilnu godišnju osu i live 'danas' indikator — bez vizuelnog nereda.

Specifikacija Gantt komponente

Redovi

Jedan po kampanji ili medijskom zakupu

Kolone

Mesečna mreža, 12 godišnje

Razmera

Preciznost na dnevnom nivou, prikaz na mesečnom

Marker za danas

Live vertikalna linija, automatski pozicionirana

Kodiranje bojama

Fiksna paleta po medijskom kanalu

Drill-down

Kliknite na traku da otvorite brief kampanje

Vremenska linija kampanja 2024 Danas

Kanal

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 Arhitektura

Deset polja. Jedna šema. Nula nejasnoća.

Airtable baza je rekonstruisana od nule. Svako polje mapira se na jednu, jasno nazvanu kolonu vidljivu u UI platforme — eliminišući dvostruki unos koji je mučio prethodni radni tok.

Kolona platforme

Airtable izvorno polje

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)

Tabele

Campaigns · Mediaköp · Produktion · Brief

Automatizacije

Status roll-up, upozorenja o rokovima, ubacivanje Looker URL-a

Integracije

Looker Studio putem ugrađenog iframe-a, PDF izvoz putem Airtable scriptinga

Vizuelni identitet

Brend sistem izgrađen za gustinu podataka.

Identitet Adgrabbera kombinuje smelu roze primarnu boju sa skoro crnom površinom — visoki kontrast za ekrane bogate podacima. Sekundarna porodica hladnih sivih tonova pokriva desetine UI stanja bez konkurisanja bojama kanala.

Paleta brenda

Adgrabber Pink#ED1C5E

Cool Grey 100#EEF0F6

Ink#1A1B26

Slate#6A6F7E

Surface#F6F7FB

Border#E1E4EC

Boje kanala

Facebook

#4F46BA

Google Ads

#E6304A

Display

#F26B4A

TikTok

#7E4ED1

Snapchat

#00C2B5

YouTube

#6FC93A

Tipografija

Inter — funkcionalan po dizajnu.

Inter je odabran zbog tabularnog varijanta za cifre i izvanredne čitljivosti na malim veličinama — ključno za platformu gde planeri čitaju iznose potrošnje, datume i nazive kampanja u gustim tabelama.

Wordmark — Inter 700, mala slova

adgrabber

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

Hero naslov — Inter 800

Every campaign,
one timeline.

Telo teksta — Inter 400 / 500

Media planeri otvaraju Adgrabber da pronađu sve kampanje na jednom ekranu — potrošnju, status, kreativne specifikacije i podatke o performansama — bez menjanja tabova.

Tabularne cifre — Inter tnum

300.000 :-200.000 :-15 APR5 MAY

Zaglavlja kolona — Inter 600, velika slova, sa razmakom

STARTSLUTSPENDMÅLMÅLGRUPP

Filozofija dizajna

Softver bi trebalo da se oseća kao dobar brief: direktan, jasan i spreman za akciju.

Ad-tech alati su poznati po pretrpanom interfejsu. Adgrabber je izgrađen na suprotnom principu — svaki element na ekranu pomaže planeru da donese odluku, ili se uklanja. Rezultat je alat koji poštuje tempo agencijskog dana.

Rezultati

Efekti koje je tim osetio prvog dana.

Platforma je lansirana za ceo Adgrabber tim u Q1 2024. U prvom mesecu, merljiva poboljšanja pojavila su se u brzini planiranja, izveštavanju klijenata i tačnosti podataka.

−65%

Vreme od brifa do lansiranja

Vreme postavljanja kampanje palo je sa prosečnih 45 minuta na ispod 16, zahvaljujući objedinjenom obrascu za brief i Airtable automatizaciji.

Predaja tabela

Sav međuodeljenjski prenos podataka prešao je unutar platforme. Email tabele kao prilog u potpunosti su eliminisane.

Kanala, jedan prikaz

Meta, Google, TikTok, Snapchat, Display i YouTube kampanje vidljive istovremeno na jednoj Gantt vremenskoj liniji.

Live

Klijentski dashboardi

Looker Studio izveštaji ugrađeni direktno u svaku kampanju — deljivi s klijentima putem jednog URL-a, bez potrebe za izvozom.

Zaključak

Platforma koja razmišlja kao media planer.

Adgrabber sada ima jedan operativni sistem gde se kampanje planiraju, prate i izveštavaju na jednom mestu. Dizajnerski sistem se skalira — novi kanali, nova tržišta i novi klijenti mogu se uvesti bez rekonstrukcije proizvoda.

Sarađujte s nama

Spremni da izgradite svoju platformu?

Dizajniramo i gradimo digitalne proizvode za kompanije koje se kreću brzo i trebaju alate koji prate korak. Razgovarajmo o onome što gradite.

Dizajn proizvoda UX / UI Front-End razvoj Airtable arhitektura Looker Studio Dizajn sistemi Vizualizacija podataka Brend identitet SaaS platforme

Pokrenite projekat Pogledajte više radova