Media forecasting

An executive-level simulation tool that turns media spend into strategic insight, with forecasting curves and a calm, confident UI

Not just another graph

Media executives don’t want dashboards. They want direction.
They ask questions like:

“Where are we overinvesting?”
“What if I shift $20K from retail to social?”
“Can we cut the budget next month?”

This project was about designing clear interface for decision-makers, even when the data was messy, partial, or late.

Challenge

Designing this meant making advanced forecasting feel simple. We had to create an interface where users could simulate budget changes with real-time feedback. That meant turning statistical models into intuitive UI.

There were no suitable components in the design system, so we had to design the entire experience from scratch, while staying true to the platform’s visual language. We also had to account for a wide range of edge cases, some known upfront, others uncovered as we designed and tested the experience.

Phase 1. The layout

We started by exploring structural variations for how to present simulations. 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. To anchor user context, I added two key markers: a purple 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 (2 to 12 months), 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, which added extra complexity. 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 scrolling to maintain usability across all screen sizes.

Phase 4. Bulk simulation

To let users simulate multiple campaign groups at once, we introduced a new feature called Bulk simulation. Triggered by the “Simulate my budget” button, it opens a modal where users can apply changes across their entire media plan.

We designed four simulation modes — set a new budget, reallocate current budget, increase, and decrease. Each came with a unique set of constraints and validations. To make the flow clear and intuitive, we added contextual tooltips, input highlights, and dynamic error states.

This modal had to handle a wide range of scenarios: empty fields, values outside the forecast range, and conflicting logic. We carefully designed each state to guide users toward successful simulation, no matter the complexity.