The mobile app and station kiosk in sync
Larry Pelty, UXMC
User Experience & Design Leader
Encouraging Exxon Mobil Rewards Program Usage Through Beneficial Mobile Features
A UX Case Study - Updated Product Design
The design challenge
For this project, my Maryland Institute College of Arts’ Master of Professional Studies in UX Design program classmates and I were each directed to focus on a gas station chain of our choice and find opportunities for improvement based on any existing pain points or needs. From the initial background provided, there were many different aspects and approaches possible due to the multitude of available experiences - such as food ordering or touch-less payments - that differed regionally across the United States.
As there are many gas station chains in the surrounding Houston, Texas metropolitan area, there were many options to choose from. Most chains had numerous locations and competition is fierce. It is also not uncommon to find gas stations positioned in close proximity to each other - even across the street - which could even be of the same brand. With little in the way of differentiation between the many gas companies, I chose to focus specifically on the available rewards programs, that each provided, as a means to find new opportunities.
After a brief review of several rewards programs, I ultimately chose ExxonMobil's Reward+ program to proceed.
ExxonMobil, more formally known as The Exxon Mobil Corporation, headquartered in Irving, Texas is a multinational oil and gas company with one of the largest brand presences in the area. Their mobile application, first released in November 2019, has an already polished experience with several key features that allowed for the opportunity to bring about further refinements and enhancements.
Constraints
As the project time was limited to six weeks, with expected deliverables at key milestones, some processes were shortened to allow for the continuation of each stage of the project at the expected times.
Discovery
Interviews, key insights and assumptions
I started with five initial discovery interviews, facilitated remotely with Zoom, to gain a broad and general understanding of how users perceive reward programs and gas station brands.
Based on the interviews with those individuals, recruited through an existing network of friends and acquaintances, convenience and gas prices were mentioned as key factors in determining which gas station to choose. Awareness of individual loyalty programs, as well as use thereof by the interviewees, varied greatly as there are many regional gas station chains and grocery store gas pump options. Additionally, it was indicated that some loyalty programs might influence the selection of a gas station if it doesn’t increase driving time significantly.
A review of the process
In order to better understand the existing mobile application and the interrelated experience of filling up a car with gas, I ventured to a nearby ExxonMobil gas station to record the process from beginning to end - making note of the key interaction points between the mobile app and gas station kiosk.
The UX brief and project plan
Following the initial discovery, I developed a UX brief and initial project plan incorporating the following assumptions while aiming to gain further validation during follow up user research and testing.
Some users are not aware of the available loyalty programs and their subsequent benefits
Users may often select a specific gas station chain based on convenience (is it on the way to where they are going?)
Users may select a station based on price per gallon (is the gas cheaper at one station or another?) as long as it only marginally affects driving time
Members of loyalty programs may select a station based on that affiliation if it only marginally affects driving time
Brand affiliation is less important than convenience and price
Ultimately, after researching the features and benefits of various reward programs, it became clear that the lack of differentiation among the various gas station chains also included its methods of rewarding and enticing users.
With my initial discovery research completed, I was able to more specifically define the challenge statement that would guide my work:
With numerous gas station choices in the region - many with loyalty programs - it can be difficult for any one chain or application to differentiate itself from the others. By focusing on key areas of the Exxon Mobil Rewards+ app to improve visibility of gas station prices at the nearest or most convenient station, enhance touchless payment options for both gas and convenience item purchases, and proactively promote specials or deals to encourage additional purchases, the app could gain more awareness and use, therefore encouraging greater use of its loyalty program.
Two provisional personas created for this project
Key personas and circumstances of use
Based on my initial discovery interviews, I created two provisional personas. First, the convenience-focused user has limited to no brand affiliation and will select a gas station that is near to key locations such as home, work, or other significant places that fall within the driving path to another destination. Their primary focus is getting in and out quickly. Loyalty programs or apps seem to have minimal effect on their choices; however, they might be willing to try one if it makes their experience faster or more efficient.
The second, budget-focused user, tends to be more cost-conscious and may use one or more loyalty apps or programs, depending on the awareness of them. In some cases, while there may be some brand affinity present, choices of a loyalty program may be circumstantial and related to actions they already undertake, such as shopping at a grocery store that also has gas pumps. While being more conscious of gas pricing, it is still balanced by a certain degree of convenience and internal cost-benefit analysis. For example, the budget focused user will not necessarily drive miles out of the way for a minor gas price discount.
Behavioral goals
To achieve the project goals, it became clear that users will need to make use of existing and/or new application features that facilitate a convenient and fast experience at an ExxonMobil station as well as gain - or perceive to gain - a financial benefit. As competitor gas stations are everywhere, the efficiency of the experience should be perceived to outweigh any potential benefit of stopping at a competitor that might be closer to the user.
The existing ExxonMobil loyalty program also provides a benefit in regards to reinforcing the financial aspects as well as potentially building brand affinity. As such, further enhancements to the app should present loyalty program signup options that are quick to complete and are at times that are convenient for the user. Additional promotions or other incentives that will further encourage their use may also be beneficial.
How are people doing this now?
Generally, users within the geographic region seem to focus on the cheapest alternative out of the available gas station options in an area. However, this action depends on the perceived time gained or lost in that selection.
From my interviews, it was also discovered that when using loyalty programs, not all users are familiar with, and use, the available gas station chain mobile apps. Often, their physical program cards are the primary means of making use of those programs. As such, I assumed that many users of the ExxonMobil Rewards+ loyalty program may be unfamiliar with the available mobile application and its features.
What are their pain points?
Awareness of loyalty programs from Exxon Mobil or its competitors is not universal within the region and, therefore, the benefits of those programs are not necessarily widely understood. In situations where there is awareness of these types of programs, they tend to be not well differentiated from one another.
Furthermore, as a heavy traffic metropolitan area, speed and convenience are very important to users in their selection of a gas station, and delays at those stations, even minor, can negatively affect the experience.
Due to the current COVID-19 pandemic, there are also concerns about using their physical credit cards at gas station pumps. This overall concern is worsened due to preexisting fears of card skimming, in which a user's credit card number is remotely scanned by a nearby individual.
Key user scenarios
In order to consider and evaluate new features, or enhancements to existing ones, I created three primary user scenarios to guide my subsequent work.
Scenario 1
A convenience focused user is on the way to work and a quick look on Google Maps shows traffic is heavier than usual. The low gas light is on and he will need to get gas prior to making the 22 mile drive to work. There are six gas stations near home across three regional chains. He needs to fill up quickly and be back on the road to avoid being late to his 9am meeting.
Scenario 2
A budget focused user is on the way home from work but will need to pick up her kids from dance lessons on the way. She is low on gas and will need to fill up soon. She has a grocery store loyalty card in addition to a card from one of the regional gas station chains. She also wants to find the best gas price but doesn’t want to be late getting her kids.
Scenario 3
A middle-aged user is driving to visit his son on the other side of town for dinner. He wants to get gas along the way but, due to preexisting medical conditions, he’s concerned about potential exposure to COVID-19. He wants to get in and out very quickly and would prefer to not touch any more public equipment than he has to.
Ideation
Design principles
As I began to consider visual solutions, I created several design principles that I believed would be key to this project.
1. The experience should encourage efficiency and convenience.
The application should inform the user what ExxonMobil stations are nearby based on the current location, and the direction the vehicle is moving in, when triggered via voice activation.
When a user is at an ExxonMobil station, the app should notify the user that the active or linked payment method is ready to use. A few quick interactions should allow the user to begin pumping gas as well as pay for the purchase.
If the user is not registered for the ExxonMobil Rewards+ program, the app should allow for quick signup using the credit card currently being used, or previously used, to pay for the gas.
2. Price-consciousness should be rewarded.
The mobile app should show real-time updated prices for all gas types at Exxon Mobil stations with potential notifications for price drops at favorited locations.
Loyalty program promotions on gas purchases or convenience store products should be pushed to app users based on their selections and preferences.
3. The ExxonMobil app should respect the users’ privacy and preferences.
As an extension of the first two design principles, the app should not be invasive and only work in ways the user wishes. The benefits of using certain app features should be explained clearly and simply, allowing the user to decide how to proceed.
With a more clear path forward, I began the ideation process.
Initial sketches
Based on the three key user scenarios, I created simple sketches reflecting ideas that could potentially lead to viable solutions.
Wireframes and user flows
Moving into low-fidelity mockups, I initially focused on three sets of wireframes based on the general layout of the existing ExxonMobil application. Using Overflow for Mac, along with Sketch, I created the corresponding user flows that reflected the user scenarios and initial sketches, connecting each screen together to better explore the interaction.
The Exxon Mobil design audit
Design audit
Prior to beginning work on higher fidelity wireframes, I completed a brief design audit of the ExxonMobil application for iOS to capture the core color palette, typography, iconography and components used. As maintaining brand consistency and using established patterns was very important, each element was documented within Sketch for Mac for later reference.
Lastly, online research was completed in order to find the appropriate color hex codes and fonts used for the ExxonMobil brand in order for the new high-fidelity designs and prototype to precisely follow the visual direction of the released product.
Design
For the prototype design, I was interested in evaluating each of the three ideas for enhancing the existing functionality of the mobile application. As the ExxonMobil Rewards+ program is a points based system that works very similarly to the other competitor programs, the three proposed solutions were a means to potentially encourage greater use of the mobile application and, therefore, the loyalty program. Ultimately, I created three separate prototypes initially to test each idea individually.
In order to gain feedback early in the design process, I returned to the five previously interviewed individuals to initially evaluate each prototype direction.
Prototype 1: Pricing, favorites and notifications
Low fidelity screens showing different aspects of the first prototype
The first concept would make use of existing location services utilized by the application to show nearby gas stations. However, this functionality is enhanced with gas price updates that would theoretically update in real-time. In addition, the user would also have the capability to “favorite” a specific location and receive push notifications of price decreases or limited-time promotions.
I believed that this enhancement would be beneficial to the budget-focused user as it may encourage more proactive purchases or selection of nearby ExxonMobil stations over their competitors. Additionally, the lower price points, as well as gaining more points or making use of limited-time promotional offers for rewards program members, may provide a further financial incentive.
As part of the prototype, I created a simulated push notification that would indicate a new promotion was started at that specific station.
During the initial test sessions, I found that users reacted positively to the inclusion of prices and were also interested in seeing competitor prices as well. Overall, this feature was found to be beneficial to budget-focused users but would require additional technical research in order to determine methods of accessing competitor pricing.
Prototype 2: Siri voice shortcut
Low fidelity screens showing different aspects of the second prototype
While existing voice assistants can provide nearby gas station location results, the implementation is currently limited to one particular geographic location - the user's - as the point of reference. This approach becomes less effective when you are driving and are interested only in those gas stations that are on or near your current route. Those locations that have already been passed, while perhaps closer, could lead to significant delay.
This concept incorporated the addition of the Add shortcut to Siri functionality present in current iOS releases that will allow more specific app-based functionality triggered by voice input. By asking for ExxonMobil stations on your route, Siri will query the mobile application for those locations close by, yet filtered based on your current direction, rate of speed and available map routes. While those results will be displayed on the phone screen (and potentially a CarPlay screen), Siri will also ask the user if directions are requested. If affirmative, directions will automatically be sent to the Maps app and the route will be started.
For the convenience-focused user, I believed that this feature could provide quick access to nearby ExxonMobil gas stations with minimal delays in travel time, especially in unknown areas. Also, as a feature that makes the selection of an ExxonMobil station easier, it may encourage additional use of the Rewards+ program, which may be otherwise unused by this user type.
To create the simulation, I used the text-to-speech capability of Macs, along with a software utility called Audio Hijack, to record different variations for voice responses that would be triggered by the shortcut. Minor edits were also completed using Adobe Audition. As Invision does not have voice capability, I manually played the voice responses during initial testing.
User feedback was also positive and this feature was generally believed to be a time-saver. However as not all users make use of voice assistants, it was unclear as to how often it would be utilized.
Prototype 3: Quick payment
Low fidelity screens showing different aspects of the third prototype
The existing mobile application contains a contactless payment function linked to a credit card or other payment type. However, it is a multi-click process to authorize the pump, starting with finding the app on one’s phone first. This concept extends the current functionality to include the existing location services integration with an additional push notifications feature.
As a user enters the proximity of an ExxonMobil gas station, an alert would notify the user indicating that the quick payment method is ready for use. While the design incorporates a phone screen, it could work effectively as a smart watch notification as well. When the user taps the notification, they are brought to an updated version of the pump selection screen that also provides visual feedback as to the location they are currently at. Selecting the pump and authorizing the payment then proceeds much like the currently live application.
For the convenience-focused user, this enhancement can further speed up the process of filling up at a nearby ExxonMobil station, once again potentially encouraging the use of the Rewards+ program.
Like the first prototype, I also created a simulated push notification that would be presented during the arrival at an ExxonMobil station in the testing scenario, allowing the user to go straight into the pump selection process. This would save time by acting as a shortcut, bypassing several taps to get to the same location.
Validation
Combining the three opportunities
Following usability testing with the three concept prototypes, I constructed a higher fidelity, yet mostly grayscale, prototype combining all three ideas. Interactions were expanded to create a more realistic, and fluid experience within the application. Additionally, with this prototype, I made use of Adobe XD instead of Invision in order to gain the needed functionality for proper testing. This tool provided a more realistic simulation, including the capability to incorporate voice activation and responses which were necessary to prototype the Siri shortcuts.
However, testing was affected unexpectedly due to an unusual requirement with the Adobe XD software. While testing with users is easily handled, making use of the voice features required the user testing it to log in with an Adobe ID. As some participants did not have one, testing was delayed somewhat, but fortunately they continued as those participants were willing to create the necessary Adobe ID.
As with the prior sessions, I also received positive feedback in regards to the new features with a few opportunities for improvement. While testing the Siri shortcut was challenging, it too was viewed as being beneficial. However, I also observed that users might activate the Siri command in slightly different ways creating a potential pain point. Siri shortcuts require a certain degree of specificity in the trigger. Even a slight deviation in the command may lead to a standard Siri response instead of one initiated from the shortcut, which could lead to very different results.
The final prototype
As a final stage of this project, I enhanced the existing screens with the appropriate brand assets for ExxonMobil, such as color, typography, logos and promotional content. Adjustments were also made to the combined prototype based on user feedback from each testing session.
As the new features involve the user moving in and out of the application, I started the prototype from the home screen in order to create a more realistic experience.
Next steps
During the usability tests, one of the opportunities that arose was around identifying the cheapest gas on a current route, such as on the way to work. To do so, the user would need to add frequently visited locations to the app so that the results would be concise and based on the user’s current location and direction of travel. Only those stations that remain in close proximity to the route would continue to show.
While I was unable to add this feature into the prototype due to the time constraints, I believe it adds further refinement to the new features and, as such, should be incorporated into future states of the application.
Future states incorporating saved locations
Looking ahead
In moving forward with these enhancements, I think continued work with the Siri shortcuts would be necessary, including technical research to evaluate any challenges in implementation. Additionally, other opportunities that were discovered during testing should also be prototyped and further evaluated. As testing continues, it should be broadened to other metropolitan areas to validate current assumptions and to work toward minimizing any biases or regional inclinations. Lastly, technical research should also be completed to determine ways to update price data from ExxonMobil stations.
The recent COVID-19 pandemic has also created potential opportunities for ExxonMobil to gain additional customers based on expanding the functionality or awareness of currently available “touch-less” purchase or service options. These could also be further explored through various traditional and digital marketing endeavors.
Although the scope of this project was somewhat limited, I believe that there is support in regards to focusing on specific areas of the ExxonMobil Rewards+ app the app to lead toward greater awareness and use of its loyalty program and the related app features.