Tap on Phone

Tap on Phone was the startup's 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 using the NFC technology in smart phones. 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 receips to customers.

The goal of the company was to selliaon to banks as a service, this design is a 'blank label' design so the app could be dressed with the colors and logos of the bank. I worked on dressing up V2 and V3 in oter bank colors 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.

This is Version 1:

Main screen of the app is the payment terminal. This has a box to type in the amount an a number keyboard.

Succesful payment screen. It shows the paid amount in Costa Rica colons and the item sold (a black coffee). 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. 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.

This version of the app was sold to a Latin American Bank with some adjustments. Mainly in color and branding.

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, like dark mode.

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 used the camera to scan a product IRL (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. Important changes for this version was 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 is Version 3

Log in screen

Payment terminal screen. Tabs for CRC and USD

Payment screen.

Transaction history

Product list.

Product scanner.