PetroZone is a white label platform that allows mobile payment for gas stations, convenience stores, and quick serve restaurants.

  • UI/UX


With new customers joining the PetroZone platform, there was a growing need for custom features. The way the white label product was developed, it took a lot of time and maintenance to implement custom features to only one customer. It became clear there needed to be a way to create unique branded experiences for dozens of B2B customers without hindering user experience.

My Role

Senior interaction designer working with developers, Product Designer and Product Manager.


Getting Started

I was brought in to help the product designer with adding to the existing PetroZone GEL library and expanding the features in the white label product. The first task I did was explore the app and the GEL library. I also spent the first couple of days having meetings with developers, sales, and product team to get a basic understanding how the product functioned. Eventually, I was tasked to take the lead on building the UI/UX and components for the custom features solution.


Surveying 40 People

To help our team and the business get a basic understanding of why users use or don’t use a mobile payment app, a survey was made and sent out. The information gathered gave the team an understanding of the user's background, driving habits and main motivation for using mobile payment apps. 


Of surveyed bought gas weekly


Of surveyed did NOT buy other items besides gas at gas stations


Of surveyed bought gas after work

The users


Personas were created, base on the survey, helping the business the understand who uses their product.


Main Goals

Fast Pump Experience

Users wanted the ability to select pump and pay quickly

Minimize Ads

Majority of users were not interested in ads or deals on the home screen

The challenge

How can we make the white label more customizable and drive B2B business needs without sacrificing user experience?



Create a modular home screen with a system of flexible components. This would allow a single component to be swapped with another component to create unique brand experiences without hindering user experience. I was tasked to take the lead on building out the UI/UX of the modular home screen.

Issue 1

Improved Flows

Some of the user flows needed to be overhauled to accommodate unique integrations and new components. I worked with backend and frontend developers to collaborate on the information architecture of the app.

issue 2


I started sketching out ideas of the solution and the potential components.

High Fidelity
After showing the sketches and low fidelity mockups, I used the feedback from developers and other designers to create the new components. These would be implemented into new home screens for customers.


Home Screens

This framework allowed flexible branding in the white label app and allowed us to create unique branded experiences for dozens of customers without extensive development time.

List Home Screen

Offer Home Screen

Map + Offer Home Screen

Getting feedback

A/B Test

10 users were presented with high-fidelity prototypes of Offer and Map + Offer home screens. The participants were asked to find a store, pay for fuel, add a new payment method, and a few other tasks.


Users preferred Map + Offer Home Screen


Many users stated the ability to quickly view a map is reasoning for choosing the Map + Offer Home Screen


Product Implementation

The insights from our A/B test gave the team and business data to help us moved forward with proposing a home screen to customers that would be user friendly. Below are some product implantation of the modular home screen for various customers.

Product Design. Beat maker. Sneaker head.
Please feel free to hit me up via email, I always try to make time for coffee and for meeting new people. I’m also on Instagram, LinkedIn & Soundcloud. You can download my resume here.