Project Summary

The loyalty portal is for both guests and pro drivers. Pro drivers, such as truckers, need a way to keep track of their fuel receipts.

The current state did not allow transactions to be downloaded or viewed on mobile devices, nor rewards managed by drivers.

Business Goal

The business goal was to find a way for the trucker to manage printed receipts and manage all Loyalty portal transactions.

Business wants all transaction types, which will help truckers when it comes time to collect invoices for trips.

The interface also displays data on rewards earned and redeemed by drivers, transaction dates, and filter by transaction categories.

UX Role

UX/UI focused on information architecture, visual and interaction design. The flow of information and logic of the layout out is vital because there are several ways to interact, retrieve and view information. 

Visual hierarchal signifiers such as filters and icons are essential when dealing with dynamic content with less real estate due to information overload.

The project required working closely with:

  • Product Owner
  • Loyalty Rewards Team
  • Merchandise Team
  • Sales Team
  • Marketing Team
  • API Developers
  • Front End Developers

UX Insight and Findings

Understanding how the data was stored in Salesforce and working with the API team helped sell the proposed design. The information pulled needed to be accurate, and make sense to the end-user.

Design Intent

Understanding how the data was stored in Salesforce and working with the API team helped sell the proposed design. The information pulled needed to be accurate and make sense to the end-user (trucker).

The look and feel of the transaction area match existing designs already implemented throughout the loyalty portal.

Repurposing existing assets helped with a tight timeline. Using signifiers to guide the user will simply the interface for three screen sizes.

Desktop Wireframe

Ethnography Research

Going to the travel center and observing truck drivers in their environment helped with the expected behavior of retrieving receipts.

  • They went directly to the kiosk machine, which displays their transactions, prints the ticket, and shows their reward status.
  • Interviewing them in person was valuable because it turns out they prefer a printed receipt in hand versus a digital token.
  • Predicting their actions helps bridge the gap between the intended design and users’ mental model.

Travel Center

In-store Kiosk for Truckers


The data pulled is limited, and the receipts are generated from the store once the transaction takes place.

The UI needs to allow the user to download one or multiple purchases and view, print, and email the receipt to themselves.

Because the interaction is complicated, the logic needs to make sense on a smaller screen, considering the touch factor, load time, generation, and receipt length.

Mobile Wireframes


The interface integrates well with the portal’s current look and feel, with no substantial branding changes. The organization of elements and icons played a considerable role in its success with the business.

Functionality and design work well together, and interaction has the same behaviors as the rest of the site, making the learning curve low.

The new transactions list and downloadable receipts enhance truckers’ productivity and help them with keeping track of their rewards, mileage, and diesel transactions; on the desktop and mobile devices.

Below is an example of the prototype walkthrough:

  • Sort transactions by ascending date
  • Sort transaction by descending type
  • Email all transactions to yourself
  • Close Confirmation window
  • Go to the next page of transactions
  • View 10/15 transaction receipt
  • Email the receipt to yourself
  • Close confirmation window
  • Close Receipt view