Media forecasting
An executive simulation tool that transforms media spend into forecast insights with an intuitive interface
Intro
One of the pain points for marketing teams was that they had no simple way to predict the impact of budget changes before launching them. To understand what might happen, they had to rely on manual analysis, fragmented reports, or real-world testing — a slow and expensive process that often meant spending time and money just to learn what would or wouldn’t work.
We created a feature that lets media teams simulate budget scenarios, compare outcomes, and understand projected performance before making changes live.
I led the design of this feature from early exploration to final UI, working closely with PMs and engineers to shape its structure, interactions, and overall experience.
Challenge
The challenge was to design an interactive experience that felt simple and intuitive, so users could understand how it works right away.
At the same time, the feature had to remain informative and reliable enough to support real planning 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. Also, 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.
Phase 5. Bulk simulation
For bulk simulation, we designed a guided flow that supports four scenarios: setting a new budget, reallocating the current one, or increasing and decreasing it.
The process feels natural: choose your action → select groups → see the limits → enter values → preview the results. After applying changes, every affected input is marked with a small “Simulated in bulk” icon, clearly indicating which groups were updated by the bulk action. Small detail, big difference for tracking what changed and why.
Outcome
This feature helped users spot potential overspending or underspending before making budget changes live, simulate different budget scenarios, and see the projected impact in seconds. As a result, planning became faster, more informed, and less reliant on guesswork.
