PetroZone is a white label platform that allows mobile payment for gas stations, convenience stores, and quick serve restaurants.
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.
Senior interaction designer working with developers, Product Designer and Product Manager.
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.
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
Personas were created, base on the survey, helping the business the understand who uses their product.
Users wanted the ability to select pump and pay quickly
Majority of users were not interested in ads or deals on the home screen
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.
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.
Sketching
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.
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
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
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.
