UI/UX · Web design · Front-endIndia for Everyone —
designed to be
believed.
A complete website journey for Anant Aman Social Welfare Society — from donor research and information architecture to a periwinkle design system, a bento component library and a shipped, donation-first site.
6
Weeks, brief to launch
14
Screens designed
42
Reusable components
98
Lighthouse accessibility
The project
Anant Aman feeds, treats and educates people the system forgets. The work was already extraordinary; the website wasn't carrying it. We rebuilt the digital front door as a single, honest funnel — see the need, see the proof, take one action.
Our brief: make giving feel effortless and make trust feel obvious, on a phone, in under fifteen seconds, without ever exploiting the people we serve.
What was breaking
Four findings from analytics, donor calls and a heuristic audit.
Trust was invisible
Donors landed with no proof — no numbers, no faces, no place the money goes. Intent died on the first scroll.
Too many asks
Donate, volunteer, partner and follow all fought for the same pixel. Nothing won.
Programs read like paperwork
Babu Ki Rasoi, CAPP and FAA existed as dense text pages, not as stories a stranger could enter in ten seconds.
Mobile was an afterthought
Over 80% of traffic arrives from Instagram on a phone, into a layout designed on a desktop.
Who we designed for
Four intents, four different entry speeds.
The scroller
Comes from a reel. Gives 8 seconds. Needs one emotional image and one number.
The giver
Wants to know exactly what ₹500 buys and who receives it. Needs proof and a two-tap path.
The volunteer
Young, local, wants belonging more than a form. Needs a club, not a checkbox.
The partner
CSR lead or Rotary chapter. Needs credibility, scale numbers and a person to contact.
Design principles
One page, one ask
Every screen carries a single primary action. Everything else is secondary or a link.
Proof before pitch
Numbers, faces and dated drives appear above any request for money.
Soft, not sombre
Periwinkle light and serif warmth — dignity over pity. No dark, guilt-heavy imagery.
Thumb-first
Designed at 390px, expanded to 1440. Actions sit in the lower third.
Fast on 3G
Compressed art direction, lazy media, no blocking fonts. Sub-2s first paint on mid-range Android.
Repeatable
Each new drive is a data entry, not a new page build.
Information architecture
Four hubs. Nothing more than two taps deep.
Home
- Hero — India for Everyone
- The reality
- What we do
- Impact counters
- Live stories
- Join us
Programs
- Babu Ki Rasoi
- Cancer Awareness (CAPP)
- Friends of Anant Aman
- 1 Lakh One Mission
Get involved
- Donate
- Volunteer
- Partner / CSR
- WhatsApp community
About
- Story & founders
- Gallery
- Reports & compliance
- Contact
The donor journey
Six beats from reel to receipt.
Land
Reel → home. Hero states the promise in four words.
Feel
The reality band — one honest line, one photograph.
Understand
Three program cards, each with a one-line outcome.
Believe
55,000 meals. 50,000+ lives. 3,445 kids. Counted, not claimed.
Choose
A named story — Armaan, Seema, Ravi — turns a cause into a person.
Act
Sponsor a meal, join FAA, or scan into the WhatsApp community.
Visual language
Typography
Aa
Serif display for headlines — warmth, dignity, editorial weight.
Aa
Inter for interface and body — neutral, legible at 14px on cheap screens.
Periwinkle
#C9CEFF
Deep Indigo
#2B2F7A
Ink
#1B1D3A
Mist
#E9EBFF
Paper
#FBFBFF
Signal Sun
#FFC63B
Component library
42 components, six that do most of the work.
Program card
Image, title, one-line promise, metric, action link.
Impact counter
Icon, number, label. Animates once on view.
Story row
Avatar, need, urgency chip, give button.
Sticky CTA bar
Appears on mobile after 40% scroll.
Drive banner
Campaign takeover with countdown and partner lockup.
Gallery mosaic
Bento grid with lightbox and lazy loading.
The screens
Tap any screen to open it full size.
Thumb-first
Designed at 390px before anything else.
The wider ecosystem
The site is the hub; social is the road to it.
@anantamansws
Reels-first. Drives 80% of inbound traffic.
YouTube
Ladies Podcast
Long-form stories and drive documentation.
Anant Aman SWS
CSR partnerships and corporate volunteering.
Community
QR from every page — volunteers self-onboard.
Local chapters
Indore drive coordination and event reach.
X
Updates
Live drive reporting and press pickups.
How it's built
Stack
Engineering notes
- Image art direction served responsive and lazily — hero under 90KB on mobile.
- Motion limited to entrance fades and counters; reduced-motion respected.
- Payments handled by Razorpay with a two-field donate sheet, no account needed.
- Drives, stories and gallery are data-driven so the team publishes without us.
What changed
3.4×
Increase in donate-page reach
−54%
Bounce on mobile home
2.1s
Median load, 4G India
+680
WhatsApp community joins