Try the live interactive rebuild I coded of this component: LIVE DEMO
See it in production on Spectrum Reach: LINK
UX Design Process:
Research and Discovery:
Small-business owners consistently overestimate the cost of TV advertising — the core insight behind this tool. I reviewed sales-call feedback and analytics to understand where prospects dropped off, and studied how competitors presented pricing. The calculator was designed to answer the visitor's real question — “what can my budget actually do?” — before asking anything of them.
Information Architecture & Flow:
I reduced the inputs to the four things an owner already knows: where they want to advertise, what they can spend monthly, when they want to start, and for how long. A running “$/month × months = total” line keeps the commitment transparent as they type. Results appear side-by-side with the form so cause and effect stay visible — change the budget, watch reach respond.
Designing the Results:
Media metrics are jargon-heavy, so every stat is framed as the user's own question: “How many unique people will see my ad at least once?” → Reach. A split bar visualizes the TV vs. streaming mix in Spectrum's two blues, and a success message gives an encouraging, plain-language read on the plan — turning raw numbers into a recommendation.
UI System:
Built on Spectrum Reach's design system: the deep navy canvas (#002139), Spectrum blue accents (#1995F2, #0271EB), pill-shaped buttons, and a clean white results card for contrast. Fully responsive — the two-column layout stacks on mobile with full-width touch-friendly inputs.
Outcome:
The calculator turns a static marketing page into a hands-on planning moment, qualifying leads by letting them self-serve a directional estimate before connecting with a media expert. The interactive version linked above is a faithful front-end rebuild I coded of my design — try it with any zip code and budget.
