Our own product · Software studio
Web Wizard Dev: Studio Website with a Pricing Estimator
Our own site, where a buyer can price a project in 3 questions and trace every figure on it, with accessibility up from 89-95 to 100 on its key pages.
- Industry
- Software studio
- Timeline
- 4 days (version 3)
- Year
- 2026
- Platforms
- Web
Results at a glance
The challenge
- The site began as a generated template, and its copy carried figures and credentials nobody could back up. A buyer who checked one claim and found it false would doubt the rest of the site.
- Buyers want a price before a call. The old pricing questionnaire showed its prices only after JavaScript ran, so search engines and AI assistants saw no prices at all.
- Version 3 replaced every page, but the old site had no redirects: any address it served that the new site didn't would send search results and shared links to an error page.
- The key pages scored 89-95 for accessibility on phones: icon buttons with no label, links that relied on color alone, dimmed small text and skipped heading levels.
- Proof has to stay accurate as the portfolio grows. A figure typed into a page goes stale when the count behind it changes, and a project waiting for approval must not appear anywhere.
About the project
Web Wizard Dev's own website. Version 3 launched in October 2026, replacing a site that began as a generated template. It kept every address the old site served, rewrote the copy so each number traces to a source, and replaced a pricing questionnaire whose prices appeared only after JavaScript ran with an estimator whose packages and prices are in the page itself. 6 service pages and 5 industry pages show only the work that matches them, and every project page, project card, sitemap entry and structured-data block comes from one data file. Every page is static HTML that search engines and AI assistants can read, and the key pages score 100 for accessibility on phones and desktops.
What we delivered
Scope
- Design and build
- Pricing estimator
- Content and truth pass
- Technical SEO
- Structured data
- AI search readiness
- Accessibility
- Security headers
- Data-driven portfolio
What it does
Price a project in 3 questions
The estimator asks where you are starting, what kind of project it is and who it is for, then shows the matching packages out of 7, each with its price range. Choosing one carries it into the contact form, and the budget is filled in only when the package's range fits a single budget choice.
Prices that crawlers can read
All 7 packages and their prices are in the pricing page's HTML, and each service page's structured data carries the prices that page quotes. Both come from one file, at the hourly rate in the studio's signed contracts ($75).
A portfolio built from one data file
Every project page comes from it, and the same entries feed the project cards on the home, service and industry pages, the sitemap, each page's structured data and the plain-text summary for AI assistants. A draft can be previewed locally and never reaches the live site.
Pages that show only matching work
6 service pages and 5 industry pages each list only the projects that match them, and show fewer cards rather than unrelated ones.
Figures that can't drift
Pages quote project figures by label from the portfolio data, so a re-counted figure updates every page that cites it, and a missing one fails the build. Years in business and the Google rating come from one settings file.
Readable by search engines and AI assistants
Every page is static HTML. The structured data states the services, the technologies used on 2 or more projects and the price ranges, all derived from the data, and a plain-text llms.txt file lists the same facts.
Accessible by default
Labels on every icon-only button, underlined links in text, 24px tap targets, headlines visible from the first frame, and motion that stops on its own and respects the reduced-motion setting.
Security headers on every page
A strict Content-Security-Policy, HSTS, and headers that block framing and content sniffing.
Our approach
Traced every number and promise to a source before version 3: prices to one file at the contract rate, business terms to the signed agreements, project figures to the portfolio data, and the rest cut or reworded as what we can build.
Built a 3-question estimator over the 7 packages, rendered on the server so the prices are in the HTML, and put each service page's quoted prices in its structured data.
Wrote a launch check that requests every address the live site served, every internal link and anchor and every file the pages use, and ran it against the new build before launch and against the live site after.
Fixed the accessibility failures first, then built the rules into the new components: labeled icon buttons, underlined in-text links, 24px tap targets, no dimmed small text, and an unbroken heading order.
Made one data file the source for project pages, cards, the sitemap, structured data and llms.txt. Pages quote figures by label, so a missing one fails the build, and drafts render only in local previews.
The outcome
- Accessibility went from 89-95 to 100 on all 9 key pages (Lighthouse, phone). On the live site, PageSpeed Insights scored accessibility and SEO 100 on all 18 runs (9 pages, phone and desktop), and a re-check on 5 pages on 2026-10-18 scored 100 again.
- Google PageSpeed Insights scores the live home page 97 for mobile performance (best of 5 tests) and 99 on desktop (best of 3), in October 2026.
- Launched on 2026-10-06, 4 days after version 3's first commit, with all 30 addresses the old site served still answering at the same URL.
- Service pages grew from about 850 words to 1,900-2,100, and industry pages from about 700 to 1,330, so price, timeline and ownership questions are answered in the page itself.
- In the first day of production logs, 8 self-identified search and AI crawlers, including Googlebot, bingbot, ClaudeBot and PerplexityBot, got a normal page on every request.
- 2 security reviews before and after launch, and a strict Content-Security-Policy and other security headers on every page.
Built with
Next.js
React
TypeScript
Tailwind CSS
shadcn/ui- Radix UI
Vercel- Lighthouse
More projects like this
Have a project like this in mind?
Tell us what you're building. We'll show you how we'd approach it and what it would take, the same way we did for our own product.