All projectsCase 04 / 06
Agency · Brand site2026
HRA Studio
A studio site built around one idea, development that you need, indeed: a smoke-like hero, a calm monochrome palette and a clear route from first look to first call.
- Brief to launch
- 7 wks
- Pages
- 7
- More contact starts
- 37%
- Lighthouse performance
- 96
00At a glance
The project in numbers
The essentials
- Client
- HRA Studio
- Timeline
- Apr – May 2026
- Role
- Design & development
- Team
- Solo developer, with the studio's founder
- Services
- Brand site · Design · Development
- Built with
- React
- GSAP
- Tailwind
Time it took
7weeks
170 hours across 5 phases
- Discover6%
- Design22%
- Build57%
- Test10%
- Launch4%
Lighthouse at launch
- 96Performance
- 94Accessibility
- 96Best practices
- 91SEO
The problem it solved
A new studio with strong work and no web presence.
- 2.4×longer visits
- 37%more contact starts
- 1.2slargest contentful paint
01The case study
The short version
A The brief
A new studio needed a site that looked established from its first day, and a clear path that turned a first visit into a first call.
B What I built
- A monochrome identity with a single, slow smoke-like motion piece
- Service pages that answer the buyer's questions in order
- A two-step route from any page to booking a call
- A component system the studio can extend without a developer
C The outcome
- 2.4×longer average visit
- 37%more contact form starts
- 1.2slargest contentful paint
02The problem
What wasn't working
A new studio with strong work and no web presence. Prospects arrived from referrals, found a placeholder page, and quietly went elsewhere.
Where visitors dropped off, before
- Arrived100%
- Read the services36%
- Opened contact9%
- Booked a call2.1%
Share of everyone who arrived
- 1page online
A holding page with an email address and nothing else.
- 64%referrals lost
Most referred prospects never got in touch.
- 9 daysto reply to a lead
Leads arrived in personal inboxes with no context.
03The challenge
What made it hard
Make a two-person studio look established from its first day, and give every visitor a short, obvious route to a first call.
- 01
Look established
A calm, confident identity with very little existing work to show.
Difficulty 4/5 - 02
One signature moment
A slow smoke-like hero that stays light on the GPU.
Difficulty 4/5 - 03
A clear route
From any page to a booked call in two steps.
Difficulty 3/5 - 04
Editable
The founders update the site without a developer.
Difficulty 2/5
Constraints
| Deadline | Live before a pitch |
|---|---|
| Budget | Fixed, small |
| Content | Written during the build |
| Team | Two founders, no marketing |
04The process
How it came together
7 weeks and 170 hours in 5 phases, overlapping wherever it saved time.
- 01Discover1 week
- 02Design2 weeks
- 03Build4 weeks
- 04Test1 week
- 05Launch1 week
Weeks from kick-off to launch · bar labels are hours spent
- 01
Discover
Who refers them, and what those prospects need to hear.
- Positioning
- Site map
- 02
Design
A monochrome system and the smoke hero, prototyped early.
- UI kit
- Hero prototype
- 03
Build
React, GSAP and a component library they can extend.
- Pages
- Components
- Booking flow
- 04
Test
Copy passes, devices and the booking route end to end.
- QA
- Copy edits
- 05
Launch
Domain, analytics and a handover walkthrough.
- Go-live
- Walkthrough
05The result
What changed
The studio now looks the size of its work. Visitors stay more than twice as long, and more of them reach out, straight into a booked call.
- 2.4×longer visits
- 37%more contact starts
- 1.2slargest contentful paint
Before and after
| Metric | Before | After | Change |
|---|---|---|---|
| Average visit | 24s | 57s | 2.4× |
| Contact form starts | 9% | 12.3% | +37% |
| Calls booked per month | 2 | 6 | 3× |
| Reply time to a lead | 9d | 1d | −89% |
Calls booked per month
Launch7
06In their words
“We looked like a studio twice our size from the day it launched. The booking route alone paid for the project in the first month.”
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