Web design · Motion design
Rebuilding the front door — a story-led, motion-first redesign that re-positioned Khyaal for users, partners, and the next funding round.
ROLE
Lead Product Designer — strategy, IA, UX, UI, motion direction
COMPANY
Khyaal — India’s No.1 app for seniors above 50
SURFACE
Marketing website (responsive, motion-led)
PARTNERS
CEO, Chief Product Officer, COO, Engineering, Marketing, Community, Travel, E-commerce, Creative
Outcome
A story-led website that consolidates 8 product offerings and supports an active fundraise narrative.
TOOLS
01
Context
Khyaal outgrew it's website!
& we decided to rebuild Khyaal’s website from the ground up.
As the platform evolved into a multi-product ecosystem serving millions of seniors, the website no longer reflected the scale of the brand, the breadth of its offerings or the momentum the company had built over time.
Users struggled to discover the full ecosystem, while prospective investors encountered a brand that underrepresented its scale, traction and ambition. The website had become a bottleneck to Khyaal’s next phase of growth.
And that's the problem statement!
02
GOALS
What the redesign had to do
A single site working for three audiences at once.
Re-position Khyaal as a happiness club for seniors — not a single-feature app — with brand-level clarity.
Showcase the full product surface — surface all eight offerings without overwhelming visitors.
Validate trust at a glance using the 5M+ user base, real testimonials, and the brand ambassador as social proof.
Support an active fundraise by translating scale, retention and momentum into a story an investor can scan in two minutes.
Open clear paths to action for app downloads, community membership, travel bookings, and commerce.
03
PROCESS
A story-led, iterative loop
Designing a marketing website was less about arranging layouts and more about crafting a clear, cohesive story. If the narrative was weak, the experience fell apart, regardless of how polished the visuals were.
For Khyaal, the process was intentionally iterative. Rather than moving linearly from strategy to execution, the workflow continuously cycled through design, validation and refinement until the story remained consistent across every screen, interaction and breakpoint.
My process
How did i make this work?
drag to view more
01 · Discover
Aligned with business and product goals through stakeholder conversations with the CEO, CPO and COO to understand the company’s commercial vision, operational priorities and growth narrative.
02 · Research
Conducted competitive and analogous-product analysis to study positioning, information architecture, interaction patterns, motion language and conversion strategies across leading digital experiences.
03 · Architect
Structured the sitemap and information architecture collaboratively, defining the content hierarchy and user pathways before moving into visual exploration.
04 · Narrate
Translated the architecture into a scroll-driven narrative through pen and paper sketches and story mapping. This phase established the tone, pacing and emotional flow of the experience.
05 · Design
High-fidelity Figma work, motion direction, and a refreshed palette extension (pastels layered onto the existing design system). Define hand-off-ready states for modals, forms, payment APIs and integrations.
06 · Validate
Review rounds with engineering and the Chief Product Officer. Iterate. Repeat. Close every flow loop before handoff.
07 · Handoff
Delivered responsive specifications, motion documentation and implementation-ready assets while coordinating dependencies across marketing, travel, commerce, community and creative teams.
08 · QA & Refine
Worked closely with engineering during development to review builds, refine interactions and ensure the live experience matched the intended narrative and design quality.
& why did my process work?
Treated the website as both a product system and a brand narrative.
Discovery aligned business goals; research grounded decisions in market patterns.
Architecture clarified structure before visuals began.
Iterative validation kept the experience technically feasible and emotionally coherent.
Prevented gaps between strategy, storytelling, and execution.
Now, let's get into the design!
01
Discovery -
Talking to the people who depend on the website
The website is the front door for five different teams, each one had to be heard.
The Khyaal site doesn’t just serve users and investors. It’s the top of funnel for Marketing, the membership gate for Community, the storefront for Travel, and a discovery surface for E-commerce. Each team came in with different expectations, KPIs, and asks.
I ran structured 1:1s with each team lead plus the CEO, CPO and COO, then synthesised a thoughts-and-suggestions map clustering needs into shared themes (positioning, proof, navigation, conversion) so the design could serve all of them without becoming a Frankenstein.
Outcome
What discovery surfaced?
Leadership wanted brand-level confidence and an investor-ready narrative
Marketing wanted clear hierarchy for SEO and campaign landing.
Community wanted a frictionless membership path.
Travel and E-commerce needed clean entry points without dominating the home page.
02
Narrative -
The story spine
The scroll, decoded.
The website positioned Khyaal as a happiness club for seniors, using its 5M+ user base, real member stories, daily engagement and clearly surfaced offerings to communicate trust, scale and community — while creating a simple path for users to join.
I broke the story line further to -
01 · Positioning
Khyaal is a happiness club for seniors. Brand-level, not feature-level.
02 · Assurance
5M+ users — a number that signals scale, retention and trust.
03 · Product introduction
The app is the primary product, the centre of gravity for the ecosystem.
04 · Feature surface
All eight offerings, clearly laid out, scannable in seconds.
05 · Real usage
5M users engaging daily, proof of habit, not just sign-up.
06 · Real voices
Testimonials from real seniors, lived experience over marketing copy.
07 · Recognition
Member stories and editorial articles, we see them as individuals, not a demographic.
08 · Invitation
Membership details, a clear, low-friction way to join the club once we have the expectations set
Outcome
The narrative principle
A website is a story told in scrolls. The visitor should be able to skim it in 30 seconds and still leave with the full picture positioning, proof, product, and a way in.
03
Design principle -
A familiar system, with a new lightness
Extending what existed instead of replacing it.
Design system
Khyaal had an existing design system the goal was to maintain it while bringing a fresher feel. Extended the palette with a pastel set for section accents. Pastels did the emotional work, the existing system did the structural work.
Motion direction
Directed the full motion brief entry transitions, a scroll-linked anchor for the brand ambassador, and micro-interactions on cards.
Creative & cross-team coordination
Coordinated new shoots of real users and on-camera testimonials, and scoped every dependency - assets, copy, integrations across teams before build began, so engineering was never blocked.
Design hooks
Led with community as the emotional core.
Let the numbers speak for themselves.
Treated real user stories as hero content.
Used recognitions as quiet credibility markers.
Anchored the brand ambassador throughout as a consistent human thread.
Outcome
Cross-team dependencies, scoped upfront
Creative: ambassador re-shoot + 12 user portraits + 6 testimonial videos.
Marketing: long-form copy for member stories, SEO meta.
Engineering: motion implementation, payment + membership APIs, CMS.
Community / Travel / E-commerce: entry-point copy and CTAs.
04
Build and QA -
Designing through the build
The design doesn’t end at handoff.
Optimised across the full breakpoint set and broke designs into engineering-friendly components. Stayed embedded through implementation - testing motion timings, focus states, and edge cases as components came online, so issues were caught at build, not after launch.
05
Outcomes -
What we shipped?
A site that finally matches the company behind it.
A story-led, motion-first home page that walks every visitor through positioning → proof → product → invitation in a single scroll.
All eight offerings surfaced with clean entry points for Marketing, Community, Travel, and E-commerce.
An investor-ready narrative — scale, retention, brand and product all visible above the fold.
A refreshed design language — pastels and motion layered onto the existing system without breaking it.
Cross-functional alignment — five teams shipped against a shared narrative, not five separate briefs.
learnings
How did i make this work?
01 · Discover
Aligned with business and product goals through stakeholder conversations with the CEO, CPO and COO to understand the company’s commercial vision, operational priorities and growth narrative.
02 · Research
Conducted competitive and analogous-product analysis to study positioning, information architecture, interaction patterns, motion language and conversion strategies across leading digital experiences.
03 · Architect
Structured the sitemap and information architecture collaboratively, defining the content hierarchy and user pathways before moving into visual exploration.
04 · Narrate
Translated the architecture into a scroll-driven narrative through pen and paper sketches and story mapping. This phase established the tone, pacing and emotional flow of the experience.
05 · Design
High-fidelity Figma work, motion direction, and a refreshed palette extension (pastels layered onto the existing design system). Define hand-off-ready states for modals, forms, payment APIs and integrations.
06 · Validate
Review rounds with engineering and the Chief Product Officer. Iterate. Repeat. Close every flow loop before handoff.
07 · Handoff
Delivered responsive specifications, motion documentation and implementation-ready assets while coordinating dependencies across marketing, travel, commerce, community and creative teams.
08 · QA & Refine
Worked closely with engineering during development to review builds, refine interactions and ensure the live experience matched the intended narrative and design quality.
& why did my process work?
Treated the website as both a product system and a brand narrative.
Discovery aligned business goals; research grounded decisions in market patterns.
Architecture clarified structure before visuals began.
Iterative validation kept the experience technically feasible and emotionally coherent.
Prevented gaps between strategy, storytelling, and execution.
Warning!
You're about to scroll way too long
You can visit the website directly instead, if you like.
