Building user experiences for Ola’s PWA while keeping it ultra light
The reaches a broader set of users in new cities — mobile traffic from Tier 2 and Tier 3 cities has grown by 68%. The PWA has 30% higher conversion, than native apps, rates in Tier 3 cities.
Ola is the leading cab aggregator in India present in over a 100 cities, partnering with over 800K driver-partners. Ola facilitates over a million rides per day, staking a majority share in India’s 300 million daily taxi rides. What drives Ola is its mission to drive mobility for a billion Indians.
Why a Progressive Web App?
There is an ever-growing demand for quick and reliable transportation services in Tier 2 and Tier 3 cities of India. A major challenge faced in servicing this demand is poor 3G cellular networks and low-end smartphones with slower processors and low memory, not enough to support too many apps. Which meant that Ola needed a better way to service the transportation needs in Tier 2 and 3 cities also owing to the low adoption of its Android (130 MB) and iOS (254 MB) apps.
A PWA or Progressive Web App solved that problem by allowing easy discovery and low friction to book a cab. Other advantages of a web app include push notifications and the “Add to Home screen“ user prompt.
Impact of the Ola PWA
After officially launching the Ola PWA at Google I/O, we saw exponential adoption of the web app across all Tier 2 and Tier 3 cities in India. Some noteworthy impact is as follows.
- 68% increase in mobile traffic in Tier 2 and 3 cities
- 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 via the PWA had previously uninstalled their app
Source: Google Developer Case Study
Upkeep of the Ola PWA
After launching the web app our next task was to constantly iterate and improve the PWA so as to offer all benefits of the Ola ecosystem to our web users, without the need to download the native apps. Following are the feature improvements and additions that I designed solutions for over a period of 6 months.
Allowing Share Pass purchase on the web app
Share Pass is a travel pass that’s only applicable on Ola Share (ride-sharing category) rides. A user has the ability to buy the Ola Share pass on our Android and iOS native apps. But the feature was missing on the PWA. And given the adoption of the web app in Tier 2 and 3 cities, it was prudent to allow our users in those cities to also take advantage of the heavily discounted rates accessible via Ola Share Pass.
In the first leg of its release, Share Pass purchase on the web was supported with limited functionality — buy a new Pass, register a Pass bought elsewhere or cancel a Pass.
Armed with users behavioural and usage data, we added more features for the second leg, including the ability to see queued and expired Passes as well as renew a Pass.
Reducing cab cancellations due to inaccurate pickup location
Analysing user behaviour in the months since the release of PWA one number is particular was bothersome. The cancellation rate on the PWA was extremely high as compared to our native apps. And the reason was zeroed in to be the inaccuracy of pick-up location as auto-detected by the system, in this case the browser.
We needed to explicitly confirm the pick-up location with the user before the booking was confirmed.
Solution No 1 — Show pickup location on map during confirm booking
On the booking confirmation screen we added a map that exactly showed the user’s pick-up location along with other ride information on the Confirm Booking. The user also had the option to ‘Edit’ the pick-up location if the location detected was incorrect.
Improved Solution — Confirm pickup location earlier in the booking flow
Even after having introduced the map on both the confirmation and track ride screens, cancellation rates continued to be on the higher end leading us to the following assumptions:
- Pickup confirmation was happening too late in the booking process
- The user was not using ‘Edit’ option on the confirm booking screen as intended
- ‘Edit’ pick-up location was not intuitive enough (The intended action was ‘Favourite’. For the user to edit pick-up, he/she had to tap on the text box, with no hint text provided.)
A part of the solution was to add the map to the first screen of the booking experience, similar to the user flow in our native apps. But to keep the PWA light and under 15KB, loading a map on the first screen was not an optimum solution.
Leading us to add a completely new step in the booking flow. If the user has not interacted (read, edited) with the pick-up location even once, we pop-up an intermediate step asking user to Confirm Pickup Location, right before Confirm Booking.
From the tech aspect, we only show an image of the map on this screen. If the user interacts with the map in any way (showing an intent to edit location), we load the map. Hence keeping the web app light yet delivering a better user experience and bringing down cancellation rates.
Booking experience in pick-up zones
Pickup zones are special geo-fenced zones in select cities with pre-marked pick-up points.
Making this experience better for a user, the pickup zones and points had to clearly marked in the PWA and the experience tweaked to support this addition.
What needed to be done was allowing a user to choose only from the pre-set pick-up points in the zones. And to have the map interactions reflect the same experience, allowing a user to snap to a pick-up point within the zone.
Book a cab for someone else
In the scenario an Android/iOS user booked a cab for someone else who didn’t have the Ola app, the latter should still be able to track their ride and access other functionality like cancel ride or rate ride.
Share co-travellers
If a Share cab is booked from the PWA, the user should be able to see their share co-travellers and route details as comfortably as they could if they were an app user.
Buy Ola Pass on the web
With the launch of Ola Pass on the apps and given the prediction of its success, we had to support the same purchase flow for a PWA and Ola Lite user as well. Similar to the app, the purchase flow on the web app has all the possibilities — buy, renew, cancel or register a Pass, with complete integration of Ola Money.
