PetroZone

PetroZone is a white label platform that allows mobile payment for gas stations, convenience stores, and quick serve restaurants. The mobile app is powered by P97’s cloud platform to enable payment, and P97’s web management portal, which allows customers to publish digital marketing offers.

I was brought on as the lead designer and product manager to completely overhaul the app and to launch the newest version with the app’s existing customers. To accomplish that, a complete architectural change to the product was needed. It needed to be built from the get-go with the user in mind.

The Design System

The app needed to fit both customer and user needs. The framework needed flexible and have easy maintenance as the product expands to more customers and as additional features get added.We created a design library and componentized all parts of the app. Rather than build on a screen by screen basis, we would build smaller components that would be pieced together as groups of UI. Screens patterns would be composed of these different groups of UI. The content inside would be customizable by the client. This created an easy to maintain system where a single update can cascade through every screen utilizing that component.

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

Prototypes

After establishing our Global Experience Language (GEL) system and patterns, I was able to use our system to port over existing features and functions in version 3 of the PetroZone app and build it using the GEL design system.

Multiple versions of the core function prototypes were tested with dozens of users. The core functions were derived from observing and interviewing users as the purchased fuel. From those observations, I created a set of behavioral assumptions. Those assumptions were then validated with dozens of users. The final version of the home screen reflected their preferences and feedback.

Mobile Marketing

While our users desired simplicity and speed, our retail fueling customers’ objective was to increase revenue from in-store purchases at their fueling sites and convenience stores. To bridge the gap between user and customer needs, we created an ad network that allowed customers to create featured marketing offers and dynamic, contextual ads. The customers would be able to create different triggers based on user history and behavior in the PetroZone web portal and push the offers to the mobile app.

While users generally do not like being faced with ads, we knew users had a high chance of engagement when presented with the right ad, at the right time, with the right incentive. We categorized the marketing offers as featured offers, promos, coupons, and interstitials. We also created a specific section in the app to house all promos and coupons.

Offers, promos and coupons

Offers, promos and coupons are cards created by the customer in the PetroZone web portal. We defined promos as marketing offers with no discounts that could not be redeemed during a transactions; they exist as a general announcement of a special promotional period or an ad. Coupons are define as offers that could be redeemed by the user during a transaction and may expire after its redemption.

In the PetroZone web portal, the customer can define images, header text, body text, CTAs, and select whether to link the CTA to an external URL or link it to pre-defined zones within the app. When an offer is published in the web portal, it would immediately show up in the mobile app.

Interstitials

We defined zones in the app where interstitials would show up. These interstitials are customizable by the customer through the PetroZone web portal. In the web portal, we established components that customers can have full creative control over, such as background images, header text, body text, CTA placement, and interstitial type. The types of interstitials available were card interstitials, and full-screen interstitials. We also established rules around the use of interstitials to prevent unwanted spamming of end-users. To prevent misuse, we established that all interstitials had to be connected to existing marketing offers in order to published.

We also needed buy-in from payment providers such as Apple Pay, Chase Pay, Google Pay, Masterpass, Visa Checkout, BIM and a multitude of few others.

Different customers had different sets of preferred payment partners. Each payment provider had specific UI, UX and security requirements that had to be met. To handle so many payment flows, we created UI and UX that met each payment provider’s standards and requirements.