Project Overview

In 2020, Pilot Flying J, one of the largest truck travel centers in North America, rolled out a rewards program “Push4Points”, which gives customers more points for gallons they fuel at PFJ locations. The program coincided with the beginning of the COVID-19 pandemic. PFJ expressed gratitude to their customers, truck drivers, who keep the country running, with the most rewarding program in company history. Our team of designers and engineers made Push4Points possible by consulting with PFJ, incorporating business strategy and user needs, while also building and enhancing other new features within the app.

Team Structure and Responsibility

3 designers, 8 engineers, 1 product manager

I worked on transforming business requirements into visual and experiential representations of the loyalty program. After understanding the business objectives, I created wireframes of the new dashboard on the home screen as well as other key screens for Push4Points, animations of the dashboard and modals, sections of the design system. I then applied the design system to deliver final visual designs. I also collaborated closely with the engineers, especially on the implementation of the home screen animations. We had a close relationship with the client and showcased our progress at biweekly checkins.

App Store Assets

We anticipated new and returning customers to download and update the PFJ app to start earning rewards, so we updated the App Store assets to emphasize on new rewards offered to our users. I designed these panels to highlight new features and interface to draw customers in with enticing offers and savings. I also introduced the Push4Points program on the last panel, which offers the highest rewards across industry for drivers to fuel at PFJ locations.

Push4Points Screens

Among the many screen updates throughout the app, we redesigned the home screen and rewards screen featuring reminders to activate Push4Points as well as a dial shaped like a fuel gauge to show at which earning level customers currently stand. We added personalized offer chips at the top of the home screen, which will show up depending on driver’s fueling amount and location.

Animations

We created animations to introduce the app feature updates in a visually engaging way. To make these animations, we started with illustrations and storyboards for each feature, animated in After Effects, and converted to JSON for easy development implementation.

• Turn on location settings

• See personalized pricing

• App updates notifications

• New offers notifications

• Keep track of points earned

Kiosk Promotions

We incorporated Push4Points messaging on the welcome screens and side panels of kiosks in every PFJ physical location to remind customers of the rewards program when they check in at the stores.

Design System

We built a Design System from the ground up as the features and functionality of the app grew, defining and consolidating rules for components and styles (including day and night modes) to streamline production. We started by performing an audit of the existing app interface, picking components to keep or modify, and then created the rest of the components for app updates as well as future uses.

We categorized and cataloged the design system by Core Styles, Elements, Components and Templates, utilizing atomic design principles that all modern design systems are built on today. Our goals for the design system:

• Create a visual language that synthesizes the rules of design that defines the PFJ brand’s look and feel

• Develop a single underlying system that unifies the user experience across devices

• Expand PFJ’s visual language and provide a flexible foundation for innovation and dev implementation

User Testing

Two months before the launch, we convinced the client that user testing was crucial in gathering customers’ feedback to the new designs. We wanted to assess how well drivers understand the new rewards program with the interface and experience we designed.

I helped draft the user testing plan, which then the team traveled to PFJ locations and walked through the screens with customers.

View script here

15 drivers participated in our user testing, which took place at two PFJ locations. Drivers first completed a pre-screening questionnaire, and then the qualifying participants were each asked to complete a series of tasks to test their understanding of the new rewards program.

Turns out that >90% of our users were able to complete the tasks with ease due to their familiarity with mobile apps and the understanding of rewards programs. They loved the new home screen, with the personalized “offer of the day” front and top on the home screen. They loved the rewards dashboard, which tells them the current earning level right on the home screen, instead of requiring them to find the information in a subsidiary page.

All our participants were thrilled by the amount of rewards and various offers and savings they would be able to receive with this new program. A few of them said that if this was real, then they would definitely prefer fueling at PFJ over its competitors.

One confusion that drivers had though, was due to the complex nature of the earning tiers: the program contained multiple earning tiers associated with fueling levels, and with the brief copy we provided on the screens, some drivers weren’t clearly on how to qualify for the next tier. Also, some were confused about the monthly reactivation of the program, with the previous month’s earning level returning to zero.

The user testing finds the new loyalty program easy to understand and very enticing to existing customers, giving PFJ an advantage over its competitors by fostering a close relationship with their customers with the best rewards.

Modifications

Based on the user testing results, we made modifications to the 2 confusion areas we discovered:

On the rewards screen, we added an “About Rewards” tab to explain the clear rules about gallons fueled in relation to earning tier. This tab can also be accessed with the “learn more” link following the explainer copy under the fuel gauges on that same screen.

We also added copy on the dashboard as well as reminder modals about the restart of the program each month, so that users would not forget to reactivate and rack up their earnings for the new month.

Safety Messaging During COVID

We created email campaigns, CMS content blocks, signs and banners for the physical stores to convey PFJ’s commitment to keeping drivers safe during the pandemic. All PFJ locations installed sanitizing stations, implemented mobile payments, as well as promoted the preexisting but lesser appreciated Mobile Fueling feature in the app, which started to grow largely popular.

Results

• New user acquisition

  • 14,000 new users onboarded within a week after Push4Points launched

• Substantial increase in fuel sold, bringing in more revenue for PFJ

  • 78M gallons (34% of all gallons fueled) came from Push4Points

• Well ahead of projected figures in app usage

  • 9.73M app sessions used in first 30 days (and continued strong)

• Increase in Mobile Fueling usage

  • Out of the 212,000 users activating the program within 30 days, 134,000 had opted for Mobile Fueling, a conversion rate of 63%

Quote from the CEO

“As our country continues to navigate this difficult time, the resolve and dedication of the trucking industry and professional drivers continues to amaze all of us. Our team has been working hard on our new Push4Points program and now, more than ever, we want to help drivers save money while they are away from their families and working overtime to supply our country. Thank you, drivers, for all you’re doing to help keep our country moving.”

-Jimmy Haslam, CEO of Pilot Company