Olacabs PWA
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 ConceptPhase 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.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