Pay for fuel in seconds with this streamlined version of the Exxon Mobil Rewards+ app.
What are App Clips and App Clip Codes?
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.
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.
Designing the best fueling experience.
Dig into the details.
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.
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.
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.
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 did I learn?
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.
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.
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.
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.
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.
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?
