Tap on Phone

Project Background

Importing hardware to receive contactless payments is expensive in Latin America. The cost of renting a payment terminal when including the cost of affiliation canb add up to an investment of over two hundred dollar. In Costa Rica, and other countries in Latin America, this could average half the monthly salary of an individual. These costs create a barrier for smaller business to transition into offering contactless transactions and become cashless.
‍
Smartphone adoption is widespread in Latin America, even those with NFC technology, which allows the processing of contactless payments. At the time when we created this product, it was the first one of its kind in Latin America and one of few ones available in the world.

Tap on Phone was Symbiotic's (the startup I worked at) flagship application.

The idea behind this app was to provide an easy way for businesses to receive card payments directly on their phone without the use of a payment terminal, or any other additional hardware, using the NFC technology in smartphones. Effectively transforming the phone into a payment terminal itself.

The main functions of this app were: receiving payments, saving products so the user could add them up to a total, typing an amount to pay, checking history, viewing monthly sales graphs, and emailing receipts to customers.

The goal of the company was to license the use of this software to banks as a service, this design is a 'white label' design so the app could be branded with the colors and logos of the bank.

I worked on branding all 3 versions of the app in other bank's brandings so the owner could pitch the app to his potential customers with something that already look theirs.

I based off my first redesign of the first version (V0) that a freelance designer worked on. I worked directly on the UI. For each version I received feedback from the owner and the developers in the team.

My Role

• I was the only designer for this project. This meant that all aesthetic decisions were made by me. I worked from wireframes that the CEO, the developers and I would brainstorm together on paper and I would translate these into digital mockups.
• I worked all redesigns of this project. Totaling 3 redesigns. I also created the branded versions that were pitched to banks in order to sell them the product.

Challenges

• Our main audience were small and micro business owners, many of which had low tech education. We had to ensure the user interface was very simple to use, accessible and make it feel trustworthy.
• We had strict branding and security requirements from Visa and Mastercard to get the application certified and be able to offer clients the ability to receive Visa and Mastercard cards.
• Multiple re-designs. Throughout my time at the company, I worked on multiple re-redesigns for the app. As the company evolved and expanded, so did the branding, which required me to adapt the look and feel to the new voice of the company.

Goals

The following screens were the first version (V1) of the app. I worked on these partly from wireframes worked in collaboration with the CEO and developers, and part from a version a previous designer had created.

This version of the app was sold to a Latin American Bank, and adjusted to their branding.

The main screen of the app is the payment terminal. This has a box to type in the amount and a number keyboard.

Successful payment screen. It shows the paid amount in Costa Rica colons and the item sold (a black coffee). The button takes you to the invoice screen.

Product list screen. It has a list of products added by the user. It shows each product name and price.

This mockup is for adding new products. It has a field to add a picture of the product and fields for name and price. The button is for saving

Invoice screen. It shows card information which is censored, an approval code (generated by the app upon acceptiong the payment), payment method and date. This also shows the amount paid and has fields to add the client information so the user can email them the invoice.  

Drawer menu. It has the payment terminal, sales, add product, invoices, test connection, tutorials and log out option.

Later on this version was refined a a little bit to more closely follow standard Android app design at the time. I referenced materialdesign.io for this version. Also a new technology to scan producs was added to this one.

For this version the owner wanted a 'cooler' look and feel, so the app was redesign into dark mode. We lost a bit of the approachable feel the previous version had with this one.

This is Version 2.

Splash screen with logo.

Payment terminal screen. This time it has tabs for CRC or costarican colons and USD.

This mockup shows up when the payment happens, meaning the client is tapping their card to the users phone.

Product list. this time it includes a button at the bottom of the screen to add new products.

This was a new feature of this version. It uses the camera to scan a product in real life (previously added by the user) to add it to the cart.

Transaction history screen.

The app went through a 3rd redesign, this time looking for a 'fresh' look and to make it friendly again. Important changes for this version were the return to a light mode and changing the products display from a list to cards which were more on trend at the time.  This re-design was more of a recolor of the app.

This version shows the default contactless icon that is one of the requirements to get accredited by Visa and Mastercard.

This is Version 3

Log in screen

Payment terminal screen. Tabs for CRC and USD

Payment screen.

Transaction history

Product list.

Product scanner.

Project Outcomes

In retrospect, there are a lot of changes to make to a product like this one, specially as time passes and trends come and go. Working on multiple re-designs in relatively short period of time, which many people would find frustrating, was a reflection of how the business was growing and changing, so ultimately it was a positive change.