Case study: Redesigning Rapido

The case study that got me my job. I mean it got me the call for an interview, I got the job.

Manan Gupta
Bootcamp
Published in
11 min readApr 27, 2022

--

A glimpse of my Design Thinking

This is my first attempt at documenting my design process and my learnings in a detailed & elaborative manner. Ever since I made up my mind to pursue my passion for Designing & Multi-coloured screens skipping a lot of Code on screen being from a Software Engineering Background, it has been an amazing & vibrant journey.

The phase wherein you need to redesign an entire application as a project can be pretty confusing.

This is a UX/UI case study of Redesigning Rapido.
However, the key focus here is to get inside my head and comprehend how I started my research and incorporated the whole thought through a design plan.

Hope you like it. 🤞

Redesigning Rapido: A UX/UI Case Study (Cover)

Step 1: Case Study Overview

Rapido played a major role in defining new methods of mobility and revolutionized intra-city commute by emerging as India’s first and fastest-growing two-wheeler taxi ride-booking platform. Still, Rapido suffers from some common problems — Unnecessary Complexity, Clutter, Bugs, and Poor Navigation.
An app used by millions of users on daily basis lacked certain qualities including clarity, high attention to core features, minimalism, i.e., to sum up, it lacked simplicity.

Methods Used: UX Research, Feature Analysis and Grouping, Wireframing, UI Design, and Prototyping

Tools Used: Figma, Figjam, Miro

Artboard Size (Aspect Ratio): 375 X 812 (19.5 : 9) (Mobile)

Timeline: 4–5 weeks

Industry: Taxi / Daily commute

Roles: User Research, UX/UI design, Interaction Design, Visual Design

Disclaimer: This is a self-published project, and in no ways associated to Rapido professionally. The views from this case study are strictly my own and I took a heuristic approach to redesign the Rapido app. This case study isn’t exhaustive, as I didn’t have full access to the user data of the application. Hence, I am certainly not suggesting that Rapido must endorse into my redesign. This is my attempt to improve my design aptitude by analysing a popular app.

What made me choose Rapido for a redesign?

The inspiration to redesign the application was solely based on my personal experience which didn’t feel very swift. That’s where the idea struck me, that Rapido needs a revamp with the sole purpose to enhance the entire experience and hone my design skills and putting them to use.

I observed that despite being the first-of-a-kind application providing two-wheeler taxis in the market, the UI of Rapido wasn’t even in the race to compete with the polished UI of the competitors.

WHY? Because Rapido lacked a reliable UI & UX which was making users switch to the competitors despite the generous offers being provided and aggressive promotional strategies.

The Challenge

To take the Rapido app and give it a revamp to see how far I can push myself to hone my design skills.

While redesigning the app I was driven by the motive to make the app visually appealing and seamless to use.

It was a compelling challenge for me to redesign the application. So, I took an upward approach from finding the problems to working on user flows, low-fidelity wireframing, high-fidelity mock-ups, and prototyping.

The prerequisites were thorough research and gathering information about the user experiences.

What followed were efforts to map the existing user experiences to identify other pain points and exact areas for the opportunity for development.

Now that I had a roadmap, all I had to do was to go down the road to finish what I started.

Step 2: Research & Analysis of Problems and Defining Goals

Analyzing the problems

Below are a few conclusions from my own analysis.

1. Lack of User Engagement: The first paramount of an application is the look and feel. In my opinion, the original app is not very accurately designed in terms of UI, as the prominent features aren’t easily accessible and the application lacked minimalism which people are looking for i.e., a simple interface to interact with. The application lacked the finesse to be precise.

2. Flexibility and efficiency of use: Novice users can easily book a bike in the default manner; however, an experienced user would want to set up preferences by entering a default payment type or save frequently visited places like work or the gym.

3. Visibility of system status: When users make a booking, the system does not do a good job of informing the users about what is going on:
— ETA is displayed before the booking has been made, which isn’t precise.
— When a booking has been confirmed, the OTP isn’t legible because of the placement.

4. Aesthetics and Visual appeal: The interface violates certain aspects of design, from the misaligned placement of texts to visual aesthetics. The design takes on an outdated look, which could be improved.

Identifying the weaknesses
· Too many options in Cluttered Menu
· No option to schedule rides in advance
· No option to deliver packages
· Lagging Animations
· Promos / CTAs (Call to action) densely populated across the entire application

Key Takeaways:

  1. The visuals of the application were making it less legible and perceptible than the competitors which provided a better user interface and features in the application.
  2. Since it’s an existing platform for users to connect with, I had to make sure that the redesign shouldn’t hamper the experience already provided to its users.
  3. The most significant piece should be an easily accessible lower navigation bar that listed all of the key features.

UX Research

I started with User Research. I exercised a user-centered approach towards a creative and modernistic design. I started by creating a questionnaire and conducting small interviews with users of comparable applications which enlightened me that Rapido lacked the Schedule a Ride feature & Intra-city Package Delivery which had to be addressed. Besides that, I also went through user reviews on both Google PlayStore & AppStore. What I found out wasn’t what I was expecting as multiple people were facing issues regarding either Payments, Map Locations, OTP accessibility, and difficulties booking a ride. The entire user experience and app interface lacked Consistency & Exceptionality.

Questionnaire for user research and interviews
Some criticism & reviews left by random people on Google PlayStore for Rapido

I also did Competetive Analysis and looked at other applications such as UBER Moto, OLA, and some Package delivery applications like Dunzo, and Wefast, and tried to perform some competitor analysis to see what mistakes they were making in their designs so that I could avoid them.

Followed by this, I created User Personas from the research I did. After talking to frequent users of the app spanning from different age groups (18–49), I inferred that users sometimes found booking bikes on Rapido harder as compared to rival platforms — which I connected to some inconsistent flows. This combined with the constant call to action (CTAs) and tiny text placement might’ve been the reason.

User Personas

The results of a few brief interviews suggested that there were two common types of users with diverse needs. The accumulation of different insights and common patterns that came from the users’ answers helped me create personas that were the manifestation of that data in a character. I found two types of users:

  • Want a seamless package pickup and delivery experience that is Reliable & Robust. Users are willing to pay a premium for the delivery only if the experience is immaculate. Another requirement is not having to hire a dedicated delivery partner. Along with that users want to keep the coordination to a bare minimum instead of having to guide the delivery partner step by step.
  • Safe and reliable mode of transportation that is pocket-friendly and easily accessible solution to commute on a daily basis. Also, the ability to schedule rides in advance according to their schedule upfront was one requirement mostly all users

Although they have different pain points and goals, they have a similar background story and are on the same page of finding ways to commute and get packages delivered, so these two personas don’t conflict with each other.

User Persona-Akanksha Sharma
User Persona-Ishita Soni

Goals for redesigning the application

My goals for the redesign:

  • Create a platform for innovation and deeper engagement.
  • To design a more personable and intuitive user interface.
  • To design considering user empathy (Human Centred Design)
  • To facilitate a more engaging and seamless experience when it comes to cost-effective commuting & logistics.

My goals for my own personal development:

  • Learn how to conduct and analyze user research, conduct interviews, and decode them to get the pain points of the users, create flowcharts and wireframes, and design through Figma.
  • Complete my first design project from start to finish while sticking to my design principles

So, keeping in mind all the aspects I have redesigned the application. Now, let’s dive deep into the design✌.

Step 3: Design Process

Design Decisions

I chose to design the user interface on Artboard Size (Aspect Ratio): 375 X 812 (19.5: 9) (Mobile). I thought it’d be a good experience to think of ways to incorporate the notch into the design. It made me learn a bit about the safe areas on this new device and how to effectively embrace the notch instead of ignoring it.

As in the existing application, there is no onboarding screen that showcases the prominent features being provided to the user. I structured completely new onboarding screens & flash screens which display the brand’s functionality and some of its exclusive features that are present in the redesigned application.

Onboarding Flow

Stumbling Blocks

After you log in to the app for the first time, it becomes mildly irritating for a bit.

Home screen
Structuring the application’s home page is the most integral part of the redesigning process as it is the most important screen.

I made sure that users aren’t overwhelmed by the amount of content on the screen. This is why I chose to go for a bottom deck on top of a custom-themed map style, which focuses on areas and roads instead of building dimensions.

The major changes in the home screen were adding a bottom navigation bar that helps the user to scroll between the various services (Ride now, Ride later, Package-delivery) of the application effortlessly, and adding buttons for quick selection of the desired destinations such as home, gym, office, etc.

The bottom deck follows our new user flow, thus focusing on destinations with a bunch of saved desired locations/recent destinations. I opted for the bottom search bar instead of the top because of the increased accessibility due to the thumb placement while holding the phone with one hand.

Increased accessibility due to the thumb placement while holding the phone with one hand

Destination Search Screen
I have changed the layout of this screen where the user can easily get the recent locations on the screen and added the functionality of saving frequently visited locations that are accessible on the user's home itself.

Also, the design to enter addresses for pick-up and drop-off was impossible to use. The search engine for addresses doesn’t work correctly. The feature to select a location on the map was hidden counter-intuitively. Also, the maps keep resetting zoom. All of these are bugs that haven’t been looked into.

Below is the comparison of the old and new proposed screens.

Proposed new destination search screen
Existing approach of the destination search screen

Add Payment Screens
The payment screen is designed by adding more digital payment modes and making it more feasible for the user to add a new card or other payment options.

The add card option is designed in a way to minimize the effort of the user so that they can add the details of the card in the payments section with ease.

Save a Card option simplified

Another essential step in the process is that the app needs to make a few things crystal clear. While the app is searching for nearby drivers to accept the trip, it must show the user some critical information:
- The final total cost of their trip
- The payment option (Card/Wallet) that the user selected for payment.
- Coupons applied (if any)

Going with a card containing all the essential information — Driver name, vehicle details, and of course the One Time Password. After following a standard set of line heights and spacing for the initial drafts, I realized that the OTP was one of the most important elements here and needed to stand out more. Hence, I alternated the prominent colors and font sizes to make them more prominent.

For every user interface, it is essential to allow the user to undo their actions easily. Following this golden rule, it was important to ask the question: “How does one cancel the ride search process midway?”
Instead of introducing a new ‘Cancel’ button at these stages, it’s better to transform our Cluttered Menu icon into a Back Arrow Vector. This makes canceling a fluid and easy process, allowing the user to sometimes just check the prices and not actually proceed with booking a cab, or if booked by mistake, the action can be fortified.

Cancel ride option

The Design File

Complete design file

The Prototype

Go through the Prototype to have a complete feel of how the app is supposed to function in reality and how users will interact with the application.

Prototype of the Proposed Design of Rapido

Positive results and much more to do
The redesign of the Rapido app on iOS has had a positive impact on the pickup experience, at the time of writing. However, the contact rate has not been significantly decreased which means Riders and Drivers continue to contact each other to confirm or coordinate pickup details. I believe this to be a behavioral change rather than a design that will reveal over a longer period of time.

Thanks for reading this so far. If you like this case study, please hit the 👏 button and let others too know about this. If you have any feedback, do comment below.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Manan Gupta
Manan Gupta

Written by Manan Gupta

Product Designer • Saas Product • Design Devotee • Dark mode fanatic • Writing about design • Creative thinker • Automotive Enthusiast

Responses (5)