Case Study — MyPertamina Redesign

A design exploration on digital financial platform for purchasing gasoline at Pertamina’s Gas Station.

MyPertamina is a digital financial platform released by Pertamina that had an Integration with LinkAja apps. It used as a Cashless payment method at Pertamina’s public fueling stations. At least by September ’22, it is mandatory to use MyPertamina while purchasing subsidiary gasoline as the stock is limited and MyPertamina act as a tracker from Pertamina.

Constraint

1. I’m not done in depth interview to gather better insight especially on emotional side.
2. I only did desk research to cover it and I only found users that used gasoline as their fuel. (not electric car user)
3. Focusing only on payment flow via MyPertamina Apps

User’s POV on MyPertamina

To find what user’s thought about MyPertamina apps, I’ve done a simple desk research such as browse through Play Store review section. User’s thought MyPertamina solely as an app to purchase subsidiary gasoline such as Pertalite and Solar.

Some of Play Store review of MyPertamina

Problem Statement

User need an efficient way to purchase Pertalite or Other subsidiary gasoline with ease, because they feel the current purchasing is cumbersome.

So How might we help users to efficiently purchase subsidiary gasoline?

Before I redesigned MyPertamina interface, I began to analyze their original user interface. What I could keep or improve from their original design.

Original Interface

Original MyPertamina’s Homescreen Interface Design

In homescreen page, I tried to think why user will “hire” MyPertamina apps or what kind of “Jobs” they wanted MyPertamina to do. As stated on user’s pov before, user “hire” MyPertamina as a payment solution for purchasing subsidiary gasoline. Hence, we should prioritize information that highly related to payment. I gave annotation to original User Interface about things that could be improved. Such as:

1. The color used in the App Header is very distinct and has the ability of attracting the eye attention to it, but there are no important information above that related to payment.
2. Total purchased liter, using colors that signal this value is “important to see” although it isn’t. It should be deprioritized.
3. Meanwhile, the total amount of the balance is looks small compare to Total purchased liter. Which as a payment app, is the figure that will be seen at first glance after opening the application. It should be prioritzed more.
4. There are no obvious call to action button as almost all icon button uses distinct color and product menu below it make the interface cluttered.
5. Messages menu with no urgency to show on the BottomBar. This menu’s priority should be reduced. We could use it as product menu to hide “Delivery Service”, “Charging Station”, “Merchandise” and so on.
6. The Call Center menu is located on the right side of the BottomBar. A place that is unusual in other apps because it tends to be used for settings/profiles. Aside from that, there is no urgent need to put a call center in a prominent position.

I wanted to show other screen such as checkout page and vehicle data input as it part of payment flow, but I couldn’t as I can only see it when I scan a QR code given on Pertamina Gas Station. (I’ll update it if I have time 🥲)

Wireframe

Before jump into High Fidelity design, I decided to sketch a wireframe to speed up my Idea generation.

Pen & Paper Wireframe

High Fidelity Design

Redesigned Homescreen

To maintain MyPertamina identity, Brand color could be used to highlight an object that we want user have attention to. In this case, Wallet section and Pay Button as a CTA.

I also gave an annotation to redesigned Homesceren:

1. App Header now used more neutral color so it didn’t drive unnecessary attention to it.
2. Messages move up top, and act as a notification page. Using bell icon as it already familiar with user as a notification.
3. Way bigger balance font size, so user could see it easily. Also, I rearranged the order of it so user will see the balance first before points they got. I also changed icon button inside wallet section to be more related with “Payment” and “Subsidiary Program”
4. I try to put a distinct color to wallet card section. So user’s attention could move here as soon as they open the app, so user could decide faster whether they need to top up first or go straight to pay button.
5. A clear Call to Action button, so MyPertamina have a proper prompt/trigger for user to purchase gasoline. It placed on the BottomBar with bigger size compared to other button so user could reach it easily.
6. Call center menu now is moved into Account page. As it doesn’t have urgency to show upfront and could be placed inside account page.
7. Change on other menu to “Promo” so user could find promo that Pertamina offer and Product page where “Delivery Service”, “Charging Station”, “Merchandise” and other menu on original design before will be placed.

Scan Page & Detail Page

Before vs After

Before vs After redesign

Conclusion

This exercise help me to understand a bit about “Jobs-to-be-Done” Framework, where the user intention and motivation is a solid foundation on designing a product. It is a fun exercise where I train to think why user use a product and help me to understand how to empathize with user.

PS: I need feedback, feel free to leave your critics or feedback regarding my design or writings.
Thank you for reading my case study! and give a clap👏🏻 if you like it but still don’t hesitate to leave your comments 😁

Cheers! :)