©2019 by Milan Mathew. 

PetroZone Version 4.0

UI/UX

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 an Interaction Designer to add to the existing PetroZone GEL library so the app could be more intuitive and user friendly. In addition to the UI, user experience flows needed to be overhauled to allow users to use the new features and verticals.

PZ 4.0 App

Research

A survey was sent to groups of existing users and non-users to understand their background, driving habits and main motivation for using mobile payment apps. With the results, user personas were created to identify the users who use the app.

Personas

Wireframes + Sketches 

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

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. 

Pay at Pump Feature

This is the most used feature of the mobile app. The user will always see the closest location selected in the home screen. The main action button lets the user choose where they want to pay. The user enters their pump number and is then presented with their payment confirmation.
 

Pay in Store Feature

Paying in store allows users to buy fuel and consumer product goods from the store. This is done through a QR code that is scanned at the counter.

Mobile Marketing - Offers, Promos, Coupons, Interstitials

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.

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.

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.

QSR - Scan & Go/Mobile Ordering

One of my first tasks for this project was to implement the Quick Service Restaurant feature,  as an addition to the white label app's features. The feature included a library of menu items where users will be able to place a mobile order up to 24 hours in advance, select their desired location, and then simply confirm via the app when they are ready to pick up their order. This feature was also presented at the 2018 NACS, The National Association of Convenience Store, Conference.

The Launch

With the core set of features and functions complete, we began the process of branding the white label app with our customer’s colors and logos.