Developed a 35+ page internal calculator tutorial to help improve designs and drive measurable client results. The resource acts as a guide for designers creating calculators from the ground up. It includes everything from file setup and interactive UI patterns to SEO best practices and developer handoff.
Client
Calculator resource
Contributions
Content strategy, art direction, UI/UX
Industry
Marketing
Problem
Since the agency lacked a 'single source of truth' for interactive calculators, the process was more fragmented than it needed to be.
My challenge was to develop a guide that turned UX and SEO best practices into a streamlined resource for designers. The guide would need to be applicable for calculator designs across various industries.
Solution & outcome
By standardizing our approach to calculator designs, designers were able to deliver high-quality prototypes that drove results.
Pages included in the resource:
Getting started (file setup, styling, layout best practices)
Form fields (anatomy, dropdowns, input states, examples)
Buttons (states, use cases, hierarchy, examples)
Radio buttons (use cases, examples)
Checkboxes (use cases, examples)
Tabs (use cases, styling, examples)
Sliders (use cases, examples)
Multi-step calculator (use cases, progress styling, examples)
How to display results (data vis, text only, illustration)
Breakpoint considerations (desktop vs mobile best practices)
Dev handoff
Resources
Working files (previous files organized by industry)
