Case study · Concept project

Marketing dashboard

A lead and ad performance dashboard with an AI assistant

B2B SaaSAI & data

2: Core screens: dashboard and contacts
6: Key numbers visible without scrolling
1: Accent color carries all the data
8s: Animated walkthrough of the dashboard

About the project

Kestrel is a concept for a marketing and lead dashboard, made for small teams that run ads on a few channels and need to know what is working today.

I designed it to answer one question fast: where are my leads coming from, and what should I do next? Everything on the screen either shows a number that matters or helps you act on it.

Type: Concept project
Industry: Marketing SaaS
Year: 2026
Tools: Figma

Product design
UX and UI design
Data visualization
Motion design
Component system

The problem

Most marketing dashboards show everything at the same volume. These are the five problems I designed against.

01Every number looks equally importantWhen twelve cards share one size, nothing reads first.
02Charts need decodingToo many colors and a legend you have to look up for every bar.
03AI lives in a separate chatYou leave the data to ask about the data, then lose your place.
04Tables are hard to scanDense rows, weak alignment and status that hides in plain text.
05Leads and performance are splitYou see that leads went up, but not who they are or who needs a reply.

Approach

Numbers first

Revenue and deals won get the largest cards. Supporting metrics sit beside them at half the size, each with its change against last month.

One color for data

Purple is used only for data and primary actions. Lighter tints separate channels, so the chart reads without a rainbow.

AI next to the work

The assistant sits beside the chart it explains. It opens with findings, not an empty prompt.

The dashboard

One screen for the daily check. The layout follows the order people ask questions: how much, from where, what now, and which campaign.

The full Kestrel dashboard with KPI cards, a leads chart, the AI assistant panel and a top campaigns table

KPI cards with a clear order

Two large cards for revenue and deals won, four compact ones for cost per lead, ad spend, visits and return on ad spend. Green and red are used only for the change, never for decoration.

Six KPI cards: revenue, deals won, cost per lead, ad spend, visits and return on ad spend

A chart that reads in one look

Stacked bars show leads by channel in three tints of one color. A single dark line adds revenue on the second axis. The current day is the only bold label.

A stacked bar chart of leads by channel across ten days with a revenue line on top

An assistant that starts with answers

The panel leads with what changed: hot leads waiting, progress to the monthly goal, the top channel. Suggested questions sit above the input, so nobody faces a blank box.

The Kestrel AI panel listing four findings, two suggested questions and a prompt field

A table built for scanning

Numbers are right aligned, the sorted column is marked, and status is a small dot with a label. Each row ends with one menu for every action.

The top campaigns table with channel, spend, leads, ROAS, last lead and status columns

Contacts

The second screen connects performance to people. It shows who the leads are, where each one stands and who is waiting for a reply.

The pipeline as one bar

Four stages share a single bar, so the proportions are visible before you read a number. Counts and weekly change sit directly under each stage.

A pipeline bar split into new, contacted, qualified and won, with counts under each stage

Saved views instead of filters

The lists people need most are one tap away: hot this week, no reply in seven days, big deals. The table is sorted by lead score by default.

The people table with saved views, lead scores, deal values and status for fifteen contacts

A detail panel that suggests the next step

Selecting a person opens their details beside the list. The assistant explains why now is a good moment and offers to draft the reply.

A contact detail panel with message, call and meeting actions, an AI suggestion and recent activity

Motion

Motion is used to explain, not to decorate. When the dashboard loads, cards fade in from top to bottom, numbers count up to their value, bars rise in order and the revenue line draws across them. The assistant panel gets a soft glow, the only element that asks for attention.

Cards fade in, nothing slides or bounces
Numbers count up in under a second
Bars rise left to right, then the line draws
Everything is skipped for people who prefer reduced motion

Visual system

A small set of rules keeps both screens consistent and makes new screens fast to design.

The dashboard and contacts screens layered on a purple background

Color

A near-black sidebar, white cards on a light gray canvas, and one purple for data and primary actions.

Type

Geologica throughout. Large bold figures for money, small medium labels for everything that explains them.

Surfaces

Soft 12 to 16 pixel corners and thin borders. Depth comes from layering, not heavy shadows.

Components

Cards, chips, table rows and buttons are shared by both screens, so they feel like one product.

Have a dashboard that needs this?

I design SaaS products, dashboards and AI features that people understand on the first screen.

Schedule a call See services