Making payments exciting for India
Consulting Lead Designer • 2018
When you log into your net banking interface and make payments for your bills, you're using the embedded software that's built by Asia's first payments company that brought bill payments online by building a network of billers in India when the internet had just entered India. This is the story of its rebrand and redesign. We call it the Payments Desk.
Making the boring exciting
Bills are boring. We post-pone them till the last minute.
The interface of the Payments Desk appears embedded inside India's leading banks' interfaces. Bank interfaces tend to be 'boring' and very mechanically designed so we wanted this to refresh and surprise the users, and, compel them to come back often to setup all their bill payments using this interface. To achieve this, of course we improved the interface functionally, but also revamped the softer aspects as well.
To achieve the goal of forming a renewed relationship with millions of existing Indians, we employed the broad visual strategy of combining emotive, bold and abstract illustrations with bold typography.
Personification of exciting tech
An additional element that we brought into the UI was to personify the Payments Desk in the form of an agent or an assistant that would take care of your billing (and take away your worries) through automation.
Thus was created 'Robill' - your assistant for all things bills.
All the tiniest of concerns with bills - due dates, missing out on them, tracking payments, automating payments (with your permission and customisations, of course), logging complaints, managing billers, etc. Robill is the 'bot' that will manage everything once you give it the instruction to.
Making the dinosaurs extinct
The idea behind payments desk was to remove the friction in making bill payments. So, most actions needed either needed only a one-time input from the user, once automated.
A Unique & Special Interface
The intention with the design of Payments Desk was to make it stand apart from all the other payment platforms. 2 reasons behind this: there are quite a few players in the market and their offerings are similar, and they tend to look similar with the use of line iconography.
The screen for the user who lands for the first time
All my bills in one place
When the user has made a bill payment, the biller gets added to the 'My Billers' section and is now available on the home screen. That makes access to all possibilities of bill payments dead-simple.
Mobile-first keeps it simple
The design of all the screens was approached from a mobile-first point-of-view which constrained the design to a maximum of 2-column in layout.
A list of possible billers when the user chooses a category of payments.
On choosing the biller, the user specifies the billing number and a Nickname so that this biller will get saved
On succesful verification, the bill is presented for the user to view, verify & make pay
Bill paid successfully. Robill appears at the bottom to ask if the user would like to automate this payment from next time.
A payment has failed with reason shown and the user can either retry payment or raise a complaint
The user chose to add the biller for autopay and it's added now. Screen above shows an acknowledgement.
A payment is scheduled to be auto-paid from the next time
Empty state illustration for a screen that doesn't have any payments made yet
Customisability for B2B customers of BillDesk
The Payments Desk will be embedded in the banking interface of various banks and therefore it needed to be modularised and the possible visual modifications to the attributes be spelt out clearly so that the banks may make or request a customisation based on their visual language. Below is a guide that was created for the customisation of the attributes, to the different parts of the payments desk.
Shown above is an example deployment of the Payment Desk inside of HDFC Bank Net Banking ecosystem