Bob Rides App

Design System & Critical Flows

Overview

Bob is an Indian ride aggregator that allows users to compare and book rides across platforms like Uber, Ola, Rapido, and Namma Yatri in one place.

The product gained strong early traction. Users understood the value immediately.

But once real usage kicked in, the cracks started to show.


What Was Going Wrong

1. Critical flows failing

  • Users couldn’t log in (OTP failures)

  • Completed rides not appearing in activity

  • Missing or incomplete price comparisons

  • Price inconsistencies across platforms

2. Lack of a System for UI

  • Inconsistent typography & spacing

  • Non-scalable color usage

  • Broken layouts


The Challenge

It wasn’t just one bug or UX issue.

We were dealing with:

  • A product actively breaking in key moments

  • An interface that wasn’t built to scale.

Both needed to be addressed immediately.

  • Ratings dropped from 4.3 → 3.2

  • 50+ negative reviews accumulated

  • Investors began questioning product reliability

  • Felt like a college project, not a reliable product.

Waiting to “fix everything later” would have meant continued user loss.


Fixing the Highest-Impact Failures

The OTP Crisis

One afternoon, downloads flatlined. We checked the Play Store. Multiple new reviews appeared, all saying the same thing:

“I never received the OTP.”

Why?

Our OTP provider had failed and our users had no help or recovery path.

Impact:

  • ~2,000+ users lost in a day

  • ~5,000+ total drop due to OTP

  • Downloads flatlined

If users couldn’t log in, nothing else in the product mattered.


What We Changed

  • Added help button on OTP screen

  • Introduced fallback OTP systems (SMS + WhatsApp)



  • Built self-diagnosis flow (top 3 failure causes)



  • Created escalation path for unresolved cases


Outcome

  • OTP complaints → 0

  • Downloads stabilized

  • Users could complete onboarding seamlessly

While addressing many other critical issues like this one, a deeper problem became clear.

The interface itself was contributing to user distrust, and that is where the design system came in.


Rebuilding Foundation: Design System

The UI itself was breaking trust with users as well as investors. We saw issues like:

  • Poor readability

  • Inconsistent headers

  • Unscalable colors

  • Layout issues

  • Spacing and responsiveness were inconsistent


The Approach

Our approach was inspired by Brad Frost’s Atomic Design.

This wasn’t a clean, linear rollout. We had to balance:

  • Long-term system building

  • Immediate perception improvement

So the work progressed in parallel:

  • I focused on building a complete, scalable light mode system

  • The other designer worked on a faster dark mode refresh using emerging patterns

This allowed us to:

  • respond to investor pressure quickly

  • continue building a long-term foundation


1. Interface Audit

  • Documented every UI element across the app

  • Identified inconsistencies and missing states

  • Mapped friction points


2. Atomic Deconstruction

  • Broke the UI into smallest units: buttons, inputs, forms, bottom sheets

  • Benchmarked each against industry standards


3. Variable Setup


4. Component Library

  • Built standardized components

  • Defined behavior across all states

  • Enabled consistency across screens


5. Guerrilla Testing

  • Tested new designs with real users

  • Identified usability issues quickly, such as: pure black background felt too harsh, so shifted to a softer dark tone which improved the design significantly.


6. Implementation

  • Worked closely with developers

  • Ensured consistent execution across screens

  • Focused on responsiveness and scalability


BEFORE 👇

AFTER (Dark Mode) 👇

AFTER (Light Mode) 👇


Impact

  • +24% Daily Active Users

  • ~82% reduction in user loss

  • Bounce rate decreased 40% to 18%

  • 70% faster dev speed

  • Improved investor confidence


Key Takeaway

Fixing what’s breaking and building for scale can’t be sequential.

Both have to happen together, or the product doesn’t survive long enough to improve.

Project Links

Figma Design File:

© 2024 Khushi Singh

Create a free website with Framer, the website builder loved by startups, designers and agencies.