Olacabs PWA

Booking a cab without a native app. Solving commute for millions of Indians.

This is the work during my internship at Olacabs (read about the experience here. I worked on the proof of concept (POC) of the PWA (Progressive Web App). The team at Olacabs then worked and shipped the project in the next year in association with Google Developers and it turned out to be a huge success. This web app was announced at the Google I/O 2017 in San Francisco.

Role: Research, Proof of Concept development, UX improvement of the existing model
Links: Final product, Coverage by Google

Problem Statement

As of now, Olacabs operates in 60+ cities in India and it envisions providing mobility to a billion Indians.

Out of the million rides that Ola completes every day, the majority of those rides are from Tier 1 cities. However, people in Tier 1 & Tier 2 cities face spasmodic cellular connectivity and possess low-end smartphones with low memory and slow processors. Native apps that usually tend to take up a lot of space are a nightmare for them.

Target audience

The first step to serving each and every user really well is to understand and accept that there are all kinds of users. Some of them use Ola for their rides daily while some of them don’t. Some of them knew Ola really well while some of them just discovered what Ola is. Serving new, infrequent users; clubbed with the urgency of booking a cab, helped us pursue the problem with a different frame of mind. The PWA was targeted mainly towards the Tier 2 and Tier 3 cities which face proliferating demand for services like Ola.

Existing product

While, I point out the approach taken in the PWA, let me explain how a Cab Booking flow was handled in the normal app.

1. Onboarding experience — Login first

Congruent to how other service based native apps worked, prior to using the actual service, users had to visit the app store and download the app. Next, you sign up via an email address or through a phone verification login.

2. Non-upfront fares

Back when the PWA was in development, the native app did not show you a ride fare estimate based on your pickup and drop location up front. You could only get to see one after you proceed to a particular cab type.

3. Horizontal display of cab category

The native app has a horizontal swipe-able view of all the cab categories. In the PWA we tried a different approach, where we showed upfront fares to let the user decide what is best for them.

User study

People who showed interest in using the PWA were mostly from T2 and T3 cities. They had the following concerns and demands over the present Android / iOS / Windows app:

1. Something that takes up lesser space in their phone

2. The intermittent internet issues that they face serves them with a risk of incompletion of the process of booking a Cab

3. Since we were aiming only for an Online approach to book a Cab, they requested for some approach which could also take up lesser memory and lesser internet data.

Insights

Considering the factors discussed above, we made sure that we had an empathetic understanding of the problem while curating the experience for the web booking flow.

1. Product platform usage

Before the launch of the mobile web version of olacabs.com, we used to redirect all our traffic to respective mobile app stores to trigger mobile app downloads. We were getting ~80,000 visits/day on olacabs.com and subdomains, out of which 75% used to be mobile web traffic. It was very necessary to optimise the UX for a mobile-first experience since majority of the bookings was expected from a handheld device

2. Seamless booking experience

In order to account for the accomplish a swift way of booking a cab, we had to have a bare minimum UI and solve for the case of urgent bookings. 97% of cab booking requests we get are the ones for an immediate requirement. Only 3% requests contribute to scheduling a ride for later.

3. Low storage space on mobile phones

In India, as soon we start going towards Tier 2 and Tier 3 cities, the common problem for mobile phone users that we’ll find is — low storage space. As per the survey by Western Digital, 33% of smartphone users in India run out of memory space every day. This is an important metric to consider for product owners to optimise the space that their apps are going to consume on a user’s device.

4. Handling a price sensitive market

It was necessary to show as much of comparative information on one page so that the booking experience becomes as swift as possible in the least number of steps. We decided to show all the ETAs and a comparative fare estimate for a particular pickup and drop location. Upfront fares for all ride categories help users in an easier vis-a-vis comparison and an informed choice.

5. Removing the map

Most people in rural India, do not have proper knowledge about maps. Furthermore, with the major goal of making the PWA as small in size as possible, we decided to remove the map from the interface. You may think we just did it for based on our gut feel, but as always we tested out with users — 14 out of 16 users didn’t need the map. Some old users out of them didn’t miss the maps either.

Design Process

The design process of this project was divided into two phases. The first phase being the identification of the needs through user studies. Drawing insights from the learnings and then figuring out a solution. My role was to handle till the first phase and present a Proof of Concept

Phase 2 comprised of branding and fine-tuning the POC, MVP Launch, informed User Testing, identifying the problems and then finally launching the product.

Flow for new/logged out users

We concentrated on the getting the skeleton right for the Pre booking flow first and tried to make the flow more swift. The booking flow existing in the app was a two-step approach and our goal was to trim it down to a one-page approach.

1. Detects the current location and treats it as the pickup location by default. We found out through existing data that most people book for cabs from their present location.

2. Comparative view of the estimated fares based on the pickup and drop location.

3. Changing the drop location post booking

4. Driver and ride details

5. Post booking features

For new/logged out customers, it was mandatory to create an account so that the ride information and invoice can be sent to the specific user details. Thus before confirmation of the ride, an OTP login was done. Already registered users were logged in and in case of new users, a new account was made on-the-go.

Logged in booking flow

This following screens are for people who are already customers of Olacabs and are logged in via the web browser.

Prototype

Phase 2 designs

After my work during my internship, the POC was further passed through rigorous informed user testing and then was finally shipped after a lot of rework. After user testing, we shifted from a one page approach to a two page approach, where the ‘Confirmation screen’ was added as a friction point and to provide an overview of the booking.

Results

Ola built their mobile website as a Progressive Web App (PWA). Using just 200KB of data to install, the PWA is at least 300X smaller than downloading the Android app and 500X smaller than downloading their iOS app. Repeat visits use as little as 10KB.

• 68% increase in mobile traffic in Tier 2 and 3 cities

• Operates at speed on 2G networks and also supports offline bookings; initial load time on 2G is 3.4 seconds and repeat load time is < 1 second

• In Tier 2 cities conversion rates are same as native app. In Tier 3 cities, conversion rates are 30% higher with the PWA.

• PWA application size is 200KB, which is 300x smaller than downloading an Android app and more than 500x smaller than the iOS app

• 20% of users who book in their PWA had prev. uninstalled their app

Public mentions

The collaboration with Google Developers turned out to be really successful and there was appreciation from all over the country after the launch at Google I/O 2017 at San Francisco.

Book Cabs Nearby at Best Price | Hire Taxi Nearby Online at Olacabs.com

Check out the final product here.

Next: Krsna by ISKCON