Media forecasting

An executive simulation tool that transforms media spend into forecast insights with an intuitive interface

Not just another graph

Media executives don’t need another dashboard, they need direction. They ask questions like: "Are we overspending somewhere? What if I move $100K from retail to social?".

The goal was to make forecasting sharp enough for action, not just analysis.

As the design owner, I shaped the vision, drove key decisions, and ensured consistency across the entire experience and within the design system.

Challenge

The task was to turn a complex mathematical model into a clear, intuitive interface that even non-analysts could confidently use. Executives needed to simulate budgets, experiment with scenarios, and instantly see the impact of their decisions.

There were no ready-made components in the design system. Everything had to be built from scratch, while still fitting the overall platform’s visual language. On top of that, I had to account for edge cases: some well-defined upfront, others discovered along the way.

Phase 1. The layout

It was clear that before any forecasting could happen, the user had to select a media plan and apply the relevant filters to see the campaign groups.

Since media plans could contain dozens of groups, we defaulted to a collapsed view for all of them except the first one. To maintain visibility without overwhelming the UI, we still displayed key values in the collapsed state but without the forecast curve. This allowed users to quickly focus, while letting them expand groups for deeper exploration only when needed.

To support both micro and macro level decisions, we introduced a sticky footer that displayed the total simulated impact vs. planned, across all groups. All values in the footer were aligned with the values in each group, allowing for effortless side-by-side comparison between group-level changes and overall totals.

Phase 2. Making forecasts visual

We started with the curve — a clean, responsive graph mapping revenue against spend. Two key markers: a yellow dot showing the planned budget, and a blue one for the simulation.

Precise input fields let users enter exact values manually, while a draggable slider brought the curve to life, allowing them to explore scenarios in real time and watch the numbers shift as they moved. A simple mechanic, but one that made the whole interaction feel intuitive and responsive.

Phase 3. Monthly breakdown

After presenting an early version of the feature to our design partners, we realized the forecast needed to be broken down by month, aligning with how clients structure their media plans.

Integrating a 12-column layout required careful design decisions. It risked overwhelming the interface and pulling attention away from the simulation itself. To keep things focused and clean, we embedded the table inside each media group, collapsed by default.

Each simulated cell had to remain both visible and editable. The width of each column was responsive to fit all 12 months within a single view for most users. However, to ensure it worked on smaller resolutions, we added inner horizontal scroll to maintain usability across all screen sizes.

Phase 4. Edge cases

Forecasting is never perfect, and our design had to communicate those limits clearly. We designed two warning zones on the curve.

Out of range — when budgets go beyond what the model can handle. The interface clearly shows you've hit the wall, no guessing required.

Outside historical data — the model still works here, but accuracy drops. Users told us they wanted to see these projections anyway, just with fair warning. So we show the numbers with a clear note: "You're in uncharted territory."

By visualizing these zones directly on the curve and reinforcing them with tooltips and warnings, we gave users confidence: they always know whether the forecast is reliable, less accurate, or unavailable.