This repo consists of a brief case study and assets for the design of Tapmap. Below you can find links to the full prototype and brand guidelines along with a working prototype built in HTML and CSS to provide a general understanding of how the application will work.
Full case study available on my website.
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.
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.
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.
My role 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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent