Case Study: Tapmap

Providing users a single source to find all businesses that accept mobile payments

Overview

Using a phone as a contactless payment method is something that has seen rapid growth over the last several years with services like Apple Pay, Google Pay and others. More and more companies are starting to adopt contactless readers than ever before but there’s still a disconnect between the companies who support this feature and the consumer trying to find them. Tapmap is an application designed to connect consumers looking to use mobile payment with the companies that accept it.


The Problem

Services like Apple Pay, with its ease of use and the security it offers, is fantastic way to make a purchase. Finding places where you can use it — not so much. When Apple Pay was first announced, the acceptance rate was in the single digits. A recent article posted on Apple Insider stated “Apple Pay availability was limited to about 3 percent of stores in the U.S. when it launched in 2014, but is now accepted in 50 percent of stores.” Although 50% is a lot of stores, it can still be difficult to track down exactly which ones accept it.

Results from searching the term “Apple Pay” in Apple Maps (left) and on Yelp (right).
Both applications populate businesses that accept Apple Pay, however, only a couple of these locations are shown across both apps.

Solution

Tapmap aims to solve two main problems — data accuracy of supported businesses and the ability to sort and filter search results. The application provides a way to view any and all locations that support mobile payments (specifically Apple Pay during the applications initial deployment) and gives users the ability to sort and filter results based on several options to find exactly what one might be looking for. Tapmap also allows users to link current reward programs right within the app, that way, when you make a purchase by using the app your rewards points are automatically linked so you don’t have to use multiple apps when paying for something.

Figma prototype

Process

My role for this project was UX/UI Designer for the creation of Tapmap. This consisted of designing and maintaining all assets for the application including branding guidelines, logo design, wireframing and full screen mockups with prototypes. Surveys and user tests were conducted to ensure the user flows made sense and everything in the design was meaningful to the user.

UX Research

User surveys, user personas, user stories, user flows, competitive analysis, user testing

UI Design

Branding, logo design, sketches, wireframing, mockups, prototyping


Survey Results

Key points

  1. 93% of respondents reported that they had mobile payment set up or at least knew that their mobile device offered this feature.
  2. 26% stated they have put it to use when making a purchase anywhere from just once before to using it as often as possible.
  3. 53% said they felt that mobile payments is not supported enough among businesses. Less than 7% said that felt that it’s widely supported.
  4. 40% said they would use mobile payment as their primary form of payment if every business accepted it.

After interviewing a few individuals following the survey results, it was unanimous that no one was confident how they would search to see what places accept Apple Pay. Regarding the acceptance of Apple Pay, one of the individuals said they think the percentage is around 50% while the other two said 5% and 10%.

When asking some questions about what the individual would do given a scenario where they had forgotten their wallet at home but needed to buy something to eat while they were out, each said they were not very certain about how to go about finding a location that accepts Apple Pay. One said they assumed there is a way to view this information through one of the default Apple applications, another said they would look for one of the locations they know from past experience that accepts it, and the other said they would look up information on Yelp but was not sure if the data would be reliable.

All of the individuals during the interview questions said they were frustrated about the process to find locations that accept the payment method and would like a way to better find this information.

Full survey analysis

User Personas

User Stories

User Flows

Onboarding
Search Nearby
Payment Process

Competitive Analysis

Apple Maps

Currently, if you open Apple Maps, users have the ability to search “Apple Pay” in the nearby area. Not only is there no way to refine the results that populate (i.e., filter for just restaurants), the data isn’t quite accurate and some locations that in fact do accept Apple Pay are not displayed.

Yelp

Within Yelp, you can essentially perform the same search “accepts Apple Pay” either nearby or in a specific location. But the same issue of data accuracy and inability to filter arises. Moreover, the results displayed are different than that of what Apple Maps shows leading to even more confusion.

Link to full competitive analysis

Branding

Name & Logo

Color Palette

Typography

UI Components

Wireframe Sketches

Hi-Fi Wireframes

Mockups

Figma prototype

User Testing

After completing the design for Tapmap, feedback given was mainly around two of the screens within the prototype.

One of these screens (below) was the layout of the results when in the list view. Initially, users were saying it was hard to read some of the information due to the design. Later in a preference test, users ended up choosing the newer version as they felt it was easier to scan and provided a cleaner look.

Initial design (left), revised design (right)

Another preference test was conducted on the subcategory layout where users stated that it didn’t seem to align with the rest of the app as far as the style. After the test, I ended up combining a couple different, newer versions to create a more uniform design and provide adequate space for options with a lot of subcategories.

Initial design (left), revised design (right)

Conclusion

Designing Tapmap took roughly 3 months to complete with putting in about 16 hours per week into the project. From the UI/UX standpoint, many of the elements from the mockups remained the same with a few aspects changing after some user research and testing. The user testing confirmed my initial thoughts of people not knowing the best source of finding out what businesses accept mobile payments or not.

On a personal level, I find this very frustrating, especially during times when I’ve forgotten my wallet in the car or at home. Regarding the business model, I am curious how well Tapmap will do at generating revenue and retaining its user base. This and the rewards system, depending on how it initially performs, may eventually need some tweaking to ensure that the business remains profitable. Mobile payments are still relatively new but the adoption pace is picking up and Tapmap is the perfect way to bridge the gap of finding these businesses.