Single calculator state hook
useCalculator hook manages input/result/history/share state for all 149 tools; adding a new calculator is atomic.
SaaS / Calculator Hub · Case Study
HepsiHesapla — 149+ Calculators + Neo-Brutalist Design
A 149+ calculator hub spanning every category, wrapped in a neo-brutalist visual identity and tuned per-page for AI Overview citation.
Results
Measurable Outcomes
149+
Calculator count
Neo-brutalist
Design system
+18% vs flat
Mobile interaction rate
TODO — Perplexity dataset
AI Overview citation
The Brief
What was the goal?
The calculator category in Turkey is fragmented across separate domains and one-off tools. Making a single destination URL show up coherently across every category in Google required tight entity and content architecture.
The Approach
Which methodology pillars I applied
I leaned hard on the Schema, AEO, and GEO pillars: per-calculator Person (author/reviewer) + HowTo + FAQPage schema; H1 is a question, first paragraph is a 40-60 word direct answer; result blocks are tagged with the speakable selector.
See the full process → 47-Point AI-Ready SEO Audit methodology.
Tech Stack
What it's built with
- Next.js 15
- TypeScript
- Tailwind CSS
- Schema.org HowTo + FAQPage
- Vercel
The Build
Key decisions and tradeoffs
The neo-brutalist design system wasn't just an aesthetic call — every calculator card carries a sharp border and hard shadow, visually emphasizing the tap target on mobile. I measured conversion; it gave an 18% higher interaction rate vs flat design.
I wrote a shared state hook (useCalculator) for all 149 tools — input validation, history, and share-link generation live in one place. Adding a new calculator now takes under 30 minutes.
Every calculator's result panel is tagged with the speakable selector. When ChatGPT or Perplexity gets a calculation query, the result + unit + source (formula reference) lands as a one-line quotable snippet.
Mobile-first: calculators weren't adapted from desktop, they were born mobile. Desktop just gets the extra real estate.
Steps Applied
Methodology in practice
Result speakable
Calculation result lives at #result-block id; SpeakableSpecification ensures AI Overview citation readiness.
FAQPage + HowTo per category
Every category page packs 5-7 natural Q&As (FAQPage) + how-to-calculate steps (HowTo), tuned for snippets.
Honest Reflection
What I'd Do Differently
On launch we didn't take the time to write unique meta descriptions for all 149 calculators — we generated them programmatically. Google read it as "low-quality metadata" and CTR ran 35% below baseline for the first 30 days. The second pass shipped hand-written meta descriptions for the top 20 per category. The remaining 129 stayed programmatic — a deliberate trade-off, but next time I'll hand-write the top 50.
Screenshots
Want this for your project?
Same 47-point methodology, $499 fixed price, 5-7 business days. Book the audit.