App Clip Card
App Clip Card
App Clip Card
Alan Valek - Product Designer Portfolio - Home Page
Alan Valek - Product Designer Portfolio - Home Page
Alan Valek - Product Designer Portfolio - Home Page

Exxon Mobil App Clip

Exxon Mobil App Clip

Exxon Mobil App Clip

Pay for fuel in seconds with this streamlined version of the Exxon Mobil Rewards+ app.

Pay for fuel in seconds with this streamlined version of the Exxon Mobil Rewards+ app.

Pay for fuel in seconds with this streamlined version of the Exxon Mobil Rewards+ app.

Role

Product Design

Platform

iOS

Date

2020 – 2022

Goal

Boost fuel sales by giving iPhone users an simpler way to pay at the pump, and convert them into Exxon Mobil Rewards+ members.

Outcome

Up to

36%

Increase in Exxon Mobil Rewards+ members

Up to

10%

Increase in fuel sales

Up to

8%

Increase in full app downloads

Role

Product Design

Platform

iOS

Date

2020 – 2022

Goal

Boost fuel sales by giving iPhone users an simpler way to pay at the pump, and convert them into Exxon Mobil Rewards+ members.

Outcome

Up to

36%

Increase in Exxon Mobil Rewards+ members

Up to

10%

Increase in fuel sales

Up to

8%

Increase in full app downloads

Role

Product Design

Platform

iOS

Date

2020 – 2022

Goal

Boost fuel sales by giving iPhone users a simpler way to pay for fuel, and convert them into rewards program members.

results

Up to

36%

Increase in Exxon Mobil Rewards+ members

Up to

10%

Increase in fuel sales

Up to

8%

Increase in full app downloads

Results

Overview

Goal

Role
Product Design

platform
iOS

Date
2020–2022

What are App Clips and App Clip Codes?

App Clips

App Clips

An App Clip is a small part of your app that’s discoverable at the moment it’s needed and lets people complete a quick task from your app — even before installing your full app.

App Clip Codes

App Clip Codes

An App Clip Code is immediately recognizable to users and lets them know an App Clip is available. The App Clip Code offers a fast and secure launch experience for your App Clip that users trust.

Exxon Mobil App Clip
Exxon Mobil App Clip
Exxon Mobil App Clip
Exxon Mobil App Clip
Exxon Mobil App Clip

Designing the best fueling experience.

The primary goal of the Exxon Mobil App Clip was to create a contextual, digital payment experience that gets you pumping gas in a matter of seconds. This is also an acquisition play by encouraging people to join the rewards+ loyalty program. To achieve this, I had to streamline the current fueling and onboarding experiences in the full app, Exxon Mobil Rewards+, while considering the physical interaction of using the App Clip Code.

The primary goal of the Exxon Mobil App Clip was to create a contextual, digital payment experience that gets you pumping gas in a matter of seconds. This is also an acquisition play by encouraging people to join the rewards+ loyalty program. To achieve this, I had to streamline the current fueling and onboarding experiences in the full app, Exxon Mobil Rewards+, while considering the physical interaction of using the App Clip Code.

The primary goal of the Exxon Mobil App Clip was to create a contextual, digital payment experience that gets you pumping gas in a matter of seconds. This is also an acquisition play by encouraging people to join the rewards+ loyalty program. To achieve this, I had to streamline the current fueling and onboarding experiences in the full app, Exxon Mobil Rewards+, while considering the physical interaction of using the App Clip Code.

  • App Clip Card
  • Fill-up at Exxon and Mobil stations
  • Apple Pay sheet
  • Join Exxon Mobil Rewards+
  • Continue with Apple
  • One more thing
  • Welcome to Exxon Mobil Rewards+
  • Get the Exxon Mobil Rewards+ app
  • App Clip Card
  • Fill-up at Exxon and Mobil stations
  • Apple Pay sheet
  • Join Exxon Mobil Rewards+
  • One more thing
  • Welcome to Exxon Mobil Rewards+
  • Get the Exxon Mobil Rewards+ app

Dig into the details.

Safe and secure

To keep payment transactions secure, we used the location verification API. This ensures that App Clip Codes will only work at specified gas stations. If someone peels off the App Clip Code and tries to place it elsewhere — it won’t work.

Contactless payment

To make the payment process quick and easy, I went with Apple Pay. Standing in front of the fuel pump and adding your credit card information into the App Clip was less than ideal. This experience had to be easier than using a credit card.

Removing steps

To simplify the account creation process for new rewards+ members, I used Sign in with Apple. This removed five steps from the experience we currently had in the full app, and helped to boost new member enrollments by up to 36%.

Smooth transition

I wanted an easy way for new rewards+ members to move from the App Clip into the full app, this is where the magic of the authentication services API came in. This gets them into the full app with one tap since they’re already authenticated with Sign in with Apple — skipping the sign-in screen.

Lightweight

To ensure quick load times of these contextual experiences, Apple set a 10mb size limit for App Clips. Together with the dev team, we squeezed ours down to 4mb by optimizing code, compressing images, and removing unnecessary font weights.

Rethink fueling

App Clips force you look at your current full app experience through a different lens. You need to be very intentional about what’s included in the App Clip. For example, purchasing a car wash wasn’t included because it became too complicated to implement, and got in the way of the main goal — filling up.

Fueled by iteration.

As with all projects, there were lots of ideas that were discussed and explored before landing on the final design. Fun fact, this project started out with Apple approaching ExxonMobil to do web-based NFC payment pilot, but then the pandemic happened and people were stuck at home, not driving their cars. Not all was lost though, these early explorations helped to inform my design as we transitioned into the native App Clip experience we know today.

App Clip design explorations
App Clip design explorations
App Clip design explorations

Designing the App Clip Code sticker.

Coming up with the right call-to-action was a critical part of designing the App Clip Code sticker. Together with Apple, I explored numerous combinations and visual treatments of wake, tap, hold, and scan before landing on the final design.

App Clip Code
App Clip Code
App Clip Code

Size matters.

We did internal testing on different sized NFC tags to understand the pros and cons — and to simply get a better understanding of them. I found that the iPhone would read the 2” tags significantly faster since they inherently create a larger target to hit.

Another discovery was that we had to use NFC tags with ferrite backing (which cost substantially more) to reduce Interference with internal mechanical elements inside the fuel pump. All these insights helped guide our discussions regarding usability and budget trade-offs.

NFC tags
NFC tags
NFC tags

Taking it for a test drive.

Once I had a few designs in a good place, it was time to test. I tried these on ten participants to see if they understood how to use their iPhone with the hold, tap, and scan calls-to-action. Here are a few key moments.

What am I doing wrong? I’m holding it here, but it’s not working."

"

Gaither, Engineer

User testing - NFC

"

What am I doing wrong? I’m holding it here, but it’s not working."

Gaither, Engineer

User testing - NFC

What am I doing wrong? I’m holding it here, but it’s not working."

"

Gaither, Engineer

User testing - NFC

I wouldn’t want to touch my phone to that. I’d try scanning it instead."

"

Melanie, School Teacher

User testing - app clip code scan

"

I wouldn’t want to touch my phone to that. I’d try scanning it instead."

Melanie, School Teacher

User testing - app clip code scan

I wouldn’t want to touch my phone to that. I’d try scanning it instead."

"

Melanie, School Teacher

User testing - app clip code scan

Cool, this is just like using Apple Pay."

"

Mauricio, Photographer

User testing - Apple Pay

"

Cool, this is just like using Apple Pay."

Mauricio, Photographer

User testing - Apple Pay

Cool, this is just like using Apple Pay."

"

Mauricio, Photographer

User testing - Apple Pay

What did I learn?

idk emoji

Uncertainty

Most people didn’t understand how to hold their iPhone to the sticker. However, they did appear to grasp the concepts of tap and scan.

target emoji

Bigger is better

Larger 2" NFC tags performed much better by giving people a bigger target to hit. This helped take guesswork out of where to hold or tap their iPhone.

barf emoji

Ew, gross

Some people didn’t want to touch their iPhone to the sticker — or anywhere on a fuel pump for that matter. They would try scanning the code instead.

Winner by split decision.

Winner by split decision.

Hold iPhone here to pay

Scan usage

NFC usage

Final design

For the call-to-action, the ExxonMobil team preferred using "tap" based on my testing results and our internal reviews. Although, Apple felt it was best to use "hold" since that word is already being used with Apple Pay.

For the sticker design, I used a red code on a white background due to it's high contrast ratio. The iPhone camera encountered issues when trying to scan a white code on a red background.

Hold iPhone here to pay

Final design

NFC usage

Scan usage

For the call-to-action, the ExxonMobil team preferred using "tap" based on my testing results and our internal reviews. Although, Apple felt it was best to use "hold" since that word is already being used with Apple Pay.

For the sticker design, I used a red code on a white background due to it's high contrast ratio. The iPhone camera encountered issues when trying to scan a white code on a red background.

Driving awareness.

To increase awareness around App Clip Codes, we ran targeted ads on social media that focused on where to find them, and how to use them for fuel payment. I led the design direction and execution on this, working closely with the Product Marketing and Wallet Teams at Apple.

Waze zero-speed takeover
Waze zero-speed takeover
Waze zero-speed takeover

Twitter

Twitter

16% higher

16% higher

16% higher

engagement rate*

engagement rate*

I created two versions of this ad to A/B test on Twitter, one with motion and one static. I thought is was a no-brainer that the motion version would get more engagement, but to my surprise, they performed about the same.

Version A

Version A

App Clip social media ad
App Clip social media ad
App Clip social media ad

Version B

Version B

Waze

Waze

56% higher

56% higher

56% higher

engagement rate*

engagement rate*

This zero-speed takeover Waze ad proved to be highly effective due to its contextual nature. It's shown when your car comes to a stop, and goes away once you start moving again. Because of this, the messaging had to be clear and concise, like a freeway billboard ad — what it is, what can it do for me, and where can I find out more?

Zero-Speed Takover Waze Ad
Zero-Speed Takover Waze Ad

*higher engagement rate than the benchmark set for the campaign

*higher engagement rate than the benchmark set for the campaign

Celebrate emoji
Celebrate emoji

Thanks for lookin'!