Behind the Scenes

Fuel queues and

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 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.

Page in the app showing the map with all the sheds and their fuel status
Page in the app showing the map with all the sheds and their fuel status

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.

Popup dialog showing the area to see and view the rating

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.

Two different shed statuses
Two different shed statuses

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.

Web form showing options required to add a new shed including fuel type
Screen to add a new shed

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.

A screenshot from the admin panel showing the details of various sheds currently in the database
A screenshot from the admin portal showing the existing fuel sheds

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!


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 movement of petrol 92 availability over time

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.

Behind the Scenes

WordPress powered website for Sri Imports

Sri Imports is a rapidly expanding flooring and tiling company in Australia. They have been in business since 2015 and grown since then. They had a website which was set up at the start of the business. Though it looked quite up-to-date at the time, 4 years without any design updates had stagnated the site. They needed a WordPress powered website that suited today’s design aesthetics and web usage.

Welcome the new Sri Imports website. We created the new website from the ground-up using the WordPress platform. This meant that the site, once hosted, could easily be managed by Mr Sri (the owner) himself. They already had a solid online marketing campaign which utilized ads on Gumtree and the Sri Imports Facebook page. We created the new WordPress-powered website with these practices in mind; to enhance the effectiveness of these practices.

Praveen took on this project armed with previous experience of sites created on the WordPress platform by us. We made sure to include large displays of photos. It’s all about the appearance and seeing for oneself the quality and beauty of the flooring.

The company offered a wide range of flooring options. This meant that the options had to be categorized and ordered in an accessible way. Due to this reason, we opted for a hidden dropdown menu in the navigation bar. All flooring options and items had thumbnails attached to them so the user could see a preview of the options before even stepping into the physical shop.

Social media integration is key these days. The company already had an active Facebook fan page. We added a Messenger chat button so that prospective clients can get in touch instantly.

Behind the Scenes

Web Design for Ritzy Automart

The owner of Ritzy Automart, Chethane Nanayakkara identified the significance of  an online presence, even for a car dealership. With the opening of their dealership in Yakkala, Sri Lanka, they also unveiled their website, Chethana handed the huge responsibility of designing their site to OrpheusHQ. Our newest member, Ruchila, successfully completed the web design for the site within a couple of weeks.

Ruchila continued using WordPress to do the web design. This approach has proved to be both fast and reliable in the past. We chose a hosting service that suits the budget, speed and storage requirements of our client.

The web design incorporates a page with extensive vehicle search including brand, transmission type, color and a price range slider. The website adorns a lot of images as we understand that people like to see what they will get before buying the car or vehicle. There is a lot of image sliders and animations to make the experience more dynamic and real.

With advice from Uditha Dissanyake, we did realize that the site is going to be used by  a lot of people in the age range 45 to 55 years. This meant that the site had to be very easy to use and legible.

Final Thoughts on the web design

The website was similar in a lot of ways to what we had already encountered. Although it was not a novelty project, we were able to squeeze in some features that were challenging to us, and our member Ruchila. We strive to challenge oruselves not only for our clients, but also for our own experience.

You should definitely visit Ritzy Automart if you are searching for a sweet new ride. They have really competitive pricing and a diverse selection of models to fit all kinds of budgets. They also have discounts for permit holders. In the mean time, you can give a visit!

Owner of Ritzy Automart using the site with our web design
Chethane Nanayakkara, owner of Ritzy Automart using the site

Behind the Scenes

OrpheusHQ sliding into the corporate space!


There used to be a time when student attendance had to be manually calculated by hand. This was despite the fingerprint machines used to collect the attendances during the start and end of each lecture. The director of Institute of Human Resource Advancement, University of Colombo, Dr Jayakody saw clear room for much needed improvement of this practice.

After getting in touch with one of our co-founders and discussing the problem, a solution was immediately presented. The fingerprint machines were not the most modern models, in that they lacked any form of wireless connectivity. The only way to get at the attendance data was to manually copy the data onto a PC. At this point in time, Dr Jayakody did not want to purchase new fingerprint machines.

This meant that a manual step of copying the data had to be present in the new system. Always up for a challenge, Praveen was already on the case – making it clear that the rest of the system would be highly optimized and perfectly automated that the latter sacrifice would not be felt by the end-user personnel.

OrpheusHQ Team with IHRA Director and staff
Praveen and Hasith representing OrpehusHQ with the IHRA Director (Middle) and IHRA crew utilizing the system

The Solution

The proposed solution was to upload the data onto a backend where all the other processing would happen. The data from the fingerprint machine had the barebones information only: the student ID, date, clock-in time and the clock-out time. The proposed system had to determine every other aspect; from determining if the student was late all the way to determining which subject the student had depending on their course and day of the week. Praveen was hell bent on making the system nothing short of perfect – the algorithms were complicated but efficient. The final outcome was as expected – the fingerprint data had only to be uploaded. Within a minute of uploading, the required reports could be downloaded. The system allowed the retrieval of different types of reports – an overview report for the director and individual reports for the students.

Praveen decided to go a step further – integration with the learning management system. As an added feature of the new system, the students could now view their individual attendance from their LMS.

The new system performed a series of trial runs on a small set of courses. During this trial run, input from the staff helped us to create and produce a practically sound system.

A sound system vs. a practically sound system

It is quite easy to design a system that works perfectly under the optimal conditions. Utilise such a system where a majority of the algorithms depend on the behaviour of people and you’ll quickly see the system crumble like the anecdotal cookie.

The problem lies in the ‘behaviour of people’ – people’s behaviour cannot be modified the same way computer programs do (obviously). We comprehended that rather than adapting the people to the new system, the system should work in a way that requires minimal amount of change on the people’s side.

After this first trial run, the system underwent modification with additional features to address these pain points. This was a major turning point for the team – creating a practical system (in contrast to a MVP) is always the way to go. Such in-depth understanding of the end-user was thanks to the level of communication with the end-user; not just the IT staff but the staff who would actually use it.


The OrpheusHQ crew unveiled the system after providing the staff with a short training session! Yet another workplace inefficiency corrected accordingly by the Team. The system significantly reduced the time needed to make these reports while providing additional benefits for the management staff and the students.

Behind the Scenes Design

‘Samanal Sihinaya’ Concert

On the 31st of December 2016, the cool mountaintops of Bandarawela witnessed the duo Kasun Kalhara and Indrachapa Liyanage live in concert. This was one of the first times, that two such high profile artists were brought in for a concert in Bandarawela. The event was undertaken by Youth Aura.

All of the promotional material including the logos, banners, tickets and handouts were produced by us here at OrpheusHQ..

The promotional logo created for the concert showcased on the official t-shirt

We tried something adventurous with the ‘Bandarawela’ text on the tickets; if you look closely, you could see some of the significant places around Bandarawela through the letters.

If you look closely at the letters in “Bandarawela”, you could see some of the famous places like Nine Arches’ Bridge

Tickets from the concert

The trailer video and the teasers were also made by OrpheusHQ, single-handedly by Hasith.

Thanks to Brothers’ Mint Photography for the great pictures! Check them out too!

Behind the Scenes

Site Check

Gone online on the 15th of September 2018 @5:55 PM Sri Lankan time!

Hope you enjoy reading the content on our blog as much as we enjoyed creating it.

We are truly honored to share our experiences and stories from the vast field of IT & designs with you 🙂

Praveen, Hasith and Koojana
Founders, Solved by Orpheus