Case Study / App Design / Setel / Deliver2Me
My role
Product designer
Design System
Documentation
Design QA
Platform
iOS app
Android app
Product
Setel Deliver2Me
Year
2020 March - 2021
↑ Sneak peak of Deliver2Me final designs
Setel is a fuel e-payment platform for Petronas Malaysia. It allows users to unlock the fuel pump and make the payment for their fuel through an app. Users can park their vehicle at the pump and with the help of the Setel app, select the amount and proceed to payment. Compared to the usual method of pumping fuel, which is to walk up to the counter, queue up, make the payment to get the pump unlocked, Setel makes the experience easier. With the whole procedure being few taps away, it is a significant improvement for the fuel purchasing experience. Currently, Setel is reaching a greater level of success with over 80,000 orders per day. One of Setel’s main missions is to improve the station experience beyond providing seamless fuel purchases.
Deliver2Me was launched as the first step towards achieving that goal. The idea of Deliver2Me is to allow users to order snacks/drinks from any F&B outlet located at the station and get the station staff to deliver them to their vehicle.
At first, Deliver2Me was only available for Mesra, which is the convenience store of Petronas. With time, Deliver2Me grew into supporting many merchants.
Our ground operations team reported to us that there are 2 key problems when it comes to purchasing items from the convenience store along with refuelling.
1
No correct direction → Most customers park their vehicle at the pump to walk into the store. This can cause traffic, so some customers are hesitant to leave the car at the pump. They would finish fuelling first and park their vehicle elsewhere in the station so that it wouldn't cause any trouble to others. As this could be a hassle for many, the store could lose plenty of customers, especially during busy hours.
2
Vehicle congestion at the pump → As customers leave their vehicles at the pump, it causes congestion at the station. Especially if the station has confined space and during peak hours. The wait to pump fuel could be concerning as everyone will have to wait for one person’s delay. Therefore, there would be long queues.
How might we offer a better experience for our Setel users who are in need of purchasing items from the convenience store?
What can we do to smoothen the traffic flow at the fuelling station?
Our stakeholders suggested the below for our key problems.
“Allow users to order items through the Setel app while fuelling and get them to collect their order at a Pit Stop on their way out.”
This could improve the shopping experience as the user doesn’t have to walk to the store.
Also, this could solve the vehicle congestion at the station. If everything goes well, users don't have to spend more time than the usual fuelling time. Once they’re done fuelling, they just have to drive through the Pit Stop and collect their items.
A brand new concept → Since this is a brand-new concept, we do not have any competitors, therefore we were unable to do any competitor analysis. We had to trial and error.
UX research → We lacked resources for UX research. So testing after launching was the main method we had to use to validate our solutions.
This project was planned as an MVP. Users could browse a catalogue with a maximum of 10 items, enter the vehicle plate number and confirm the order.
Along with the customer app, we designed an app for the store staff to receive and manage orders. Details of that app will not be mentioned in this case study.
After a thorough analysis of the problems, our stakeholders suggested a plan for Deliver2Me. As the product designer of the team, it was my duty to create a design solution.
Let me explain how Setel refuelling works, before explaining the Deliver2Me solution.
↑ How Setel works
Our idea was to make the Deliver2Me a separate flow within the fuelling flow.
↑ Proposed flow for Deliver2Me
I teamed up with my design lead and started planning designs for the above flow. After a few rounds of sketching, there were few options that I wanted to visually try out.
This was one of the first options I designed for the catalogue. But soon realised there are certain issues here.
1
Visually not distinguish between the fuelling flow and the Deliver2Me flow.
2
When the user expands the bottoms sheet, it covers the refuelling flow. This is something we should not do because when the pump is connected, the user should be able to see it.
After taking the above issues into consideration, I worked on a few other iterations. I shared those iterations with the design team, product manager and the design lead to get their feedback. Then we came to a final go-live version. On this, the main update I did was changing the catalogue to a horizontal scroll. The idea of Deliver2Me was an impulse purchase. There won't be more than 10 items in the catalogue. So a horizontal scroll won’t be hard to browse and most importantly it's not covering the fuelling flow.
This is the first MVP version for Deliver2Me
↑ Proposed flow for Deliver2Me
After we finished building the above design, we went live as a pilot test. Three stations were picked and the feature was released for 40% of the users. As a result of that test, we figured out that this solution has a couple of experience and technical problems.
1
Fuelling timeout → When the pump is connected, the user gets only 3 minutes before start fuelling. Otherwise, the fuelling order will get cancelled automatically. Users were not aware of this timeout and some of them spent more time browsing the catalogue and ended up spending more than 3 minutes.
2
Average item preparation time is 3 - 5 minutes → One of the main problems we wanted to resolve was to reduce the traffic at the station. But even with this solution, the users have to wait at the Pit Stop for a few minutes. Since the average time users spend on fuelling is not more than 2 mins the station staff do not have enough time to prepare the Deliver2Me items. The item preparation time is 3-5 mins. So, this still caused traffic at the station.
3
The Pit Stop concept is not seamless → The Pit Stop location was not the same on each station and it was difficult to communicate that to the user. Also, managing a Pit Stop was costly. Because we have to assign one dedicated station staff for the Pit Stop and most of the station managers did not like that idea.
After figuring out the above issues on the first version, our challenge was to rectify those.
Our project managers, my design lead and I started brainstorming ideas and we came up with the following solutions.
1
Fuelling timeout → Fuelling timeout is technically not possible to fix without doing a major restructuring on the fuelling logic. So we decided to change the Deliver2Me flow. Instead of promoting the catalogue after the PIN verification, we decided to show the catalogue prompt before the PIN. So this will be solving the timeout issue as the pump connection starts only after the PIN is successfully verified.
2
Delivery time → Now with the proposed Pre-PIN catalogue, the user confirms both fuel and Deliver2Me orders at the same time. So the station staff gets an additional 3-4 minutes to prepare the items.
3
Delivering the items to the pump → The Pit Stop concept had its own practicality issues. Therefore, we decided to deliver the items to the pump instead. The station staff might have sufficient time to deliver the items to the pump because of the time saved by the Pre-PIN catalogue. By doing this, station managers don’t have to assign a staff member full time for Deliver2Me.
↑ Deliver2Me Pre Pin flow
Let me elaborate on the other improvements we did for the new “Deliver2Me” Pre-PIN flow.
Improvements on the design
Included the Mesra Store logo → Mesra has been the convenience store of Petronas for over 25 years. The connection between Mesra and Petronas is not something new to Malaysians. So my assumption was that by showing the logo, it will help people to easily understand what this feature is about.
Added a “How it works” page → This page is to improve operational transparency. Also, as mentioned earlier, this is a brand new concept for Malaysia, therefore people might not be aware of what this feature is and how it works.
↑ Snippets from the second version: Deliver2Me Pre PIN
After building the above solution, we fully released it for users at 10 stations. There were few learnings.
1
Delivery Time → More than 95% of the orders were delivered even before the user finished their fuelling. This was a huge success for us as it was exactly what we wanted to resolve; preparation time and station traffic. Earlier, since the station staff didn’t have enough time to prepare the items, users were clogging at the Pit stop. This new Pre-PIN version fixed that issue.
2
Delivering to the pump → Average delivery time was 3-4 minutes. This is similar to the preparation time for the Pit Stop concept. So, this swap of delivering orders to the pump was a success too. As a result, maintaining an expensive Pit Stop was unnecessary and users did not have to worry about driving around to find the Pit Stop.
3
The number of items → On our first version, since the users had to make their orders while fuelling, we wanted the catalogue to be very limited and impulsive. Since the new Pre-PIN flow saves more time, users can browse for a little longer. We identified the possibilities of adding more items to the catalogue with a more user-friendly browsing experience. This opens up doors for more merchants into “Deliver2Me”.
We functioned the previous “Deliver2Me” version for a few months in over 100 stations and it gave us really good results. We realized that “Deliver2Me” has more potential.
We started focusing on increasing the number of items in a catalogue and improving the browsing experience. The problem with the last version was that it was not optimised to handle large catalogues. Mainly because it had a horizontal scroll. So I started drafting ideas on how to display a larger catalogue.
After a few iterations and a few design feedback rounds with the rest of the design team, we decided on the following.
Improved full page browsing experience.
Introduced categories.
Improved full page cart.
Improved order status.
↑ Current Deliver2Me version
As stated before, “Deliver2Me” was a brand new concept. There were many technical difficulties and pushovers from the engineering team. To tackle those issues, I worked closely with them and kept them involved throughout the process.
With regard to handover, I prepared developer handoff specification documents for all the design changes and improvements I did on Deliver2Me. That helps to improve the deliverable quality. I have carefully done design QA for every single pixel on the design before releasing it to the public. As the owner of the mobile design system, I take extra care of the standards of the deliverables.
Sales
35,000/mo.
Returning users
70%
No of stations
250+
