Demo index
Ten numbered demos, each with industry, page count and a live link.
Design note
Numbered like a catalogue rather than a gallery — it reads as inventory, which is the point being made.
Agency Studio Site
APL Digital
We don't show mockups. We ship products.
The agency's own studio site — a portfolio that proves capability by shipping 10 live production demos across 7 industries, instead of showing static screenshots.
Visit the live siteapldigital.in
Open ↗Loading APL Digital…
Role
Product Designer (UI/UX)
Timeline
Feb – Aug 2025
Scale
62 pages
Built with
Figma · React · Tailwind · Three.js · Framer Motion
10
Live production demos
62+
Pages designed and built
7
Industries covered
The problem
Every web agency in Patna pitches with the same deck of Figma mockups. A prospective client has no way to tell who can actually ship, so the decision collapses to price — and the agency that undercuts wins.
The approach
I replaced the portfolio with the products themselves. Instead of screenshots, the site links to ten complete, working demos across seven industries — each with real routing, real data and real commerce. The claim in the headline is verifiable in one click.
What shipped
A studio site where the case studies are the live products. Sixty-two pages designed and built on one shared design system, so ten distinct brands stayed consistent without becoming identical.
Process
How it came together
Positioning
Identified that the real competitor was not other agencies but client doubt that anything would actually get delivered.
System first
Built the shared token layer and component library before any individual demo, so ten builds could run in parallel.
Ten verticals
Designed and shipped demos across e-commerce, healthcare, education, real estate, fitness, events and hospitality.
Studio site
Wrapped the demos in a site whose entire structure argues one point: these are real, go and check.
Design system
Colour & type
Colour system
Studio Ink
#121216
Base surface
APL Violet
#8449E9
Brand & primary action
Deep Violet
#5518BF
Hover & pressed
Signal Amber
#F59F0A
Badges & highlights
Zinc
#71717A
Secondary text
Cloud
#F4F4F5
Light sections
Typography
Display
Aa
Inter Tight — Bold
Body
Aa
Inter — Regular / Medium
Inter Tight for headlines gives density at large sizes; Inter for body keeps long service copy readable. One superfamily, two optical roles.
Key screens
What each screen has to do
Scroll-driven hero
The Drape demo previews inside the hero as you scroll.
Design note
Showing a real product moving inside the hero proves the claim before the visitor reads a single service description.
Services
Six service blocks, each naming the actual stack used.
Design note
Naming React, Supabase and Razorpay filters out clients looking for a ₹5,000 template — the qualification happens on the page.
Process
Six build principles, from brand-first design to shipping speed.
Design note
Positioned after the demos, so the process reads as explanation of proven work rather than as promise.
Design decisions
What got cut, and why
Portfolio format
Rejected
A conventional grid of project thumbnails linking to written case studies.
Shipped
Ten fully working demo products, each deployed at its own route and linked directly.
Why
Thumbnails prove nothing in a market where everyone has thumbnails. A working product a prospect can click through is unfakeable.
Design system scope
Rejected
Design each of the ten demos independently so every brand feels distinct.
Shipped
One shared foundation — ink, zinc, surface, spacing, type scale — with a brand accent and type personality per demo.
Why
Ten independent systems would have been unmaintainable at agency speed. The shared base is what made ten verticals shippable at all.
Headline claim
Rejected
'Best web design agency in Patna' — the standard local SEO headline.
Shipped
'We don't show mockups. We ship products.' with the demos immediately below.
Why
A superlative anyone can type is worthless. A specific, falsifiable claim backed by evidence on the same screen does the selling.
What I owned
Studio site10 demo productsShared design system
It's live. Go use it.
Every screen described here runs in production — real routing, real data, real interactions.
Open APL DigitalNext up
Feesto