PropertyGuru is Southeast Asia’s largest real estate platform, dominating 90%+ market share across Singapore and Malaysia.

We’d built our business on a simple classifieds model: agents list properties, home seekers browse, they connect via phone or email, and... PropertyGuru disappears from the story. Assume it to be classic Newspaper Classifieds.

We had zero visibility into what happened after that first connection. Did the agent respond? Was the listing even real? Did the seeker find their dream home or get ghosted? We were generating 700,000+ leads per month in Singapore alone, but we had no idea if we were actually helping people find homes.

We’d built a classifieds business, but users expected a marketplace. And that expectation gap was quietly eroding trust in our platform.

Navigating a two-sided marketplace

The challenge was to transform PropertyGuru from a passive classifieds platform into an active marketplace that takes responsibility for the entire home-seeking journey without breaking the 16-year-old business model that agents had built their livelihoods on.

• Home seekers needed transparency, accountability, and protection from bad actors

• Agents (our paying customers) needed efficiency, lead quality, and control over their business

• PropertyGuru needed to insert itself into the conversation without disrupting the S$100M revenue engine

This was not just a design project. It was an organizational transformation requiring alignment across Product, Engineering, Sales, Legal, Data, Compliance, and Marketing.

Multi-layered research

We all knew the problem through data, customer care complaints and App store, Play Store reviews. But to illustrate the problem vividly, I led my research team to build evidence of the problem:

Research approach (3 months across Singapore):

Home Seeker Research:

• 17 in-depth interviews with recent home buyers/renters

• 780-person survey via external agency (SurveyMonkey)

• Google reviews analysis using AI sentiment scraping

Agent Research:

• 58 hours shadowing 7 agents across different agencies

• 400-agent survey via Sales team partnership

• Analysed support tickets & Customer Care emails

Key findings of the research

Agents were paying us for visibility, but we couldn't prove we were delivering actual business outcomes. Home seekers were losing trust because we weren't accountable for bad actor behaviour.

Aligned competing stakeholder priorities

As design leader, my job was orchestrating consensus across teams with conflicting goals honouring both sides of the marketplace:

This changed the conversation from “Should we?” to “How fast can we ship?”

Organised workshop to bring alignment and clarity in plan of action

We did rapid prototyping of the actual flow. Quick sketches of newly imagined flow - Seeker side. Mock-up of Lead management for agents (inspired from inbox)

We did rapid testing of Agent flow with sales and 7 trusted agents and of Seeker flow with 10 (6 Rent, 4 Buy) home seekers.

Classifieds to Marketplaces (First step)

We were in the loop for the first time in 16 years. This loop was created by introducing Whatsapp for Business. Whatsapp has 98% penetration in Singapore, the UX is familiar and we wanted no additional app friction. This decision was led by Design and Product Team.

Progressive disclosure of agent contact was handled by Whatsapp introductory message. Agents feared losing control; seekers wanted options: PropertyGuru WhatsApp shares agent details after intro message, giving agents 1st response advantage.

Seeker side experience

Agent side experience

Earlier, leads arrived as notification to agents on multiple channels directly. They had to manually track everything.

The new Lead Management System acted as one-stop-shop for agents to manage all their leads. (70%+ Leads for agent comes from PG in their business) It served as a centralised hub (mini CRM) to access all leads in one place.

The results was multi-fold

Experience metrics (no degradation)

• ~700K monthly leads maintained — zero drop during transition

• NPS held steady at 65–66%

• App Store / Play Store ratings unchanged

• 2-minute median delay to connect parties (acceptable trade-off for marketplace visibility)

Adoption (exceeded targets)

• 80% agent adoption of Lead Management within 3 months (target was 50%)

• Beta agents became internal advocates — several volunteered to demo to their agencies

Platform shift

• For the first time in 16 years, PropertyGuru had visibility into the seeker-agent conversation

• Lead Management patterns became reusable infrastructure across other 3 geographies (MY, TH, VN)

• Opened the door to listing quality scoring and agent response tracking, which was previously impossible without the marketplace loop

Takeaway

This transformation required alignment across Product, Engineering, Sales, Legal, Compliance, Data, and Marketing. It was the most complex cross-functional initiative I've led. Changing a 16-year-old business model required every team to believe the new model would serve them better. The design team's role was to make that belief tangible through prototypes, evidence, and shipped experience.

10 Key learnings

1. In two-sided marketplaces, sequence matters more than the actual feature set. Finding right balance is critical.

2. Think first principles and explain the rational behind decisions. Agents adopted Lead Management because it made their daily work better.

3. Scope and prioritise right research. Focusing on Singapore saved us six weeks. Knowing JBTD of agents was critical to build evidence of a known problem.

4. Reinvent only when really required. WhatsApp won over custom chat because it removed adoption risk.

5. Building consensus is an art. Each teams have their incentives (fair enough). Design stands for users. The design team’s job was translating one vision into multiple languages to align teams.

6. Build proof before you make strategic bets. Validating ideas through workshops and research is critical.

7. Planning is guessing. But it’s good to plan. Planning helps in pivoting if things go wrong for such high stake changes.

8. Working with diverse set of people and opinions, especially in design - Being nice to people is important. Praise in public, tough feedback in private.

9. Show and tell - Super power of designers. The project’s real power was simulating flows, communication and what will actually be shipped.

10. Using AI is inevitable and also smart. Build AI muscles. A lot of scrapping and crawling of existing complaints was done under a week when AI was used effectively.

I truly believe in trusting the process but more importantly, people. Hope you enjoyed reading this post and learnt few new things.

While I was in Cleartrip (2016), I walked up to my manager and asked, “I want to become a Design Lead?”

He simply forwarded me an Excel sheet. ZenDesk’s internal design career ladder. (Later, I found a few more at the staff.design) But that moment changed everything.

I thought I was ready. I could design beautiful, usable products, simplify messy flows, and ship with quality. But as I read through that ladder, I realized something painful. I was a solid senior IC, but nowhere near ready to lead design in the true sense. That single moment altered the way I saw my career.

Every organization I’ve been part of, be it Cleartrip, BookMyShow, Jupiter, and now PropertyGuru; I’ve built a simplified, self-aware framework for what good looks like at different levels of design. This post is a reflection of that framework and everything I’ve learned climbing the ladder, and building it for others.

Before I being, a story (as usual)

I often think of a designer’s career as a 100-storey building without an elevator

Lets assume, legends like people like Steve Jobs or Paula Scher operate somewhere around the 90th or 95th floor. You might be on the 50th or 60th, having spent a decade sharpening your skills and understanding the broader system. A junior designer fresh out of school or someone aspiring to grow from Senior to Design lead; maybe they're just stepping onto the 10th or 12th.

Now, if you're serious about elevating others, your most important responsibility as a design leader isn't to stay on your floor and wave from above. It's to climb down, meet your team where they are, and help them climb step by step, floor by floor.

A few motivated designers will find their way up on their own, but many will burn out, get lost, or plateau without guidance. Your job is part coach, part mentor, part sherpa setting the route, and walking alongside them until they see the view you now take for granted.

Most leaders don’t make that return journey. But that’s what separates a manager from a multiplier.

So the question is: are you willing to walk up and down in various organisations you work? If yes, the following is for you.

The more senior you are, the more abstract your problems become

A junior designer might be asked to fix a screen. A mid-level designer might redesign the flow. A senior designs to increase adoption. A lead questions the entire value prop. And a head of design? They’re designing the very org that decides what problems to solve.

I had my own taste of this during a project at BookMyShow. When we began reimagining the platform beyond ticketing. I found myself zooming into granular data like user reviews, rating formats, the logic behind feedback systems. But I also had to zoom way out in understanding the economics of event discovery, our category dominance, and the future of experience design in India’s entertainment space. It was no longer just about UI. It was about shaping the market.

Design leadership is about doing this AND that. Navigating both detail and direction, pixels and politics, product and people. Once your have figured out the path, it’s your job to explain it to your team. (Climbing down)

Design isn’t a title. It’s a behavior.

Over the years, I’ve seen too many people confuse role with responsibility. Some engineers make excellent product decisions. Some researchers spot the biggest business risks. Some designers have fun in Figma.

The difference isn’t the title. It’s initiative, insight, and your intent.

Through my podcast in over 300 conversations with design, art, and business leaders, I’ve come to deeply believe that design isn’t just about making things pretty. It’s about creating outcomes.
Sujata Keshavan once told me: “Design is about building a shared vocabulary in the boardroom.” That shifted how I define value in our field.

A Framework That’s Worked for Me

Here’s how I now define expectations at each level. Simple, clear, and something my teams have found helpful:

Ownership

You don’t wait for clarity. You seek or create it. You find broken parts and fix them. You go beyond your Jira ticket and annotated Figma handover page

Accountability

You don’t just finish the work, you care how it performs. You track the outcome. You make sure everyone knows what’s going on.

Collaboration

You don’t design in a vacuum. You bring people in early. You seek diverse inputs and make people feel heard.

Communication

You write and speak clearly. You give visibility before it’s asked for. You explain both the ‘what’ and the ‘why’. (I am trusting you know the “how” of it)

Design Standards

You define what “good” looks like. And then you defend it through critique, craft, and coaching.

Multiplier Mindset

You don’t just do great work, you raise the bar around you. You share how you think. You help others level up.

I’ve seen this framework turn vague appraisals into honest, actionable yearly reviews. At PropertyGuru, where cultural expectations vary across Southeast Asia, annual calibrations used to feel like shadow-boxing. Now, with OKRs aligned to this ladder and examples of what qualifies as a “4 out of 5,” designers can self-assess with clarity and confidence. Here are few great examples of Design Career ladder - Basecamp, Figma, GitLab, Intercom

On the hustle: From micro-manager to multiplier

When I first aimed for leadership, I had a bad habit of designing myself. (I still do sometimes)

I obsessed over micro-details. Pixel nudges. Fonts. Transitions. I’d spend late nights simplifying one interaction, only to realize I hadn’t taught anyone else how to think that way.

Then I started working on low-stakes projects along with designers in public. I’d explain why something felt elegant, or why a simpler path led to more trust. Sometimes I asked juniors to shadow me while I designed. That experience transferred standards far more effectively than any critique ever did. Leadership isn’t about control. It’s about multiplication. (Climbing down)

Designing with real data, real people, real constraints

Despite holding senior titles, I still mock things up. I still prototype. Not because I have to, but because nothing aligns stakeholders like seeing an idea come to life. It feels tangible to them. Even a scrappy prototype has the power to move decisions forward.

And now, with AI in our toolkit, the game has changed again.

Tools like Lovable, Cursor, and Claude (with whose help I’m writing this very post) are letting designers plug directly into APIs. Instead of imagining flows in Figma, we can now experience them with real data and behavior. This shift allows for tighter feedback loops and more intuitive polish, because you're not just designing what looks good, you're shaping what actually works.

It reminds me of our days at Cleartrip, long before design systems were the norm. Every designer knew basic HTML and CSS. Photoshop was used for icons. Everything else happened in Sublime. We tweaked CSS directly in the product to get just the right paddings, alignments, and transitions. You knew exactly how your decisions translated in code. That discipline led to simplicity by design, not just in wireframes, but in production.

This ability to zoom in and zoom out is what defines true design leadership.

Today, many VPs of Design (myself included) operate in presentations, spreadsheets, and strategy meetings. But I’ve learned that the best way to inspire your team is still to show and not tell, because often great work is invisible. Especially when it’s done in the same tools they use.

It’s a reminder: you don’t lose your craft as you rise. You build a bridge between inspiration and execution.

The philosophy behind it all: This AND That

Too often, we reduce design to binaries:
Craft or business. Vision or execution. Art or analytics.

But the best designers don’t choose. They blend.

Perhaps people like Jonathan Ive or Dieter Rams still tinkers with materials, because they understand that to shape the future, you must stay rooted in the medium. Design leaders know business. They shape strategy. But they also obsess over kerning. They lead through both clarity and care.

Design leadership is not just about the future. It’s about systems that let us deliver, now and later. Are you ready to climb up and down for your team? Let me know in the comments.

Over the last decade, I’ve had the opportunity to shape design systems at Jupiter and BookMyShow. Back then, they were more about bringing visual consistency to fast-moving teams. Think of them as robust Figma sticker sheets that helped designers speak the same visual language providing predictable visual consistency for end users.

But what we’ve built at PropertyGuru is fundamentally different.

Here, we didn’t just tidy up files or standardize components. We re-architected the design language across four countries, multiple brands, multi-lingual interfaces, and most importantly, we shipped it with engineers, into production, on top of a 15-year-old legacy stack.

This is the story of HIVE, our living, breathing design system. And how, together with a talented team (including Mayank Sagar, our System Lead), we elevated design to be a foundational layer of Southeast Asia’s most trusted real estate marketplace.

Before we begin, how about redesigning Giraffes long neck?

Before we laid the first brick of HIVE, I have been thinking like a classic designer or engineer, should we rebuild from scratch or evolve what already exists?

Nature gave me the answer. A giraffe’s long neck evolved, inch by inch, over millions of years. Not just to reach tall trees but to survive in a competitive ecosystem. Each vertebra, each muscle group carries inherited intelligence. It’s not just form, but mainly it’s function in it’s larger context.

Legacy design systems are similar. At first glance, they may look outdated or fragmented. But buried within are unknown and invaluable lessons. Be it edge-case solutions, real-world behavior patterns, fixing of down time or security features. There were 2 options. Analysing or ignoring. Discarding them for a “clean” start often means losing valuable DNA.

So we didn’t decide to redesign Giraffe’s neck but fix what is broken. We respected the past, responded to the present, and built for the future.

This thinking became the soul of HIVE. It wasn’t just a design upgrade. It was a system evolution.

What is HIVE?

HIVE is more than a component library. It’s our collective muscle memory. It’s where product, design, and engineering collaborate to build experiences that are accessible, familiar, and modern.

The name reflects our philosophy: a hive is strong architectural structure because of its collective nature. Each component is a brick, intentional, reusable, and scalable. It gives us a foundation of our digital experience across PropertyGuru and iProperty platforms.

Problems with most legacy products

• Inconsistent UI across geographies, even for the same feature

• Time wasted on redesigning or re-coding similar components

• Inability to scale new features quickly due to technical and design debt

• A fragmented design language that eroded trust and usability

These are obvious because as organisation grows, they optimise for speed to market often creating tech and design debt.

Building with clear objectives

• Bringing consistency to our evolving suite of products and features for agents and consumers — whether it’s the agent-facing Marketwatch, new listing creation flow, or upgrading our consumer-facing listing details page

• Helping designers and engineers work better together

• Reducing rework and duplication across geographies

• Building a predictable and consistent experience for both sides of the marketplace. Agents and Consumers. Especially for agents since they are power users and habitual to existing ways of working

What we found (a bit embarrassing)

Let’s be honest any long-running product accumulates clutter:

• Disconnected patterns, interactions, flows and visual treatment

• If I have to be a bit nerdy, 47 spacing values, 8 variations of the same button, 13 unused components buried in Figma and more

Every inconsistency was an opportunity to simplify, unify, and bring clarity. And every cleanup move helped the team move faster. Creating experiences that feel cohesive, familiar, and trusted for our users.

The Engineering story

Our engineers had been building with care but often improvising to fill gaps. We all know the challenges of building for business outcomes while striving for performance. But both engineering and design teams understood the long-term impact of continuing down this path. So we:

• Aligned frameworks for better interoperability

• Reduced duplication and focused on component quality

• Created shared patterns for faster, more confident collaboration

• Built modular systems that could grow with us — like adding new rooms to a strong foundation

After all our agreements and disagreements, we aligned. We presented our plan to leadership with a big caveat:

“For some time, PropertyGuru will look broken (about 6 months) with new and old components on the same page. It’s the tradeoff of going brick by brick. Are we ready?”

The product and leadership teams agreed. It was the biggest win we could achieve. We were refining and evolving what existed into something more cohesive, modern, and accessible. But there was a cost for this.

Every change comes at a cost. It was painful.

Change always meets resistance. So we made it gradual. Wide ranging initiatives across team ensure the pain was handled gracefully.

• Old and new systems ran in parallel

• Weekly adoption updates kept teams aligned

• Regular grooming sessions ensured designers were using components correctly

• Training and documentation gave engineers plug-and-play clarity

Change was evident and celebrated

Numbers spoke for themselves

Another important element - Accessibility

We recently launched sustainability report and better support for labels and type rendering to our system. For designers, accessibility isn’t a checkbox — it’s a core design principle. HIVE now includes guidance for contrast ratios, focus states, semantic structure, and screen-reader behavior. We’re embedding inclusive design right into the system, not layering it on top.

Reflections

I’ve built design systems before. But HIVE is different. It’s not just a design achievement. It’s a cultural shift. It has widen my perspective.

• The strength of cross-functional collaboration

• The power of incremental evolution

• The maturity to preserve what works and refine what doesn’t

• The leadership it takes to align business, design, and tech across multiple regions

To design system practitioners: this is what it looks like when scale, geography, and legacy meet.

HIVE isn’t just a system. It’s how we bring 4 million users. 40K plus agents, property developers, engineers, designers into a more cohesive, trustworthy experience every single day. PropertyGuru is here to find your dream home and it take a village.

We are just just getting started. Tell me what do you think?

BookMyShow is India's leading entertainment ticketing platform. With over 10 million tickets booked each month, we had one of the largest audiences for moviegoers in the country.

But we noticed a silent gap. Despite the volume of bookings, very few users were rating or reviewing films. This matters a lot in India, as a film’s first weekend (when it releases on Friday) can make or break its success. Good reviews influence audiences immediately, and BookMyShow’s brand already had more weight in India than even IMDb or Rotten Tomatoes when it came to local movie sentiment. (Unofficially, OTTs like Netflix and Amazon Prime decide rates to buy rights for the film using BookMyShow’s rating.)

Yet, the review experience was clunky, trust was questionable, and hardly anyone took the effort to write. We decided to fix that with a lot of design intervention. The core sentiment was…

How might we empower users to choose the right movie and contribute meaningful reviews once they’ve watched it?

Our goal

• Increase the number of movie reviews submitted by 25%

• Reduce the average time-to-submit a review from 60 seconds to under 10 seconds within 3 months of launch

• Maintain a minimum 80% user satisfaction score in usability testing

First the audit

I always encourage my team to begin with an audit of what already exists. In legacy products, there is the collective wisdom of earlier teams. Auditing not only helps surface what worked (and what didn’t), but also gives the current team a chance to clean up Figma files, reduce design debt, and revisit past decisions and data with a fresh lens.

We found:

• 10+ inconsistent rating icons (stars, hearts, percentages)

• Reviews are buried in low-visibility areas

• No clear feedback loop — users weren’t acknowledged or incentivized

• People writing 140-character gibberish just to bypass the validation

Solution: We cleaned it up. Picked one visual language (heart ratings), reduced friction, and built a system. Yes, showing ‘Star’ for ratings has zero cognitive load. But being the only dominant player in the Indian landscape, we made peace with the brand and marketing ambitions of being bold and setting new standards.

Listening to 1400+ users

Before jumping into solutions, we spent time understanding why people weren’t writing reviews.

We ran two rounds of research — first with 62 users through deep phone calls and surveys, followed by a broader survey with 1400+ users. What we uncovered were problems that seem small from the outside, but completely block action when you're the one using the product.

We wanted answers to three core questions:

These weren’t usability bugs. These were evident emotional blockers: Hesitation, effort, doubt, and a feeling of being judged by others.

Obvious fixes

We studied the end-to-end rating and review flows of various other apps like Tripadvisor, IMDb, and Amazon, and looked for commonalities and patterns that users are habituated to

1. Reduce the friction.

2. Create multiple entry points,

3. Add lightweight review forms, push notifications,

4. Pre-fill hashtags based on real user language like “Jhakaas”, “One-time watch”, and “Blockbuster”. Just enough to get someone started.

Designed a 3-step (10 secs) review flow

We tested 30+ prototypes and landed on a clean, modular component:

1. Drag-and-release heart slider (with snap + haptic feedback)

2. Select optional hashtags

3. Write a review (optional)

The entire flow took just 9–10 seconds for most users.

Made reviews trustworthy

Trust is a critical component. Only users who booked tickets on BookMyShow showed up with a “Verified” badge. We also changed the backend rating algorithm to give more weight to these verified inputs — reducing fake or spammy reviews.

Build once. Reuse across platforms and partners.

The review component is a modular system that could be reused in a wide range of use cases. Homepage nudges for returning users. Movie details pages to show the split of ratings and reviews for one who is deciding to watch. Post-movie notifications encourage a verified user to rate and review.

This even enabled new partnerships with Amazon India, where our ratings were syndicated for movie listings.

Impact is worth talking about

• Time to submit a review dropped from 60s to 10s

• 24% increase in reviews within the first month

• 3x growth in meaningful written reviews over time

• Boosted credibility and social shares across platforms

Today, BookMyShow has the highest number of ratings and reviews for Indian movies in the world — even surpassing IMDb and Rotten Tomatoes for some films like Bahubali.

Reflections from this project

This was one of the most fulfilling product interventions I’ve led at BookMyShow, undertaking a business-critical yet underloved feature and turning it into something simple, trusted, and widely used. And we did it not through big bets, but through small, thoughtful design decisions backed by listening and empathy.

Along the way, I picked up a few timeless takeaways — especially for designers who want to drive meaningful change:

• Add affordances. People don’t type. Make it easier to start. Nudges, hashtags, sliderseven small cues help break inertia.

• Don’t make me think. People don’t read. TL;DR summaries, icons, and scannable content go a long way. Especially as we move into the Reels world.

• Give care, expect care. People don’t always care, and that’s okay. if we as designers do our job with love, care, and attention, so will our users care enough to take the next step.

• Design won’t work in isolation. Work with your PMs, devs, QA, and marketing. Collaboration builds momentum and earns trust.

• Build a culture of empathy. Design is not about control. It’s about creating systems that work even when you're not in the room.

Good design isn’t just about pixels or polish. It’s about nudging human behavior, at scale, with care.

On that note, I would like to thank Jasdev for championing this project from the Design team. Please comment and let me know what do you think.

When I joined Jupiter.Money as VP of Design in 2020, I took on a very interesting problem. This project was not part of yearly roadmap and OKRs. However, we took on this challenge to establish voice of Design in an early stage startup. It not only built trust among users, made design a strategic partner in the organisation but also became an industry standard for over 3+ million accounts in India.

A debit card kit made by external agency (before I joined)

Our debit card kit was visually stunning. Thick premium envelopes, extensive branded literature, stickers, protective sleeves, exactly what you’d expect from a design agency trying to make a splash. But as we scaled from hundreds to thousands of daily dispatches, this “premium” experience became our operational liability.

Each card took 8 minutes to manually assemble. Industry standard was 4 minutes. Our delivery time had gone up to 7 days. Industry standard was 5 days. With over 5,000 accounts opening daily, the operations team was facing bottlenecks. Customer Care was reporting complaints.

Defining goals + adding in quarterly plan.

I as a design leader established a direct connection between, delay in delivery will result in lowering brand trust and poor experience. A non-scalable card kit and workflow will become a bottle neck as the startup grew in volumes.

To get buy-in from other stakeholders (marketing, engineering, legal and compliance, customer care) the design team set ambitious and objective goals:

1. Time to order a debit card

2. Time to deliver physical debit card

3. Time to activate debit card on the app

4. CSAT score improvement

5. Cohesive online and offline experience

These were then part of a roadmap and aimed at finishing in 1 quarter.

Why these goals made sense and everyone was aligned?

The operations team was vocal about not meeting the promised SLA for debit card delivery. Customer Care team was reporting complaints after delivery. We already knew about non standard packaging, too much literature in the kit and most importantly, product had evolved so communication was in-coherent.

The deep dive research

To make a case stronger, I formed a 2 member design team to identify JTBD of people responsible for debit card. We conducted 2 day field study to understand current workflow in a secure dispatch facility in Mumbai. (Thanks to Ops team for letting us into highly secured facilities). We saw firsthand, the manual, multi-step process resembling a traditional factory assembly line; labor-intensive, repetitive, and inefficient.

• 70% of the work at debit card centres was manual (Due to it’s odd size)

• The process was labor-intensive, and inefficient (Packaging was complicated)

• Manual security checks increased possibilities of errors.

• Each card took 8-9 mins to pack (Industry standard is 3 mins)

• This resulted in 8 day delivery timeline (Industry standard is 5 days)

Plan of action

We did 1 day workshop and followed (slightly modified) double diamond framework to generate ideas. Design team was excited to learn new things beyond their regular UI.

We were now aware of how other big banks operate. How we should not reinvent the wheel and work within existing machinery. As a brand, we need to continue impress millennials (Target audience) and also reduce literature (save paper, save time, make it simple). All this ensuring offline and digital experience cohesiveness. Security was non-negotiable and handled by main Bank.

Treating above as guardrails, we

• Changed the envelop

• Make the kit light, friendly and memorable

• Made a new sticker

• Redesigned the Card (BIG win, more later)

Additional win (that had no tangible metric)

As they say, ‘make hay while the sun shines’. We managed to improve the card during this exercise. This was a quick unplanned activity which design team did to ensure a personalised experience. We worked with VISA team to ensure we follow required standards and improve the PVC of the card. Usually these sort of “change request” can not be justified with measurable outcomes - so it’s smart of get it done in the flow.

Time to order a debit card

We did bunch of experiments by adding “Order your debit card” as part of onboarding flow. “Get your debit card” as the first step once your account is opened and more. These experiments continue as part of culture chasing target numbers.

We fetched physical address to make the the flow seamless and fast. The instructions written on the physical kit were well written and robust to handle future developments on the app.

Enhancing the App Experience

The redesign extended seamlessly into our digital app onboarding and management experience, reinforcing brand consistency and user satisfaction.

• Intuitive onboarding and activation flow

• Consistent visual design aligning physical cards with digital representations

The Unboxing Experience Reimagined

The redesigned packaging now offers an exciting unboxing experience that is both practical and delightful:

• Envelope and One-Pager: Efficiently printed on 120 GSM paper with a matte finish for durability and appeal.

• Securely Attached Card: Simplified and secure, ensuring accuracy and reducing manual handling.

• Vibrant Sticker Sheet: Adding user delight upon opening the kit.

Impact of the Redesign

The new design dramatically improved operational efficiency, reducing card packing and dispatch time from 8 to under 2 minutes. The simpler process significantly decreased errors and enhanced overall customer satisfaction

Key Learnings

This redesign journey at Jupiter made revisit the critical balance between creativity and practical usability.

1. Design is beyond UI and UX

2. Proactive fixes need to be timed smartly

3. Mapping efforts to outcomes is critical for a leader

4. Sometimes Design has to go extra mile to build credibility

5. Designers have to ‘earn’ seat at the table

6. Don’t re-invent the wheel

7. Design for outcomes. Craft is implicit.

2 videos of people unboxing the debit card.

Before

After

Hope you enjoyed the post!

LDM empowers agents to boost productivity, close deals faster, and achieve their financial goals. This blog post dives into the design details of this powerful new tool: Lead Management.

What is Lead Management?

Whenever a home seeker connects with an agent on our platform, we create a “Lead” for that agent. This Lead contains all the details the home seeker shared, which are then seamlessly transmitted to the agent through Lead Management (LDM). LDM acts as a centralised hub, functioning as a mini CRM for agents, allowing them to access and manage all their PropertyGuru leads generated in one convenient location.

Why did we decide to make LDM for Agents?

• Simplify the agent experience: Agents are constantly on the move and manage leads across multiple tools, sticky notes, viewing schedules, and other tasks. This fragmented approach reduces efficiency.

• Prioritization: Empower agents with actionable insights to prioritize leads. Currently, agents receive a high number of leads across various channels with minimal information about the nature and needs of each lead. This makes prioritization difficult and can lead to missed opportunities for agents, and home seekers annoyed by delayed or dropped responses.

• Increased Productivity: Design features to streamline lead management with clear calls to action and making notes in one place. This allows them to focus on closing deals and providing exceptional customer service.

Introducing Lead Management

LDM centralizes all an agent’s leads within a user-friendly platform called AgentNet. It’s a mini-CRM, offering insightful data and intuitive features to help agents make informed decisions and connect with leads faster. For some of our agents who receive hundreds of leads, this platform offers a central hub to access and share lead insights, empowering them to make informed decisions that result in a smoother process and quicker transactions.

Version 1: Here’s how it looked in our first launch: prioritising speed and agility, we built our initial version with our legacy framework, focusing on core functionality.

Early Feedback from Agents

We tested this with a few of our power users in Singapore, and the feedback was overwhelmingly positive. They loved the consolidation of leads. This early validation fueled our next move.

Hive Takes Center Stage: A Design System Revolution

Concurrently, we were (and still are) building the foundation of our new design system called HIVE. You’ll learn more about it in upcoming posts. This new system isn’t just functionally superior, it’s also aesthetically pleasing. The design team saw an opportunity to incorporate HIVE components into the next iteration of LDM. We had a wealth of pre-built elements ready in the system, including bottom sheets, buttons, empty states, a set of cool illustrations, filters, and our brand-new icon set. Here’s a quick glimpse of HIVE in action.

Designers’ & Engineers’ time to shine — Incorporating Hive in LDM

Our design system isn’t just a collection of components in Figma; it’s a well-documented system with most components existing as drag-and-drop code snippets that function seamlessly within React and React Native. Huge thanks to our amazing engineering team for making this possible! We seized this opportunity to build confidence with the product team by shipping LDM on time but with the new design integrated. A big shoutout to the product folks who were thrilled to see Lead Management in its sleek new form, complete with some additional features. Here’s how the new LDM started looking…

Different types of leads with their iconography

We incorporated some magic with illustrations. Following our brand guidelines, we designed a set of reusable illustrations that effectively tell stories across various contexts.

This is how it all came together…

Our learnings — from a Designer’s lens

Teamwork

LDM wouldn’t be possible without the incredible collaboration between PropertyGuru’s finest minds. Design, Research, Engineering, Brand, Legal, Sales, Data, Project Management, Agent Trade marketing, QA, and orchestrating all of this through Product Managers. This project is an example of the power of teamwork and shared vision.

Push beyond good

When launching LDM, we prioritized two key areas: iterating to solve deeper problems for agents and elevating the user experience through design. This focus on design not only improved aesthetics (UI) but also indirectly addressed issues with user perception, ease of use, and performance. The success of LDM was built on the trust and collaboration between the design, engineering and product teams. By championing the parallel development of functionality and design, the product team played a crucial role in achieving this outcome. “Push Beyond Good” is PropertyGuru’s core value. We went beyond simply delivering a functional product and strived to create an exceptional user experience through design.

Be ready. Do your homework.

The biggest success factor of this project was the readiness of our Design System, both in terms of design and engineering. Companies rarely prioritize design changes over immediate business outcomes. However, by demonstrating the possibility of improving not only the user experience (UX) but also the user interface (UI) concurrently, we boosted the confidence of all stakeholders to embrace this visual enhancement.

Take risks. Create what’s next!

LDM represents a paradigm shift. By prioritizing visual and user experience over immediate monetization, we’re placing a strategic bet on the power of design. This aligns perfectly with our mantra of “Create What’s Next” — a philosophy that prioritizes value creation before all else.

Stay tuned for more design updates from PropertyGuru

Today we’re launching Fare Alerts to help travellers keep tabs on airfares, get the best prices and better plan their travel.

Fare Alerts is an email-based alert with multiple benefits for travellers. It not only tracks and delivers email alerts as airfares fluctuate, it also recommends when you should book. In addition, Fare Alerts helps you track airfares around public holidays or other specific dates. A unique Fare History Graph scours historical data and periodically apprises you of fare fluctuations so you can monitor fare changes and grab the best prices.

Subscribing to Fare Alerts is simple — just fill out a basic form to tell us your origin and destination, how often you’d like to receive each alert and your email address. You can create as many different Fare Alerts as you want.

You will start receiving your email alerts based on the frequency you specified. Here’s what the email alert looks like.

If you want to stop receiving an alert, just click unsubscribe in the email — simple.

It sucks when that trip you’re planning suddenly shoots up in price — we want to help you navigate these price changes and get the best deal. Set up your Fare Alerts today — after all, it’s only fare to be alert when planning your travel.

Originally published at blog.cleartrip.com on March 19, 2012.

Letting our customers do what they need to do faster has been one of the enduring passions that drives the Cleartrip team. We take great pride in the fact that Cleartrip is one of the absolute fastest ways to book your travel, something it takes great design supported by monumental feats of engineering to deliver. Over the years we’ve worked tremendously hard to make sure that our site works fast and that our products are so simple to use that they let our customers get things done faster.

Today, we’re extremely proud to introduce Expressway, one-click bookings for flights.

Expressway lets you store your traveller profile and payment details safely and securely in your Cleartrip Account so you can book your flights with just one click. Expressway is a first in India, a country where making payments online is complicated and prone to error. If you’ve ever used iTunes to buy music or apps, you already know how fast and convenient it is to make purchases with one click.

Expressway is an opt-in feature and needs to be turned on before you can use it. Sign in to your shiny new Cleartrip Account and click the Expressway link in the left navigation.

To turn Expressway on, click the “Start by adding a card” button, enter card details for whichever payment card you want to store. Expressway works with credit and debit cards and supports all the major card types — American Express, MasterCard, Visa and more.

Next, enter your name or the name of the person you most frequently book for. If you book for many different people, you can skip this step. If you skip this step, you will need to fill in names every time you book using Expressway.

That’s all it takes to turn Expressway on and set it up. The next time you’re making a flight booking, you’ll just need one click.

Expressway is tied to your Cleartrip Account and works on our regular web site and on Cleartrip Mobile. Incidentally, Expressway replaces Express Checkout, which was previously available only on Cleartrip Mobile — this is ironic because it was the adoption of Express Checkout by our mobile users which spurred us on to develop Expressway as a solution that works across all devices.

Expressway delivers huge benefits to our customers:

• No more carpal-tunnel syndrome: Over 77% of our flight bookings are by users who book for a single passenger and we wanted to make the act of booking faster for our customers. Set up Expressway once and wave goodbye to repetitive typing every time you book.

• Bulletproof security: Expressway makes no compromise when it comes to the security of your data — it is designed from the ground up to make theft and misuse of your data impossible. Industry standard 128-bit encryption ensures 100% protection of your data and the no storage of the CVV number or password.

• Store as many cards as you like: Many of us have multiple different credit and debit cards — Expressway works with them all. Store one or more cards and use whichever one you like while booking.

Our teams have spent months and months preparing for the launch of Expressway — from designing and fine-tuning every pixel of the user experience to engineering a system compliant with the most exacting and bulletproof security and safety standards to protect your data. In addition to our design and engineering efforts, we’ve spent enormous amounts of time with payment security experts and auditors poring over every detail of our implementation to ensure we are 100% compliant with the Payment Card Industry Data Security Standard, an information security standard for handling cardholder information for the major debit, credit and other payment cards.

Our PCI DSS compliance ensures that Expressway is 100% secure — your information is encrypted with the same industry-strength 128-bit encryption which protects all your online transactions. All data stored in Expressway is stored on firewalled servers which are completely separate from the rest of our servers and cannot be accessed by any of our staff. To further enhance Expressway’s safety, we do not store CVV numbers and all transactions made with Expressway still need to go through the additional authentication required by Verified by Visa and MasterCard Secure.

Expressway was designed to reduce the pain and time that our customers experience while making card payments for their travel because we think your time is better spent experiencing and enjoying life. It’s awesome — you’ve never booked a ticket this fast. Get on the Expressway now.

Originally published at blog.cleartrip.com on March 29, 2012.

It has laid the foundation for a raft of amazing super-secret features which we’re already hard at work on.

The 4 step booking process on Cleartrip has seen many incremental changes since we launched, but over the last five years, it’s never been wholly re-imagined and redesigned. Last week, with great excitement, but little fanfare, we rolled out a completely redesigned booking process for flights and hotels.

Ring out the old, ring in the new

This image shows a quick comparison of our old and new booking screens.

Lots has changed, here’s the big ones:

• Orientation — The old booking steps were horizontal with a top-level progress indicator. We’ve changed this to a vertical accordion-style format, which lets you move through the different steps to complete your booking.

• Compact view has been introduced to display a summary of the relevant information for each each step you complete in the booking process. The compact view is dramatically more efficient than the right-column summary we were displaying previously.

• Cleaner forms with in-place error handling and better notifications for server side accidents.

• Under the hood lies a lot of highly optimised code and asynchronous server calls to make the booking process look and feel smooth and quick.

The delight is in the details

Yep, delight. Most travel companies don’t really focus on delighting their users, we’re not one of them. We’ve added tons of little touches, which, hopefully, make your travel booking “feel” happier. We all love to travel, so why shouldn’t booking travel make us equally happy?

Itinerary step

When we redesigned the Cleartrip Account, we introduced a uniform itinerary format, which was consistent on our desktop and mobile products. With the redesigned booking process, that uniform itinerary is now available when even you’re making a booking. For the first time, we’re introducing a compact itinerary view which is persistently visible throughout the entire booking process. The compact view contains essential information required for your review as you proceed with your booking.

Here’s what the hotel itinerary looks like

Sign in step

We thought we’d have some fun letting new users know just why they should get their very own Cleartrip Account, so there’s a raft of reasons displayed in a little yellow sticky note to the right of the sign in form. If you already have a Cleartrip Account, the message on the note changes. We’re not going to say what it changes to, see for yourself the next time you book.

Traveller info step

When we relaunched the Cleartrip Account, we added faster booking for friends and family by allowing you to store traveller names and extended profiles in your Cleartrip Account. That list of names is now available in the newly designed booking process. Adding traveller names while you’re booking has never been simpler or faster. If you’ve stored multiple traveller names and profiles in your Cleartrip Account, a list of their names becomes visible whenever you click in a traveller name field. You can click the name you want or just start typing to narrow down the list. All the available and relevant information for each traveller stored in your Cleartrip Account will be processed with the booking, including seat and meal preferences, passport information and frequent-flier memberships.

Payment options

Popular banks for net banking are pulled out from the list so you don’t waste time in searching your bank. None of the payment forms request contact information we already have again, significantly reducing the number of fields you need to fill out before you can book.

Expressway

One-touch flight bookings with Expressway just got a hell of a lot sexier — just one field to be filled out and one button to be clicked.

There’s so much more to the new design, but we just couldn’t fit it all into one post. We’ll be sharing more about our beautiful new booking confirmation pages soon, stay tuned.

Originally published at blog.cleartrip.com on July 24, 2012.

Along with the redesign of our booking process, we also redesigned our booking confirmation screens. Here’s what the old confirmation screen looked like:

Almost hurts our eyes to look at it now (isn’t 20–20 hindsight great?). The old confirmation page had just become a dumping ground with us trying to help you with anything and everything; trying to sell you everything else we possibly could. This time around, we wanted to avoid that approach and craft a design that would be immune to the future buildup of clutter. We started off by chunking all of the content on the page into three groups — your booking details, free and easy add-ons for the trip you just booked and one special offer just for you.

Taking off from that skeleton layout, here’s the newly designed booking page — cleaner, lighter and so much crisper:

For the display of your booking details, we went with a boarding pass metaphor. We also added a few handy buttons to the details to let you SMS or email the booking details to fellow travellers or to select seats for your flight right away.

The second block of the page helps you focus on some things you may want to add to the booking you’ve just made. This block contains a 1×4 grid with banners that let you easily book a flight to the airport or set a Fare Alert for your return trip and more.

The third and final block contains a single “Deal of the Day” banner, where we showcase just one handpicked deal.

The booking details displayed for hotel bookings are obviously different, here’s what that looks like:

Each booking confirmation page now contains a handy receipt so you can clearly see the total cost for your trip and how that cost is broken down.

Finally, we also redesigned all of the post-booking email messages you receive from us. Here’s a sample email for a successful flight booking:

Your travel booking means the world to us and we wanted that to show in the design of our confirmation screens and other parts of the post-booking experience.

Originally published at blog.cleartrip.com on July 26, 2012.

Indicators for steps in the booking process

All bookings on Cleartrip take place through a guided 3 or 4 step process depending on whether a user is signed in or not. Each step is now marked with neatly defined numbers whose display state is sensitive to context, such as whether that step has been completed or not. As you complete each step in the process, a comforting little tick appears next to the step number as an indicator that you’ve completed that part of the process. If you hover your mouse pointer over the completed step, the green tick changes into a black edit button to let you make changes. If you edit a step after completing it, the step number glows with a throb until you’re all done with your changes.

As you move from one step to the next, a gentle animation signals the transition. We used both jQuery and CSS3 to implement these animated transitions. Less capable browsers (IE) will not see the animation, but the experience degrades gracefully for them.

Compact itinerary format

With the new design, we introduced a new compact view for the itinerary. We think this is a great little touch because it persistently makes information available to you after you move past the itinerary review step in the booking process — a quick glance is all it takes to reconfirm that you’re booking the right thing. Similarly, we also display a compact list of the traveller names you enter, making it easy to double-check that you’ve put in the right names and spellings.

The compact itinerary is also used on our booking confirmation pages and the confirmation e-mail.

Buttons made more usable, more useful

We’ve taken the new button design we created last year to the next level. The buttons now feel much more alive and responsive. The new ‘working’ state for a button has a slick candy-bar animation to indicate that something is happening in the background. Also, once a button is clicked it immediately enters its ‘working’ mode and gets disabled to prevent users from clicking a button twice and resubmitting data. For actions that take longer for the servers to respond, we’ve added text alongside the button so that you aren’t left wondering whether anything is happening or not.

A better way to redeem coupons

The old design of our coupon widget was a bugbear — it caused endless frustration for customers who couldn’t quite figure out how it worked or whether a coupon had been entered successfully or not. We paid special attention to it in this redesign, focusing on making it easier to use, easier to understand and easier to see the impact of entering a coupon code. The coupon widget got a makeover not just in terms of its look but also how it communicates with you. The new design eliminates any confusion by clearly stating how much you’ve saved as soon as a coupon code has been successfully entered. We also moved the widget into the first step of the booking process so you can enter your coupon and check that your discount has been applied before proceeding.

Humane errors

In the old design, form errors were displayed at the page-level and referenced the fields with a red mark. The new design displays errors at the field level with distinct red borders that make it unmissable. We’ve also spent a lot of time on the error messaging to make it easier for users to recover from errors and continue with what they came here to do.

Travel booking systems are inherently complex because they almost always involve the integration of multiple disparate third-party systems — airline and hotel systems, partner systems, payment gateways and more. When there are this many different systems involved, the probability of something snapping increases exponentially. The new flow handles these unfortunate events in-page with a yellow dialogue box dropping in from the top of the screen. We sincerely hope you won’t see a lot of these.

Candy-bar interstitials you can lick

The animated progress bars on our interstitial pages have an all new candy-bar inspired look. We’ve animated them purely with CSS3 animation. For older browsers, a simple fallback image is used to gracefully degradate the experience.

Sticky notes — because we don’t want you to miss a thing

From the very beginning, Cleartrip was designed to make it easy to book tickets without requiring our customers to have a valid account with us. It’s easy to book with us without signing in, but we wanted to let our users know what they were missing out on by not having a Cleartrip Account. We made a whole bunch of sticky notes to communicate the benefits of getting a Cleartrip Account.

The sticky note shows users a different reason to sign in every time. If you do happen to have an account, we also let you know how much we appreciate your having an account with us.

Traveller suggestion and logic.

One of the biggest things that customers who book without signing in miss out on is the sheer ease with which they can enter traveller names while booking. A lot of our users travel with the same people or book frequently for others. All your recently booked travellers’ information is stored in your account. So, if you’re booking for someone you’ve recently booked for or saved in your account, all you have to do is pick the name from the list. If you start typing, the list narrows down to show only names that match with what you’re typing. The list is also smart enough to understand the type of traveler based on your selection in the title field; selecting “Mr.” will show only male names in the list. If you haven’t tried this out yet, we’d recommend setting up some traveller profiles in your account right away so you can give it a shot.

Payment made simple

One of the key pain points we wanted to address with this redesign is simplifying the payment step and making it smoother. We’ve made some subtle changes. Your last used payment method is stored in your history and shown as the default option the next time you book.

For people who like paying with net-banking, we’ve pulled out the six most popular banks banks to enable single click selection of your bank.

You need confirmation

The redesign of the confirmation page uses a boarding pass metaphor to display your booking details. To make the metaphor complete, we designed a bunch of rubber stamps, with which we “stamp” each booking.

We designed a total of nine stamps — three different shapes in three colours each. One of these stamps is randomly selected and displayed for every successful booking you make.

Payment receipt

Another nice touch is the new payment receipt on the confirmation page. The old design of our confirmation page pushed the payment details into the right column and gave them very low visual priority. The new design gives pride of place to the payment details in a gorgeous little receipt.

That sums up a lot of the little details that went into this redesign. We’ve always been huge believers in looking after the details, because all the little things add up to a big difference.

Originally published at blog.cleartrip.com on August 1, 2012.

Quick look

Similar to a blurb on the back-cover of a novel, ‘Quick look’ provides a hotel’s overview at a glance by previewing amenities, rates and thumbnail images. We’ve also added recommendations from travellers on what they love about a hotel.

Re-imagining the maps experience

We went back to the drawing board to make the maps experience faster, smarter and more usable. We also wanted to make our users more aware of the map search, so we added ‘map-cards’ to the right of the results to give users a preview of the city’s map.

Hotel details

The new Highlights tab effectively provides a snapshot of a hotel in a three column, magazine-style layout. The first column derives its inspiration from our Small World destination design. We did over 10 iterations to get the Highlights design just right and we’ll probably still be tweaking it for a while, but we think it’s a big step forward from the previous version.

We’ve added subtle touches to the navigation bar to encourage users to explore a hotel in greater detail.

The new darkroom design for photos by darkening everything and upping the contrast to put the focus squarely where it belongs — on the photos.

Our new Map tab derives inspiration and information from Small World, showing a hotel’s location in context to a destination’s sights and sounds.

Stamps and badges

Our customers loved the stamps on our booking confirmation page, so we made new stamps for the search form. The stamps are fashioned after the retro hotel signs often seen on highways in the United States. We think the stamps do a great job of highlighting elements of our Hotels product to newer customers.

We’ve also added beautiful badges for our most popular and best-selling hotels. These badges are meant to let users easily spot the best hotels when they’re scanning a list in the search results.

There’s hundreds and hundreds of little touches that we would have loved to highlight, but there’s only so many words in a blog post.

Personally, I’m proud to say that throughout the Tuxedo design process, we lived by this principle:

“Simplicity as a result of a creative process is the ultimate sophistication”
~ Leonardo da Vinci

Originally published at blog.cleartrip.com on July 12, 2013.

By now, you may have already experienced the Bus search that launched soon after the redesign — buses was the first new product which leveraged the new design language & framework. With Trains & Packages moving to the new design, we are happy to announce that all our core products are now wearing Tuxedoes.

Codenamed ‘Tuxedo’, this project has been a true labour of love for us — months and months of hard work, which has given us a new design framework for the next five years.

Search forms

Search results

Tool bars

You can see we are putting our tool bars to good use. The search summary, view switchers and smart tabs — and we’re just loving the way the design of the toolbars is scaling across our different products.

Individual result units

Unifying the user experience across all products is a huge milestone for us. We believe, consistency not only helps our customers as they move from one product to another but it also builds a tremendous amount of trust. The consistency in design patterns and code is also going a long way in helping our teams deliver much faster.

As we finish the fourth phase of Tuxedo, we start another phase that takes our products closer to being more cohesive. Stay tuned, we’ll be back with more news on this front.

Originally published at blog.cleartrip.com on September 4, 2013.

Deciding on a weekend getaway is challenging. Apart from selecting a location that’s within a preferred driving distance or offers a specific experience, the lack of information on available options is a hurdle. Offbeat destinations, in particular, have several resorts tucked away in the lap of nature and aren’t easily discoverable in the online world.

Cleartrip wants to take the stress and the friction out of weekend travel. We want weekend escapes to be the easy and happy stress-release valve you deserve. Today, we’re thrilled to announce Weekend Getaways as an extension to our Hotel product.

Search for getaways from the city of origin

Let us know the city you’ll be traveling from and we’ll take care of the rest. The most popular origin cities are listed upfront for your convenience.

Search based on drive time or destination

The results page provides a listing of hotels spread across various nearby destinations within a 10 hour drive time from the origin city. If you’re looking for a specific destination, our ‘Destination’ filter will help winnow the choices.

If you’re keen to get in touch with some wildlife on the next long weekend, instead of driving down to the beach, we’ve got you covered. We’ve got a theme-based filter that narrows your search based on what you want to do.

Select a hotel thats perfect for your needs

Traveling with your family and looking for hotels that are child friendly? Our advanced filters help you select hotels that offer the exact experience you’re looking for. If you’re interested in booking a hotel that’s either on the ocean front or offers serene views of a lake or a river, the best options are just clicks away.

Something for everyone

We’ve built Getaways to be beautifully responsive, so no matter what device you use, you’ll never be short of options.

At this moment, Weekend Getaways serves Indian cities only. We’re just getting started and will continue to expand the choice of hotels and scope of destinations to offer more short breaks over time. Do give Weekend Getaways a whirl and let us know what you think.

Originally published at blog.cleartrip.com on July 24, 2014.

We had 3 clear objectives with respect to design

• A big part of travel is inspiration. Only if we get inspired, we try out new things. We wanted the new product to be inspiring people to head out.

• At the same time, because of the lower ticket sizes involved, we wanted it to be light. No heavy duty consumption of content.

• Activities are fun, and we wanted the design to showcase it.

The result was a more informal design language, which we will talk about in detail in the post below.

Activities collection page

This mainly showcases all the types of activities one can experience in a city. We tried multiple options but most of them either looked very flat or too busy. The grid layout gives it a editorial look and also makes sure we have at least 3 to 4 collections shown upfront on smaller devices. We seldom use “The Sans” font, but in this case, we wanted to give it a magazine editorial character. The collections which have multiple activities inside it are indicated by a small subtext counter.

Activity listing page

This screen lists out activities of similar type. For eg. All cycle rides in Bangalore. Each card shows title, timings and price. The timings are represented in a such a way that, the exact day and time is shown if the activity runs less than 3 times a week. If it runs more than 3 times, we just show that it runs on multiple days and at multiple times. This keeps the layout clean and simple.

Activity details page

This was the most exciting and challenging screen of the product. We are really happy the way it has turned out. Initial iterations were more on the lines of Cleartrip hotel details page where the information is much structured and functional. Since activities have a smaller ticket size, we wanted to be a bit more experimental in the approach. Thus we have a lot of white space.

The first block covers up the most important information. Image, price, title, one line description, time & the activity location. This, we felt is enough for a user to get interested and read further. Time also has got tags for quick reference — morning, afternoon or all day long.

The second block mainly talks about audience fit for that activity, and also details about the pricing. The initial idea of representing prices was to make a table, but it seemed too structured. The revised look is meant towards the most often use case, and for other edge cases there is a fall back with titles. Inclusions and pick up points or meeting points are mentioned next.

The third section highlights one photo to break the monotony and talks in detail about the activity. “Read more” takes you to a modal which describes the entire activity details along with cancellation information and other highlights.

The fourth and the last section shows Organiser details, Address of the activity on a map, Things to carry and any specific notes from the organiser.

Once you’ve decided on an activity, you can choose the date, time slot, number of travellers and, then you enter the seamless Cleartrip booking experience with which you’re already familiar.

You can access all your booked activities in “My trips” on the app itself. They also show up on the desktop site incase if you wish to print invoices and do more.

The look and feel of this product has been intentionally designed to be different than the rest of the app. It doesn’t follow the conventional style, but yet it flows with the product in hand. The early feedback has been very encouraging, and gives us more motivation to experiment & explore new design patterns. Do let us know what you think of the new approach.

Originally published at blog.cleartrip.com on September 10, 2015.

This year when we tried to bring the local product to Android, we thought we will clean up lot more things and make it more intuitive and better. In a multi part series, we want to first discuss about navigation.

Problem with the previous navigation

Our previous navigation was in line with Android’s suggested navigation. But the accessibility of the navigation was broken.

Based on the thumb accessibility map, hamburger menu lies at a place where most people can’t reach, especially in a bigger android phones like Nexus. We thought about bringing tabs for long, but the options we tried never felt compact or actually solved our discoverability problems for our other products.

We were also bringing a new set of products under Local, and this option would not scale well for the products there. The top navigation won’t work if we bring in travel and local switcher in the top. We went back to basics and tried with bottom tabs for navigation. It was new and we felt it will work strongly. Around that same time Google also released a component in the material design which resonated with our design. So the time was right to make it live.

Products are now upfront and clear. No hamburger or more tab to keep things hidden. Now the Travel — Local product switcher resides on top. Stay tuned for a post on design process and how we came up with the switcher. But to adapt it to android, we made few adjustments and made the entire travel — local switching experience delightful.

1. We kept the Travel — Local switcher on the top, to give an hierarchy for the products and also not to keep three level navigation at the bottom.

2. We brought a Material design colour change when the user toggles between travel and local. This sets up the product context between local and travel as mentioned above.

We’ll share more android design processes in upcoming weeks. Meanwhile if you haven’t tried our app yet, go check out in the Android Playstore.

Originally published at blog.cleartrip.com on July 11, 2016.

We gave a deep thought about whether it should be a different app or the same. But of course travel is not as frequent as going for a day outing, so we decided to accommodate local experience in the same and now you don’t have to download another app. If the app has to operate in 2 modes then not only we have to establish this conceptually, but also visually creating levels.

We set out with following goals

1. Same app, 2 modes

2. Switching between the 2 modes to be made super simple and accessible

3. Educate people about Travel & Local modes every time the Cleartrip app is launched

To meet these goals we did a number of iterations, one leading to another. We would like to show you the journey of how the interface evolved.

Iteration # 1 — Extending tab bar

Considering one very old post, there was no debate about showing the navigation first. Get the user to do his frequent task without any taps. So the first and obvious iteration was to retain the tab bar and add a “more” button which expands the navigation to show more options. Not even remotely acceptable.

Iteration # 2 — Color coding Tavel & Local

Color code travel and local. Blue stands for travel and yellow stands for local. Really? I asked my self and gave it a shot but was not working. Mainly because it’s too tough for user to first associate with colors and then to identify the number of products within. So rejected.

Iteration # 3 — Creating visual seperation

In iteration # 2, I felt there is still scope to explore further. May be the colors are not too easy on the eye and needs some learning curve. So tried another approach with black and yellow, creating a differentiator to establish sections. Still not convinced.

Iteration # 4 — Flattening Travel and Local

Discarded the entire thought and looked at it with a fresh perspective. A lot of people in the design team were convinced with the following approach. We just have 5 main tabs in the tab bar. Search, Travel, Local, You and more. And then within each tab we have segmented controls to show individual products. I know it’s not a regular case, but if someone had to go from Hotel details to Activity details, they had to tap some 8 times. So this was definitely out.

Iteration # 5 — Creating 2 prominent modes

Lets merge last 2 iterations and see if we can come up with some other variation. Not happening again.

Iteration # 6 — Explore posibilities

By this time our anxiety levels were on there peak. We decided to go all out. Not linear but explore all possible directions.

Iteration # 7 — Stick to basics

After exploring various possibilities, we were quite convinced that lets not reinvent the wheel. The most convincing of all the approaches which we tried was iteration # 5 with 2 main controls to switch mode. A bit more experimentation on that lead to a series of variations.

Iteration # 8 — Break through

The idea echoed at the most fundamental level and this was it. After sleeping over this concept and referring to few other well designed apps, we strongly felt that something on these lines will work perfectly fine and won’t disturb the user experience.

Iteration # 9 — Almost there

The black switcher bar was conflicting with the black body of the phone and was not visible. So we made it gray to have a better contrast. And this is how it has turned.

While all these experiments were happening, Google also released a component in the material design which included the bottom tab bar. Few days back we shared design nuances of Android navigation. Since Android has these hardware buttons in the bottom, it was tough to put the toggle bar in the bottom which can get tapped accidentally. Also users is in local mode will rarely switch to other mode unless they have travel plans. Assuming this, we placed the switcher icon on top in Android.

In the coming days we are further optimising the navigation for better experience. Meanwhile give Local a spin and stay tuned for more updates.

Originally published at blog.cleartrip.com on August 9, 2016.

This post shares some design nuances and how did pure design enhancements bring significant impact on conversion. We made these changes 5 weeks ago and boy! we saw a 38% jump in people moving into the funnel.

First, the challenge. Live entertainment is a complex product with so many variations and steps even after you decide to go to an event. People end up having choice paralysis if we don’t handhold them at various touch points.

Selection touch points

Not necessary in the following order

1. Seated versus Non-seated (First come first or free seating)

2. Category and (sometimes) subcategory with different price points

3. Venue — In case of multiple venues and (sometimes) geographies

4. Session time — When there are multiple show times of the same event

5. Venue & Session — When the same event is happening at multiple venues at different times

6. Actual selection of seats — A1 or K6

7. Number of people attending

Following are few examples of such events

Before the fix

It has been a huge learning curve for us to understand the very dynamic nature of events, plays, activities, and sports. We were building flows on-the-fly to cater all sorts of events. With the rapid increase in supply, we landed up in the following state.

Problems with the above flow

1. A flat approach for all events thereby creating consistency but; Context rules over consistency.

2. The flow doesn’t create any perception of steps which is necessary since the user is committing to certain steps as he or she moves ahead in the journey.

3. No acknowledgment of what the user has selected in the previous steps. This leads to too many back and forth between these steps.

4. Lastly, it doesn’t convey how many more steps to go. This leads to anxiety and frustration. With a limited attention span these days, this solution was not adequate.

Improvements

We identified all the possible combinations and states in which the progression can happen. This is where we introduced stepper flow. The stepper component handles up to a maximum of 4 steps on a standard 350px width device. For our advantage at BookMyShow, the majority of the events are 2 step process, while a few big events have 3 steps. 4 step process is an outlier and can happen a couple of times a year — super edge case.

Practical application

This was made live in the last week of July 2019 on all platforms; Mobile web, and app. The desktop is coming soon. We are so thrilled and proud to share that there has been a huge jump of 38% in people moving from the Show Details page to Order Summary page. Here is how it looks in reality

Learnings and takeaways

• Progress isn’t just functional
  A simple visual stepper can relieve anxiety, set expectations, and make users feel in control, especially in multi-step flows.

• Consistency shouldn’t override context
  Uniform patterns are useful, but blindly applying them across complex scenarios can create more confusion than comfort. Design must respond to real-world variations.

• Memory is a design responsibility
  Don’t make users remember what they selected. Showing past choices builds confidence and reduces friction, especially in branched or layered flows.

• Scalability comes from pattern thinking, not patches
  Taking time to map all possible states and flows upfront creates systems that are robust, not reactive there by saving effort and avoiding UX debt later.

• Small design tweaks can drive big business impact
  This 38% uplift came without building new features but by just redesigning the experience. Designers should track metrics, test hypotheses, and show how craft drives growth.

Here is a quick visual guide of how we tried to keep up to iOS new releases for past few years. Rewards & satisfaction? Scroll down.

May 2011 — Cleartrip Mobile with Retina Display support

Aug 2012 — Cleartrip comes to iOS

April 2013 — Passbook for iOS

March 2013 — Cleartrip for iPhone gets taller & ready for iOS7

Sept 2013 — Featured in App store

June 2014 — Cleartrip comes to the iPad

April 2015 — Presenting Cleartrip for Apple Watch

April 2015 — Cleartrip apple watch screenshot were shown on Apple website

At the same time, we also got covered in one of the keynotes.

Oct 2015 — Quick actions on iOS with 3D Touch

We are always excited & happy with the kind of work we are doing at Cleartrip. Keep a lookout for Cleartrip with iOS10.

Originally published at blog.cleartrip.com on October 19, 2016.

We built a savings feature that changed how a generation relates to their own money.

First the numbers → then the story.

Jupiter Money, India’s first fully digital bank for millennials and Gen Z, needed a savings product that matched how young Indians actually thought about money. I led design as VP, with a team of four, from research to launch in six weeks.

This is how we got there.

The traditional model is passé. Everyone knew it. Nobody fixed it.

Traditional Fixed Deposits dominated Indian savings for decades — designed for a generation that saved out of fear, not intent. For our users, that model had collapsed.

• 82% found Fixed Deposits too rigid for modern life

• 52% forgot which money was meant for which goal

• 41% accidentally spent goal money on something else

• 89% never felt savings as progress

The mental model for goal-based saving already existed inside people's heads. Nobody had built the digital version of it.

The shift: From fear to intent

Our parents saved because tomorrow was uncertain. Our users save because they know exactly what tomorrow looks like.

This single insight changed the product architecture, the visual language, the interaction model. Savings for this generation was and ambition and the product needed to reflect that.

One week of research.

A tightly scoped one-week sprint across three parallel tracks:

• 12 qualitative interviews — millennials and Gen Z, ages 22–38

• 800-person survey through our Telegram early adopter community

• 1,200-person quantitative study across 8 cities

What we found:

• 76% of users saved with a specific goal in mind.

• 82% found fixed deposits too rigid.

• 52% forgot which money was earmarked for which goal.

• 41% accidentally spent goal money on something else.

• 89% never felt savings as ‘progress’

• Users wanted to visually track progress toward their goals in real time.

The hardest design decision was political.

Every Pot required a unique sub-account number at the Federal Bank level. That was regulatory reality. The easy path was to expose some of that complexity to the user, ship faster, move on.

This meant sustained negotiation across product, engineering, legal, marketing, and our banking partner. Months of constraint navigation before a single pixel was finalised. The design team advocated, negotiated, and protected the user experience in every room we sat in.

What we stripped away:

• Maturity instructions

• Interest payment modes

• Lock-in periods

• Every form field the bank already had the answer to

What we replaced it with:

• Select a category → Name it → Done. Under 30 seconds.

Design is in the details.

Goa Trip. New Mac. Mango’s Vet (my dog’s name is Mango).

That specificity, forced character limit was what made saving feel personal. It transformed an abstract financial act into something that belonged to the user’s actual life.

Every craft decision was deliberate:

• Coin slot at the top — familiar nod to the piggy bank without being childish

• Space-themed illustrations — modern, aspirational, distinctly Jupiter

• India and Bharat marking — cultural credibility, embedded quietly

• Scales from 75px hero to 24px notification icon — built to live everywhere: in-app, campaigns, social

When users asked to lock their own money, we knew, we were on right track.

Custom Pots told the real story. Users saved for goals we hadn’t imagined — a dog, a friend’s birthday, paying back a loan early. The categories we designed to became a starting point.

A product that becomes a brand story is worth more than a product that simply works.

Pots became Jupiter’s most recognisable feature — and its most powerful marketing asset. It was the thing people described when they told a friend about Jupiter. Not the account opening. Not the debit card. Pots.

What this taught me about design at scale

• Hide the complexity. Always. The user should never feel the weight of the system behind them.

• The room matters as much as the screen. The most meaningful design happened in negotiations with engineering, legal, and finance and not in Figma.

• Prototypes close alignment gaps faster than presentations. Show and tell.

• Craft is how you work with people, not just what you ship. Shared belief is a design deliverable.

• A product that becomes a brand story is worth far more than one that simply works.

The summary: Design as a business function

This is what design looks like when it operates as a strategic, cross-functional, outcome-driven function — not just as an aesthetic layer applied at the end.

If your product has a problem that users have stopped complaining about because they’ve stopped trying — that’s the problem worth solving.

Kedar Nimkar is a design leader with 20 years of experience building digital products across fintech, travel, entertainment, and proptech. Host of The Gyaan Project — India’s longest-running design podcast.