This past September, Apple launched a series of new iPhones that, among other, flashier features, included a small but crucial update that went virtually unnoticed. That is, the ability to read NFC (Near Field Communication) from the home screen without the need of a third party app.

Let’s back up — what is NFC technology? Near-field Communication (NFC) is a method of wireless data transfer that enables technology to communicate with each other without the need of an internet connection. Once an NFC tag (which can take the form of stickers, labels or inlays) is activated by another chip, short strings of information between the two enabled devices can be transferred when held a few centimeters from each other.

Though NFC has been available on Android devices since 2012, Apple has been slower to roll out its capabilities out to their users, only offering NFC functionalities that were locked to Apple Pay until very recently. Now, the rapid growth of devices that have the ability to read NFC tags from the home screen bring us the opportunity for making applications of NFC technology beyond contactless payments even more mainstream, with possibilities of entering new markets like embedded multi-channel experiences, security and authentication, and tap-to-pair Bluetooth devices.

You might have seen NFC tech in action without even realizing it. The Cooper Hewitt Pen uses NFC tags to read information embedded in the object labels, inviting visitors to engage with the museum’s collections on a whole new level. You can also use Apple Watch to pair to gym equipment through NFC to gain access to your workout statistics.

As NFC enters the mainstream, how can designers address the challenges of designing for a system that largely works under the hood? Can we create an agnostic and distinctive design language that helps make NFC technology effective and useful for people?

The team at Fuzz has been working on an embedded experience involving NFC technology, and encountered five key issues through our exploration:

1. Users are uncertain about the gesture: Though all of the language for NFC interactions centers around the word “Tap”, physically interacting with the NFC tag isn’t necessary — you just need to hover your device close enough to the tag to connect. People also did not immediately realize that “Tap here” meant tapping with their phone. Some folks even tapped the sign with their finger!
2. Users are confused about how the technology works: People weren’t certain if they needed to open the app before tapping to read the NFC tag. We were using an iPhone XS, which meant the app could launch from the home screen, but not everyone knew that.
3. Users encounter technical challenges: Sometimes it would take folks a couple of tries to launch the app successfully. This is generally normal, even with everything working perfectly.
4. There are usability differences between iOS and Android devices: We were building our prototype for iOS devices, where the chip is located at the top of the device. Android phones, on the other hand, are located in the center of the device. Was it possible to create a solution that can work equally well for both iOS and Android devices?
5. Most iOS users are only familiar with Apple Pay: Consumers have limited knowledge of how to use NFC tags beyond Apple Pay. Even though Apple has now made it easier than ever to utilize a wider range of NFC capabilities, most users do not realize that the same way they already use Apple Pay is same way they can interact with other NFC readers, leading to their confusion about how to use them. There is no consistent or universally recognized design system for NFC capabilities — an issues that becomes even more salient in observing how most of our users knew how to use Apple Pay but were uncertain about how to interact with the NFC card with their device.

We isolated each issue and brainstormed solutions for each one in order to encourage the biggest volume of creative ideas we could draw from. The key here was putting all ideas on paper, no matter how messy or unrealistic they were.

After compiling a lot of sketches, we went through each one and narrowed them down by asking ourselves if our solutions had addressed the following usability and technical issues:

• Can it work for both iOS and Android devices?
• Does it cut down on the number of tries it might take a user to launch the application?
• Does it help people who have trouble scanning?
• Does it provide a clear brand identity?
• Can it work for multiple NFC applications and use cases?
• Does it communicate the gesture to interact with NFC readers?
• Can it be used by people with varying levels of digital literacy?

The ones that made the cut met at least several of these criteria, and were then refined to gain a better understanding of how they might work.

We’re showing each sketch with the refined solution organized by the specific usability challenge they address.

Users are uncertain about the gesture

Initial sketches

1. Icon of a hand holding a phone towards a dotted line with the phrase “Meet phone here”
2. Icon of a phone with radar and the word “Scan”
3. Phone with arrow pointing towards a horizontal line
4. 3D label with an indentation shaped like a horizontal bar that users push their phone into
5. NFC card reader dock for your phone
6. Another version of the dock that the user places their phones into
7. Mobile game: Users has to match their phone to a target to launch app

Refined

1. Label design: A hand holds a phone pointed towards a dotted line with the phrase “Meet phone here”
2. Label design: Perspective phone icon with arrow pointing towards a horizontal line
3. 3D label with an indentation shaped like a horizontal bar that users push their phone into

Users are confused about how the technology works

Initial sketches

Refined

1. Resource for users: If users are having trouble launching the app through the NFC reader, tapping on a pill in the app brings users to an NFC support page breaking down the steps to launch the app based on their iPhone model. Depending on the user’s OS, they would see a different version of a visualization of the steps it would take for them to launch the app — older iOS phones would require them to tap a button before scanning, whereas newer iOS devices would not.
2. Label with messaging that invites users to try scanning, and if it doesn’t work or they don’t have the right iPhone model, to download the app

Users encounter technical challenges

1. Person-to-person: There is a human who shows people how to use NFC
2. In-app game that shows you how to get to content

1. Instead of the word “Tap”, inviting users to move their phone around as part of the process of launching the app
2. Alternate messaging: “Not Working? Try angling your phone up and down until the app launches”

Refined

1. Design with caption prompting user to continuously move their phone around as part of the scanning process
2. Design with caption instructing users to try angling their phone around if app doesn’t launch

There are usability differences between iOS and Android devices

Initial sketch

1. A dot matrix in the shape of a standard phone, with filled in dots to show where the NFC chip lies in both iOS and Android devices so people know where to tap
2. A hot-spot map that shows the location and range of the NFC chip on iOS and Android
3. Training game based on whether you have a iOS or Android device
4. 3D-printed phone cases with 3D marks on it that indicate where the chip is in the phone, depending on where you have a iOS or Android device

Refined

1. Device-shaped physical or digital maps that communicate where the NFC chip lies in iOS and Android devices to help people know where to tap.
2. A hot-spot map that indicates the location and range of the NFC chip on iOS and Android

Most iOS users are only familiar with Apple Pay

Initial sketches

Refined

1. Brand update: Modifying the existing Apple Pay icons and logos so we can accommodate more NFC use cases and better represent how it works from a usability standpoint
2. Branding system for multiple applications: Looking at language and mark from a branding perspective, with a different verb depending on the NFC application

---

Integrated solution

Looking at the ideas at a whole, we were able to recognize some emerging patterns. There wasn’t one single solution that addressed all of the issues we outlined above — which didn’t come as a surprise when it came to designing for a largely invisible technology, especially one that didn’t have an existing brand identity. But with our volume of concepts, we had enough to combine them into a comprehensive system.

In organizing them into a matrix, we determined that combining two or more of these concept was the best solution, with a 360º approach that involves any combination of the environment, digital, and physical solutions. Depending on the application, of which there are many, a successfully design-driven NFC solution involves multiple mediums, mixed and matched to accommodate the unique contours of any project — from digital solutions to physical objects to modular branding systems.

---

More and more devices have full NFC capabilities, giving designers the chance to utilize it for an endless array of creative applications. The current design landscape for NFC technology is underdeveloped; with no consistent visual language, the few NFC-specific icons that are in use are either inconsistently designed, ill-suited for a wide variety of applications, or do not communicate NFC functionality and behavior. We have the opportunity to look at NFC from a design and usability perspective, and intervene with better solutions to what’s already out there.