Product: Portapay
Portapay, a product of EleMech, Inc., is a mobile-first B2C app designed for water transportation truck drivers. The app streamlines the payment process when using municipal water loading or waste-water unloading stations by allowing drivers to create an account, and add funds manually when needed, or automatically based on a threshold dollar amount.
This allows users to bypass manual key entry of truck or account information with each load, reduces the need to carry keycards or fobs, and allows business owners to directly manage funds their drivers have access to without being on-site.
The Portapay logo, designed by myself, shares common elements with its sister application, Portalogic, an app for managing water loading and unloading stations.
Problem
Portapay needed to fulfill a single purpose: streamline the payment process at water loading and unloading stations. Municipalities who maintain the stations often lack in technology, making payment a manual process of entering driver data and payment information each time a driver uses a station. In fact, our research showed a high percentage of these stations were quarter fed, which adds tedium for the drivers and manual labor for staff running the station.
Portapay needed to reach drivers and water truck business owners with a level of simplicity that made it worth changing their own business practices.
Our initial customer base would likely learn about the product by using a station capable of accepting payment through Portapay, which meant our user flow through account creation and payment method had to be as user friendly as possible. Once inside the app, users could add funds to an account, set up automatic payments based on threshold, and track spending and usage based on truck number or driver. While a business owner may access the app on a desktop or laptop device, most of our users would be mobile. This called for a number of features:
- Simple account creation
- Multiple levels of account access
- Easy to understand fund reports and payment method management
- Fully responsive behavior across all functions
- Multiple levels of account access
- Easy to understand fund reports and payment method management
- Fully responsive behavior across all functions
This is the initial user experience outline, color coded to show in what space the user would be interacting with our product.
One particular hurdle we came across early in our development process was in getting the user to recognize and remember an access number and pin required by the station. Initially, the dev team planned for the user to receive an email containing these numbers requiring the user to switch between the app and their email multiple times. Rather than having them leave the app to verify their email address, return to the app to make a payment, and then return to their email to retrieve the numbers, I pushed our team to create a simple pop-up in the app once a payment was made. This way, the user received their access numbers without leaving the app.
A wireframe sketch of our most common user flow showing the access number and pin alert message after adding funds.
The last challenge before moving into testing was our spreadsheet style report pages. Our style toolkit, which had a robust selection of features and premade widgets, lacked a responsive spreadsheet. Our report pages displayed correctly in both desktop and tablet formats, however our app was primarily mobile. I needed to develop a sustainable solution that could handle reformatting our data in a way that made sense on a mobile device.
After studying the HTML and CSS of our toolkit, I was able to put together a supplemental stylesheet to override the original at thinner breakpoints using media queries. I started with wireframe sketches to illustrate my point to my team.
A wireframe sketch showing the basic concept of reformatting long report entries into something legible on a mobile device.
Outcome
Given the business-to-customer nature of Portapay, we took special care during our testing process given this app would be in many more hands than our other office/workplace based apps. We went to such lengths as to set up a physical dummy station in our shop, and after our team's initial testing, we handed the app over to our panel builders, electrical engineers, the panel testing team, and the fulfillment and shipping department, all of whom had never seen let alone used the app before.
After smoothing out the experience, which involved reformatting our onscreen instructions, adding signage to reinforce onscreen prompts, and rethinking automated email subject lines, we found our testers' experiences running shorter and shorter, until nearly all of our test subjects could complete the first-time-user process — entirely uneducated — in less than a minute. This was a major improvement over the manual experience, whose mandatory key-entry based process could stretch out to nearly five minutes. The returning user experience reduced the average time at the station even further, requiring only the access number and pin, provided funds were in the account.
This app released to our customer base to great success. It started with a simple problem of tedious station use, and offered a solution that was good for the municipal station owners, good for the drivers and business owners, and good for our company as well. The station owners benefited from faster times at the station, meaning more paid loads per day. The drivers experienced a simpler process at the station and greater visibility over their spending. Lastly, our company added an additional revenue stream that also added value to an existing product. Portapay is truly a win-win-win scenario in its niche market.
