Kotak Net Banking. How we worked with a large bank to design an internet banking platform from scratch.

Customers often have several kinds of accounts, like deposit accounts, credit accounts, investment accounts, etc. By deeply researching the important needs of the users, we could rethink our net banking dashboard in new ways. We created a mechanism in the banking dashboard to provide a useful and usable banking user experience for multiple accounts so that the activity in all accounts would be easy to review, monitor and manage.

It was important for users to also adopt the digital platform with ease, so we created an onboarding experience that helped familiarise the user with the new online banking journey while showing them personalised actions and laying out the standout features. This ensured users can use the new banking experience without any human error, resulting in a superior experience across the site.

In another example, a financial status overview was the first thing we showed users after logging in as a tactic. There were many possible login scenarios for all our personas and we had to account for all permutations with unique, personalised designs e.g. where the user has multiple accounts and/or manages accounts with other people.

Our User experience research (UXR) dictated that the need to see the status and overall balance of each account was paramount here. As a result, our new design offers a convenient way to see all your accounts and key details in one view, while the 'recent transaction' widget makes it easy to evaluate money movement in each account.

We had a feeling based on the laws of grouping from Gestalt psychology that understanding and exploiting the abilities of the human visual system is an important part of the design of usable user interfaces (Rosenholtz et al., 2009). Accordingly, we categorized required and correlated information and grouped them for ease of use.

To enable customers to pay routine bills effortlessly, our online banking design offers the ‘upcoming payment’ widget as a solution. Our goal was to spotlight key actions the user needs to take and preserve a minimal visual density to ensure ease of use.

We knew that theoretically, people trust AI more when they feel it provides personalised content, otherwise they think their uniqueness is being neglected. (Longoni et al., 2019).

Another example of how we embedded our personalisation approach was through Kotak bank’s integrated messaging. This includes advice and tips that improve the user’s financial status to further cater to their independent needs. Personalised recommendations are created by banking AI using intelligent predictive analytics.

These recommendations included anything that would help enhance and embrace the user's financial life, for example:

Another important pain point our UXR brought to light was that users simply want to see how much withdrawable money they currently have. We created a human-centric mechanism for this by giving users the option to view their detailed closing balance without the lien amount. We further mention the ‘cheques in clearing’ amount for the user to have complete clarity of the withdrawable amount.

A sense of control is like an inherent reward which activates the same brain areas as a reward (Leotti and Delgado, 2011). When it comes to managing and updating the basic settings of a user's account, card or security settings in the new Kotak Net Banking experience, we created the control centre for the user to easily view and update some basic details. This tactic contributed well to our core tenets of delivering a useful system.

Humans are cognitive misers. We love taking shortcuts. This inspired us to add quick links to frequent tasks on the dashboard. This makes tasks like downloading an e-statement a breeze (Stanovich, 2018).

To help users feel more confident about managing their money through online banking, we designed solutions to assure users that their accounts are safe with Kotak. For instance, during an unexpected situation like the loss of a card, users are worried about the misuse of their card. During such times the users need to take immediate actions to prevent any fraud. BOMBAYDC, along with Team Kotak devised the plan to build the 'emergency' tool that puts together all actions a user may need to take, in an easily accessible place with a simple two-step process.

Bank customers have historically reported a lack of clarity and assurance. Our dashboard is designed to be transparent and personalised, prompting users the right information and support at the right time. Our thoughtfully designed UX makes use of empathy and always keeps the user in the loop about the status of their actions. Design should always show what stage a user is at by providing consistent and timely feedback, and that too, crisply and clearly.

Instead of focusing on features and visual design solely, we focused on the goals that real users want to accomplish on a banking site and the challenges they face while doing so. Leaving visual design for a later stage, we made sure our interface was efficient and effective first. Some of the information design tactics we deployed are as follows:

Various principles were kept in mind while designing the interface, for example, we used the Hicks-Hyman law to reduce the number of choices offered which helps in reducing the time to make a decision, and optimised texts for easy scanning by choosing a suitable layout and formatting content and minimised interstitial anxiety by eliminating experience delays. We expected these changes would help users reach their goals faster, make them anxiety-free, educate, build trust and so on.

Users had questions about their account details, their card usage and other related activities. The data from their queries was used as a framework to analyse and inform our content which made it more relevant for the users. For instance, for a Savings Account details page, all the account details, recent transactions and services related to the account were arranged and placed on the page effectively so that the user does not have to look for this information separately.

We created a page from which the user has all profile related information in one place to manage and update with ease. There, customers can effortlessly edit their details, add contact details and upload documents.

The other key piece of the puzzle was the architecture. We needed cognitive alignment of the architecture to be in perfect orchestration with the user.

Analysis of customers revealed behavioural patterns and opportunities for us to create an interaction model for efficiency. The dilemma we faced is the difference between the user's mental model and the designer's mental model. If an interface is designed as per the user's mental model, it helps them intuitively navigate the interface as users form these internal mental models while interacting with the environment and with others around them (Xie et al., 2017).The main banking dashboard design concept we delivered is easy to understand. We adhered to user requirements and integrated this into an architecture such that the user can achieve their goals with maximum ease.

The new net banking experience allows them to intuitively navigate and take the necessary actions. For e.g., we learned that some users expect Demat Account to be under ‘accounts’ in the menu and some expect it to be under ‘investments’ as well. So we placed it under both!

Allowing millions of daily active users to comfortably find, browse and skip choices in the menu, we designed the navigation menu such that it properly arranges and progressively discloses the products directly from the menu. For example, the left-hand side menu clearly distinguishes between the ‘products’ and ‘services’ the bank offers. The secondary menu of accounts yields all the accounts the user can have. This simplified flow and architecture enhanced the HCD.

New users find useful information faster because it is laid out as per relevance and accuracy, in response to the user's actions. Here a temporal-serial model was considered which suggests, that when time is limited, the observer can process only some amount of information of the whole array of information. If the target information is among the captured information in a target-present display, a correct decision is more likely to be made. Hence aligning information as per relevance and accuracy is important (Bergen and Julesz, 1983). We employed an information architecture that was informed by user data to help navigate the whole system more competently.

Based on the principle of functionality before form, we decided to expose our usefulness and usability before the form. But as both need to work well together, we pre-planned the approach to fuse them. By looking at the UX from the perspectives of customer needs, a simplified architecture, and the information design, we had the essentials to plan the visual strategy. Tactics we deployed are as follows:

We pre-planned the new web app with a clean, simple design with a variety of cross selling product formats that are subtly placed within the user journey. All the pop up blockers and advertisements which distract the user and obstruct the flow were removed, resulting in a synergy of UX and UI.

By applying an atomic design methodology from the get-go, we built a consistent, flexible system which, in the future, will help Kotak’s internal team create custom page layouts to introduce new products. This helps maintain our design philosophy in a scalable, replicable manner.

As an integral piece of creating a unified design system, we took a digital-first banking approach for Kotak and to provide a consistent and cohesive experience to the user, we established a new, digital-first tone of voice with dynamic writing guidelines.

This was an important approach to unifying UX and UI. Furthermore, as users navigated the new dashboard, new lightweight illustrations added an element of subtle delight on every page. This included a limited grey range colour palette, mostly starting from simple light greys and a contrasting but small amount of accenting with Kotak’s red. This mostly pure and minimal direction complemented our approach with the system’s overall usability.

With over 1700 branches across 28 states delivering a superior experience to over 32.7 million customers, our net-banking implementation has touched the lives of many.

It was an exciting challenge to have Kotak, a trailblazer in digital innovation, as a client. We brought their value proposition to life and setting a new standard, we have designed innovative digital solutions by looking through multiple lenses. As a consequence, we also went head to head with the wider digital banking landscape among users and banks. We helped Kotak maintain its edge in the competitive landscape. We are proud contributors to this decade of digital development in the banking industry and have aided India’s efforts to be on par with global standards of banking digitalisation.

We saw a significant decrease in complaints toward Kotak after our deployment and also helped contribute to Kotak's successful growth through increased customer satisfaction. In the end, we were happy for the opportunity to design for a new India.

Our ultimate goal here at BOMBAYDC is to harness design for national development while pursuing arts and technology. If you would like to learn more about how we innovate, contact us today.