Project Overview
Make user’s phone one stop solution for all payments on slice app. UPI transactions and Online card transactions can already done using phone. The idea is to capture card transactions on POS terminals via users phone.
My Role
Entire product design from research to conception, visualization and prototyping.
Problem

One big problem which almost everyone has faced would be not having a card when you need it the most to make some payment. Carrying a physical card whenever you need to make a transaction on POS (point of sale) machine is a task.

Another problem specifically with slice card is users have to wait for their physical cards to arrive before they start making transactions in offline channel.
What is tap & pay?

Tap & pay is basically when you open any tap & pay app with your cards added on it and just take it near POS (point of sale) machine and voila! payment is done without you entering any details or interacting with any CTAs (there is a certain transaction limit, after which user is asked to enter some authentication).

Tap & pay uses near field communication (which is basically what we call NFC) which is a short range wireless technology that makes secure payments between a contactless chip card present in payment-enabled devices and a contactless-enabled checkout terminal. Also, when I say secure payments, I mean it replaces the actual card details with a unique code called the “token” which is stored on the device and is used for all transactions. Hence the name device tokenization.
Competitive Analysis

We started out with looking for application that support tap & pay feature and tried to analyse their flow to find out about any gaps that might be in the market currently and also to get an idea about what users expectations would look like.

We found three popular apps - Gpay, Samsung Pay and Paytm that had this feature and tried to study them.
Success Metrics

Before diving into the project ideation, let's take some time to define the success metrics we will use to validate the project. Now, success metrics can be qualitative and quantitative both, but here we will be mentioning the quantitative metrics and soon about qualitative.

Since this project will be more about user growth, satisfaction and business our success metrics will also revolve around those.
Use Cases and Tasks

After having a decent idea from our competitors we started with figuring out the use cases and task flow for each use case, along with breaking them down in different high level tasks.

These tasks will further take us one step closer to laying out the flow charts.
Flow charts

To create flow charts we created a user segments based on the card user might be tokenising along with what type of user it would be (such as new user, existing user etc). The user segments we ended up having were :
1. New user, tokenise slice card
2. Existing user, tokenise slice card
3. Any user, tokenise other VISA card

These segmentations were done keeping in mind the discovery of feature would be different for New user and Existing user. Hence, to cover a wider flow within the app we created such segmentations.
Sketches

Having flow charts in place, we took a step further and started creating sketches. We had multiple rounds of those before moving on to wireframes.
Sharing one such set of sketches below.
Wireframes

Now came the brainstorming of wireframes, we created multiple iterations of each screen trying to exhaustively finding out all the options and having the "why" word in mind while placing any component in the screen. I have tried to put few wireframe iterations below along with their Pros & Cons, and Decisions & Trade offs, if any.
Designs

After multiple rounds of wireframe and user interface iterations, we finalised below designs. This is just a part of prototype to give idea of final designs, but the interactions, illustrations, and microcopy is still not final in here. It has to go through respective teams before freezing the designs.

You can view the final designs on below link -
Contactless Payment figma file