Background
I’ve always been a loyal Uber user, to the point where I don’t even compare prices with other apps. This is mainly because of my bias for clean, well-designed products and companies that prioritise user experience.
But during a trip to Kolkata, I kept hearing everyone talk about Rapido. Almost everyone I met said they use it every day because the traffic is intense and bike rides are simply faster. And honestly, you could see it, there were Rapido bikes everywhere.
I checked Uber and saw that they also offer bike rides there (something I rarely see in Mumbai), but people still preferred Rapido. That got me thinking. So after coming back to Mumbai, I installed Rapido to see what the hype was about, and I noticed, the prices were lower, and rides were available almost instantly on Rapido.
But the one thing I noticed right away was that the app didn’t feel as thoughtfully designed. It worked fine, but the design clearly wasn’t a priority. That’s when I started thinking: What if I tried redesigning it?
Old home screen
01
The hamburger menu works, but it doesn’t really communicate what’s inside. For a screen that’s already quite busy, having a clearer entry point to settings, profile, and help could make things easier for users.
02
The search bar is the main reason someone opens Rapido — to type in where they’re going. It’s placed right at the top (which makes sense), but it’s small and easy to overlook, especially for newer users who don’t have recent locations yet. The colorful icons below it end up grabbing more attention than the primary action.
03
This section doesn’t feel very helpful in the context of booking a ride. Most users already know where they want to go when they open the app, so surfacing landmarks or suggestions adds visual noise without improving the experience.
04
The icons get the job done, but they could use some modernizing. A fresher, more consistent icon style would make the overall UI better.
Apart from these points, the screen also has quite a bit of uneven spacing and padding. The icon sizes don’t feel consistent either, which makes the layout look slightly unbalanced. Overall, the hierarchy isn’t very clear.
New home screens
For new users
With recent searches
With saved places
Improvements
01
A simple “Hey” with the user’s name adds a small touch of personality. It feels warm without trying too hard, and gives the screen a friendlier start.
02
A profile avatar makes it much clearer where the user should go for their settings and account info. It’s more noticeable than a hamburger icon and reduces the guesswork.
03
The search bar is now not only the first thing you see, but also sized in a way that feels natural and hard to miss. The larger greeting above it improves reachability on bigger devices and guides the eye cleanly down into the main action.
04
Users can now quickly save their home or work address with dedicated buttons. Once a destination is searched, a large, easy-to-tap icon appears instead of a tiny heart. This makes saving locations far more intuitive.
05
The icons have been redesigned to be more consistent and modern. They match the overall visual direction and help the interface feel more cohesive.
06
The parcel banner now has a cleaner, lighter design with green highlights for the coupon code and a clearer CTA button. It feels less intrusive and blends better with the new layout.
Overall, there’s now more breathing room across the screen, and interactive elements are larger and easier to tap. The layout feels more intentional, and the hierarchy guides the user much more naturally.
Planning the trip
Old
Redesigned
Improvements
01
“Let’s plan your trip” feels more helpful and sets clearer context compared to just “Drop.”
02
Elements are grouped more naturally. The add-stop button sits in a more intuitive spot, and the “For” toggle (who the ride is for) is now easier to access.
03
This screen follows the same design principles as the home screen: more white space, larger interactive elements, consistent spacing, and cleaner typography.
Ride selection
Old
Redesigned
Redesigned
Redesigned
Improvements
01
Rapido uses yellow for their primary CTA, but yellow is an accessibility issue when it comes to UI, so I switched the main action button to blue (a color the old UI already used in places) because it’s more readable, more accessible, and still feels consistent with the brand.
02
In the old design, the savings section was split: the coupon code sat at the bottom while the explanation sat above. Since the best coupon is automatically applied anyway, the user doesn’t need to interact with it often.
I simplified the structure: The top area is now dedicated to coupon information, and the bottom area focuses solely on payment methods. Cleaner, less mental load, no unnecessary tapping.
03
The old “Add stops to drop your friends” banner felt too loud and unnecessary. A simple plus icon next to the trip details does the same job with less distraction. The trip summary is also cleaner and easier to read at a glance.
04
I added simple sorting tabs like Recommended, Faster, and Cheaper at the top. These help users make quicker choices without scrolling or comparing manually, especially useful when prices are close.
In addition to these changes, integrated the new vehicle icons to match the style, and the old screen sometimes showed an extra line of information (Quick bike rides) under each ride option. I created a version that includes this line if needed (3rd screen), but the design works even without it.
New payment selection screens
Default state
Cash only
Unavailable method state
The payment screen had to support different scenarios, so I designed three clear states: the normal view with multiple payment options, a cash-only state for rides where the captain handles payments directly, and a state where certain methods are unavailable. Each version keeps the same structure, spacing, and interaction pattern, so the experience feels consistent even when the options change.
Finding a ride
Old
The old “finding a ride” screens keep things simple, which is good, The segmented progress bar communicates system status clearly and helps make the wait feel less frustrating. But there are a couple of issues.
01
Users can’t “undo” or cancel without opening trip details. This creates friction in a moment where control should feel simple.
02
Ad placement steals attention
While ads are important for Rapido’s business model, as that's maybe what allows them to keep prices low compared to competitors. But the execution feels intrusive and could be integrated in a much subtler, more thoughtful way.
Selecting pick-up spot
Redesigned
I redesigned the status header to be more functional and informative. It now includes the vehicle icon so the user instantly knows which ride type is being booked, along with a clear status message that updates as the system progresses. I also added an estimated wait time, which helps set expectations and reduces uncertainty.
The cancel button is now fixed at the bottom, giving users a clear and immediate way to exit without digging into trip details. Speaking of which, trip details are placed lower in the sheet and appear as the user scrolls, a more natural interaction at this stage.
The ad is intentionally positioned between the status header and the trip details. This way, it still gets visibility without feeling intrusive or competing with essential information. It can also scale to multiple ads if needed, placed either horizontally or vertically without breaking the layout.
Ongoing trip
Old
*Scroll
Improvements
01
The header stays fixed at the top of the sheet and is designed to keep all essential information easily accessible. It shows everything the user is most likely to look for: estimated arrival, how far the captain is, and the ride PIN clearly in large, clear text so it never gets lost in the layout. Once the ride begins, the header updates to reflect the current state, showing the estimated arrival time.
02
The captain and vehicle details are much more prominent, with the captain’s name, rating, and contact options. They are now paired with a picture of the actual vehicle and the number plate, making it easier for the user to identify their ride quickly. Once the ride starts it is updated to show a quick option to tip the captain later.
03
Trip details, payment information, and support options are placed lower on the sheet, while the cancel option remains at the bottom as the least-accidental action. Ads are again placed between two important sections, after the main information above and before secondary details, ensuring visibility without getting in the way.
04
I followed the same principles from the rest of the project: larger tap targets, clear hierarchy, generous white space, consistent spacing.
Feedback
Old
Redesigned
Redesigned
Redesigned
Improvements
01
The old feedback flow worked, it showed the essential information and used progressive disclosure, with detailed feedback tags appearing only after interaction but the final screen felt visually busy with long text lines, emojis, and multiple elements fighting for attention. The redesigned version is much more organized, making it easier to focus on one action at a time.
02
Payment information is now shown clearly instead of being tucked away. This helps users instantly confirm an important information without hunting for details.
03
I added a direct “Contact captain” option for situations where users might have left something behind. This removes the need to dive into the Help section and solves a common post-ride worry.
04
After the user gives a rating, the feedback tags appear with a cleaner visual style. They’re easier to scan, less overwhelming, and more relevant to real ride experiences.
And finally, I added a dedicated step for tipping the captain, making it simple for users to show appreciation to the captain.
Profile menu
Old
The old menu felt like a long list of items placed together without any clear structure. This forces users to slow down and make more decisions than they need to. So I reorganized the entire section based on how people would look for information.
The Parcel shortcut didn’t belong here. It’s a service, not a setting, and it already exists on the home screen. The Safety section was purely informational, so I paired it with Help to create a single “Help & Safety” space instead of scattering related information.
Rapido Coins and Rewards also had overlapping purposes: one shows how coins work, the other shows what you’ve earned. Combining them into a single “Rewards & Coins” section makes that relationship clear.
I also expanded the Profile section. Instead of showing only personal details as in the old design, it now holds more user-specific settings like Power Pass, insurance claims, refer code and payment methods. Grouping these under Profile reduces clutter in the main menu and makes these options easier to find. Overall, these changes create a cleaner, more intentional information architecture with fewer decisions and much clearer grouping.
Redesigned
Improvements
01
The menu now has fewer items and clearer grouping, so users don’t have to scan a long list or remember too many choices. It feels lighter and much easier to navigate.
02
A shortcut at the top gives users quick access to “Help” or details to their most relevant trip. It can adapt to show the most recently completed trip, an ongoing trip, or even an upcoming scheduled one, making it useful and informative.
03
I added small badges to highlight new information or areas where the user’s attention is needed (like new rewards or unread notifications).
04
Consistent spacing, updated icons, bigger titles and fewer dividers make the screen easier to scan and visually calmer.
My profile
The profile page now includes all user-specific settings instead of scattering them across the menu. Saved locations, payment methods, Power Pass, insurance and claims, and even log out/delete account have been brought here from the general settings page, since they’re tied directly to the user rather than the app. The referral card is also highlighted for visibility, and the layout feels more organized overall.
Rewards and coins
The “Always use Rapido coins” toggle is the only functional option from the original Rapido coins settings, so it stays right below the coin balance. Rest was just information on how they work which can be accessed by clicking on the coin balance card. Below that, we can have the vouches that the users earned as they were in the Old Rewards screen.
This merges the previous sections of “My Rewards” and “Rapido Coins” without losing their functionality.
Help and safety
Similarly the Safety Center, which previously lived separately in the menu, is now combined with the Help section to create a single place for anything related to support and safety. The Help Center holds all FAQs and help topics, while users can also check their active or past support tickets or start a new chat with support. Recent activity is listed at the bottom, making it easy to quickly revisit a trip if something went wrong. Bringing these two areas together reduces the number of settings and makes it easier for users to know exactly where to go when they need help.
App settings
The old settings page mixed profile-related options with general app settings, which made it harder to understand what actually belonged here. Since items like Profile, Saved locations, Log out, and Delete account now live inside the Profile section, the settings page becomes much more focused. I reorganized the remaining items by moving all notification and communication toggles under “Preferences” outside, keeping informational items like Privacy Policy and Terms under “About,” and placing everything else under “Others.” This makes Preferences much easier to access.
Redesigned screens
*Scroll
Design system
The existing Rapido design had quite a few inconsistencies with spacing, color, icons ect. So before redesigning the screens, I created a simple design system to bring everything together. It focuses on keeping the UI consistent while also improving accessibility, especially with colors and spacing.
Foundations
01
Primitives
Core
Semantics
02
Layout
Grid
Spacers
Corner radius
4 point grid; Columns: 4; Margin: 16px; Gutter: 16px
03
Typography
Display
Display small
Weight:
Semi-bold
Size:
36
Line height:
44
Headings
Heading small
Weight:
Semi-bold
Size:
20
Line height:
28
Labels
Paragraphs
Display - Mono
Headings - Mono
Label - Mono
03
Elevation
Shadow above
Shadow below
Elevated icons
*using primary border for elevated UI
03
Icons
Phosphor icons
They provide a vast library of high-quality icons, ideal for modern user interfaces. This ensures consistent and appealing icons throughout the interface.
Size
xsmall
16x16
small
20x20
regular
24x24
large
28x28
Weight
regular
light
filled
Components
01
Button (CTA)
The primary CTA is reserved for the primary action on a screen, which keeps the hierarchy clear and reduces decision fatigue. For this, the best practice is to limit the primary CTA to one per screen. (Maximum two by using secondary color)
I switched the button color from Rapido’s yellow to a more accessible blue. The new color passes contrast guidelines and is easier to spot against light surfaces.
Shape
The button is also the only fully rounded element in the entire interface. This helps with the hierarchy and draw users’ attention. I increased the padding as well, making it a larger and more comfortable touch target.
Together, the color, shape, and spacing make the CTA more noticeable, more readable, and more accessible
Hierarchy
large
Text:
Label large
Vertical padding:
20px
Horizontal padding:
Fill width
Icon:
NA
regular
Text:
Label medium
Vertical padding:
16px
Horizontal padding:
Fill width
Icon:
NA
small
Text:
Label small
Vertical padding:
12px
Horizontal padding:
16px
Icon:
Available
Icon size:
xsmall
Gap:
8px
xsmall
Text:
Label small
Vertical padding:
8px
Horizontal padding:
12px
Icon:
Available
Icon size:
xsmall
Gap:
8px
*trailing icon available for size small and xsmall to increase affordance
Styles
Primary
Secondary
Disabled
Destructive
Success
Icon only
small
44x44
regular
48x48
large
52x52
Primary
Secondary
Regular
02
Text buttons
Text buttons are used for low-priority actions or secondary navigation, things that shouldn’t compete with primary or secondary CTAs.
Hierarchy
03
Tags
Tags are designed to be flexible components, similar to Chips in Material Design. They adapt to different contexts, acting as filters, radio-style selectors, or simple labels. The visual identity stays consistent, but I use background color, borders, and icons as clear affordance cues to show whether a tag is interactive or not.
Hierarchy
large
Text:
Label medium
Vertical padding:
12px
Horizontal padding:
16px
Icon size:
small
Gap:
8px
regular
Text:
Label medium
Vertical padding:
8px
Horizontal padding:
12px
Icon size:
small
Gap:
8px
small
Text:
Label small
Vertical padding:
8px
Horizontal padding:
12px
Icon size:
xsmall
Gap:
8px
xsmall
Text:
Label xsmall
Vertical padding:
4px
Horizontal padding:
8px
Icon size:
xsmall
Gap:
8px
Styles
Default
Positive
Warning
Info
04
Alerts
Hierarchy
large
Text:
Paragraph large
Vertical padding:
12px
Horizontal padding:
16px
Icon size:
large
Gap:
12px
regular
Text:
Paragraph medium
Vertical padding:
12px
Horizontal padding:
12px
Icon size:
regular
Gap:
12px
small
Text:
Paragraph small
Vertical padding:
8px
Horizontal padding:
12px
Icon size:
small
Gap:
8px
xsmall
Text:
Paragraph xsmall
Vertical padding:
8px
Horizontal padding:
8px
Icon size:
small
Gap:
8px
Styles
Default
Warning
Success
Error
Final thoughts
While working on this redesign, Rapido itself has evolved quite a bit. They’ve updated parts of their UI and expanded their business model, now collaborating with Goibibo, RedBus, and Confirmtkt to offer hotel bookings and ticketing for metro, trains, flights, and buses. Rapido is no longer limited to just ride bookings, and it’s interesting to see the direction they’re moving in.
This redesign was my way of exploring how a more consistent, accessible, and organized experience could look for Rapido. By building a simple design system and rethinking key user flows, I focused on bringing clarity and structure to the areas that felt scattered in the original UI.
There’s always room for improvement, but this project helped me strengthen my approach to systems thinking and accessibility while designing. It’s a direction I’m excited to keep developing.