Making bill payments for India
more exciting and fun
Redesign of India's most-used invisible payments portal
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 it's rebrand and redesign. We call it the Payments Desk.
Exciting & Fun
The interface of the Payments Desk was to appear 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, we worked with illustrations and bold typesetting.
Robill became the mascot for getting you through all your bill payment worries. All the tiniest of them - missing due dates, missing out on bills together, 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.
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 kept the design simple.
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.
Empty state illustration for a screen that doesn't have any payments made yet
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
Customisability for different customers
The Payments Desk will be embedded in the banking interface of various banks (names can't be disclosed) and therefore it needed to be modularised and the 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.
Here's a prototype!
Click-through the prototype to get a hang of the actual app's experience.
Please excuse mis-placed clickable areas - Marvel embed causes problems at times.
And here's a mobile prototype!
