Fuel queues in Sri Lanka were just starting in March – April. After countless hours spent at petrol queues, there just had to be a better way? There was significant variation between the queues at different locations. Certain sheds had close to no vehicles while some sheds had long queues. A solution could be a way to check the queues at locations before stepping out of the house – which shed would get you the required fuel type with the least waiting time.
Enter where.lk. A community-driven fuel location web app for every one in Sri Lanka. All you need to do is login with your Google account and select the type of essential item you need (i.e. octane 95, diesel, super diesel…etc). A map with all the locations selling the item opens up.
Requirements of the fuel locator
The solution had to tick a few boxes to be practical and usable:
- There should be very little friction to use the solution
- It should be available to as large a consumer base as possible
- The status of as many petrol sheds should be presented at a glance
- Support should be readily available
- Easy and inexpensive to maintain
The solution was to give the user an idea about the queue at a particular shed and an idea about the length of the queue. The best and most accurate way to obtain this information would be from the shed itself. However, this also means that there would be a significant process to introduce the app to shed owners/ managers and educate them on using the app. The practicality of such an implementation is highly doubtful and will be insanely time consuming and expensive.
Fuel locator app
A much easier approach would be to let the users themselves rate the sheds. The rating will have to communicate the queue length as well as the actual availability of the fuel at the time the rating is made. However, it would be inconvenient to have a huge form to fill. Rating a shed should be an incredibly swift process otherwise users will not be motivated to make that effort.
After several iterations of testing and user feedback, the UI/ UX above materialised. The rating smileys instantly convey the status of the shed that the user clicked on while inviting them to provide their own rating.
The last updated time, fuel type selector and the navigate button was added later on; in fact, the last updated time was a critical feature that was requested.
The last updated time was considered so crucial that it had to be represented on the marker itself too. The border around the shed marker represents the updated time. A solid border denotes a recently updated location.
The user can click on the map to add a shed at that point. User will see a form like the one below. The coordinate field is autofilled with the coordinates of the point clicked on. The user should fill in the name and rating fields. Mobile number is optional but if provided would show up as a call button on the shed card.
Behind the scenes
Despite switching the default backend to an ExpressJS powered backend (as explained in our previous Technically Speaking article) we decided to use a Laravel-based backend. Shared hosting permits the deployment of Laravel applications without too much of a performance loss. ExpressJS deployed on shared hosting is still experimental in certain edge cases. Since Laravel was after all PHP, it had first class support in shared hosting.
The Laravel app functions both as an API as well as an admin panel. The admin panel is greatly helpful in reducing the time taken to verify and validate new places and updates.
The best option for the web app was React – fast development, easy deployment and client-side caching. Client-side caching saves bandwidth on the server as the user only needs to download the app resources one time (unless there is an update). This saves the user’s bandwidth too!
Efficacy
Daily ratings submitted by users can be averaged to get an idea of the overall rating for that fuel type on that day. This kind of statistic can be used to determine how the availability of the fuel has changed throughout a time period. We can use these statistics to determine the correctness of the solution – if an approach based on community-driven ratings is successful.
The ratings database was connected to Grafana so that the resulting graphs could be displayed beautifully. We can use the data to generate graphs like the one above for any of the fuel types.
We can infer from the graph above that there was a sudden drop in availability from first of May onwards. This makes sense because that was when the private fuel tank owners commenced a strike. In this way, if the drops and rises tally with the real world status, we can say that the approach, in fact, was effective.