All projectsCase 02 / 06
Agency · Web, mobile & AI2026
Amethyst Developers
A dark, premium site for a web, mobile and AI agency: a 3D robot on the first screen, a scrolling services deck, an interactive delivery pipeline and plain-spoken pricing.
- Brief to launch
- 6 wks
- Service lines presented
- 6
- Quote requests
- 1.9×
- Lighthouse performance
- 91
00At a glance
The project in numbers
The essentials
- Client
- Amethyst Developers
- Timeline
- Mar – Apr 2026
- Role
- Design & front-end development
- Team
- Solo developer, with the agency's founders
- Services
- Front-end development · 3D & motion · Performance
- Built with
- Next.js
- Three.js
- GSAP
- Tailwind
Time it took
6weeks
150 hours across 5 phases
- Discover8%
- Design25%
- Build49%
- Test11%
- Launch7%
Lighthouse at launch
- 91Performance
- 95Accessibility
- 93Best practices
- 90SEO
The problem it solved
The agency did senior work but its site read like a template.
- 1.9×quote requests
- 48%more time on services
- 6 daysenquiry to proposal
01The case study
The short version
A The brief
An agency selling custom software and AI work needed a site that looked as senior as its engineers, and explained what it does, how it delivers and what it costs without a sales call.
B What I built
- A 3D robot hero with the agency's headline, proof figures and two clear actions
- A services deck that turns through six disciplines, each with its tools
- An interactive delivery pipeline, from planning to release
- Three transparent pricing plans with what each one includes
C The outcome
- 1.9×quote requests
- 48%more time on the services deck
- 1.4slargest contentful paint
02The problem
What wasn't working
The agency did senior work but its site read like a template. Visitors couldn't tell what it offered, how a project would run or what it would cost, so every lead began with the same three questions.
Where visitors dropped off, before
- Arrived100%
- Reached services32%
- Viewed pricing12%
- Asked for a quote1.7%
Share of everyone who arrived
- 4.6sto first content
A heavy template and unoptimised images slowed every first visit.
- 68%left before the services
Most visitors never got past the first screen.
- 11 daysfrom enquiry to proposal
Pricing and process had to be explained from scratch each time.
03The challenge
What made it hard
Show off a 3D hero and a six-service deck without making the site heavy, and still leave pricing and process as easy to read as a table.
- 01
A 3D hero that stays light
The robot had to load quickly and never block the headline.
Difficulty 4/5 - 02
A services deck with depth
Six cards, each with capabilities and tools, that work by scroll and by touch.
Difficulty 4/5 - 03
An interactive pipeline
Five stages that explain delivery without a wall of text.
Difficulty 3/5 - 04
Honest pricing
Three plans that are clear about what is and isn't included.
Difficulty 2/5
Constraints
| Deadline | Live before the agency's spring campaign |
|---|---|
| Content | Six service lines, three pricing plans |
| Devices | 58% of visitors on phones |
| Brand | Dark theme with a violet accent |
04The process
How it came together
6 weeks and 150 hours in 5 phases, overlapping wherever it saved time.
- 01Discover1 week
- 02Design2 weeks
- 03Build3 weeks
- 04Test1 week
- 05Launch1 week
Weeks from kick-off to launch · bar labels are hours spent
- 01
Discover
Founder interviews and a review of competitor agency sites.
- Content outline
- Site map
- Style direction
- 02
Design
The hero, the services deck, the pipeline and the pricing cards.
- Wireframes
- UI kit
- Prototype
- 03
Build
Next.js pages, the 3D robot and the scroll-driven services deck.
- Pages
- 3D hero
- Services deck
- 04
Test
Real devices, slow connections and reduced-motion checks.
- Device QA
- Performance pass
- Fixes
- 05
Launch
Redirects, analytics and a handover note for the team.
- Go-live
- Analytics
- Docs
05The result
What changed
Visitors now see what the agency does, how it delivers and what it costs before they write, and the quotes that arrive are better briefed.
- 1.9×quote requests
- 48%more time on services
- 6 daysenquiry to proposal
Before and after
| Metric | Before | After | Change |
|---|---|---|---|
| Largest contentful paint | 4.6s | 1.4s | −70% |
| Bounce rate | 68% | 44% | −35% |
| Quote requests per month | 7 | 13 | +86% |
| Enquiry to proposal | 11d | 6d | −45% |
Quote requests per month
Launch13
06In their words
“The site finally sounds like us. Prospects arrive already knowing our process and our prices, so the first call starts further along.”
Testimonials
What clients say
A preview of how client reviews will read here. These are samples; real ones are on their way.
Sample review
We came to Ahmad with a Notion doc and a lot of hand-waving. Three weeks later we had a site that actually sounds like us. The animations are subtle, which I didn't expect to love as much as I do.
Sarah M.Founder, SaaS startupSample review
Honestly, the best part was the weekly preview link. I never had to chase him for an update, and launch day was boring in the best way. His handover docs are better than our own.
Daniel R.Product lead, fintech platformSample review
Our product pages were slow and we knew it. He took Lighthouse from the 50s into the 90s, and conversions went up the month after. He notices things nobody on our team would.
Lina H.Marketing director, e-commerce brandSample review
I was sure the 3D viewer would fall over on older phones. It didn't. People spend about twice as long on that page now, and our clients keep asking who built it.
Noor A.Creative director, design studioSample review
He asked more about our business in the first call than most agencies do in a month. When he disagreed with the plan he said so, with reasons, and he was usually right.
Omar K.CTO, logistics companySample review
We handed over the Figma file and got back exactly what we designed, down to the spacing. The component library he set up still saves us hours every week.
Mei T.Design lead, agency partnerSample review
On time, on budget, and not a single outage since we launched in the spring. We've already booked him for phase two.
Marcus L.Operations manager, healthcare providerSample review
It's rare to find someone who can design it and actually build it. The scroll story he made for our launch is still what people bring up when they message us.
Carlos D.Co-founder, consumer app