Improving Digital Banking user experience case study: ING

The Friendliest Internet Banking in Romania

  • Design
  • Technology

Perceived by customers as the most innovative bank for its digital services, ING Bank decided in May 2010 to turning ING Home’Bank into the friendliest Internet banking solution on the Romanian market. This is the story of how better design and thoughtful implementation can increase online banking usage and make customers happy.

ING Home’Bank has been entirely designed and developed internally by ING Bank since it first launched in 2006, and it quickly became known as the easiest-to-use Internet banking platform on the Romanian market. This made a lot of young people to switch to ING Bank, helping the bank reaching one million customers in 2010.

ING HomeBank old

This success encouraged the Home’Bank team to add new functionalities to the app and release a new version (the so-called Home’Bank 2.0) in May 2010. The initial application (Home’Bank 1.0) remained accessible for users, in parallel with the new app. The plan was to slowly phase it out in the following months.

Houston, we have a problem

No one could foresee at that moment that very few users would switch to Home’Bank 2.0. It was somewhat unexplainable—the new app looked nicer, had a lot of new features and could satisfy more needs than the old one.

At the same time, the ING Bank management decided to look for a digital manager, a knowledgeable, experienced and result-focused person, to also manage the further development of ING Home’Bank. Ana-Maria Bogdan, formerly eBusiness Director with Kanal D (where she had incredible results with the redesign of the TV channel website), was soon brought to fill this position. One of her first initiatives (or let’s call them ‘bets’) was to ask us to get on board and help with Home’Bank.

“There is no elevator to success. You have to take the stairs.” (Zig Ziglar)

When we first started working with ING Bank, we had some experience of working with banks—OTP Bank, Banca Transilvania, Banca Comercială Feroviară, even some attempts with Alpha Bank—and developing various digital and branding solutions.

Still we felt we had to better understand the industry, the client team, internal politics and customers (we should have mentioned them first). We looked at bank customer profiles (mostly demographics and usage data) and talked to real Home’Bank users. We looked beyond numbers, and we found out later that they were some of the most digitally-educated customers, extremely willing to test new services and adapt to change.

Instead of solving our problem, this raised more brows. Why was switching from Home’Bank 1.0 to 2.0 so painful? Why was a good product rejected?

At Ziglar’s inducement, we started taking the stairs. Step by step!

Our friend Pareto

Our client’s objective was clear. The new ING Home’Bank had to become the friendliest Internet banking solution in Romania, but this seemed tough to achieve, given the recent findings. On top of those, there are many other reasons for why this objective is not easy to reach, from familiar ones (competition, resources) to some specific (technical infrastructure, code maintainability) and some unavoidable (technical constraints, security standards, legal banking-specific requirements, the strict IT policy of having a new release every three months, the impact of the changes on clients and customer care team etc).

It’s easy to make assumptions, especially when you’ve got some experience under your belt. Designer often resolve to changing logos, buttons or the overall design of a website or app, with little regard to implications beyond that.

We decided to go the 20/80 way—look at the 20% of the functionalities that were 80% of Home’Bank usage, and start from there. Design for us is less styling and more engineering, so we discussed first with the engineers to see how we can fit any changes in the existing roadmap, without disrupting the planned development. We did frequent workshops on each major flow (payments and reports) with the whole ING Bank team (product managers, software developers, digital specialists and customer care representatives) to fully understand and clarify business requirements, customer complaints, functional and technical specifications.

Then we decided to roll out incremental improvements, and monitor what happens. It was some sort of Lean UX approach, although nobody called it like that in 2010.

This can be often frustrating. It’s time consuming, you get a lot of feedback from product managers and business people, then you develop a prototype, it gets approved, only to find out later that somethings have to be adjusted due to roadmap changes or some technical limitations. But in the end this is a normal process (although few will admit it), and friction ensures that the agency and client team get to understand each other’s strengths and weaknesses and work together for the end goal—which is releasing an improved product version every three months.

Making online banking smooth

After two months of meetings, understanding business requirements, learning about people and limitations in workshops, learning about customers through qualitative research and transactional patterns, and exploring new design solutions, we started planning, designing and documenting changes. This process lasted for almost two years, and here’s a brief list of changes that we initiated:

We reorganized the navigation to adapt new functionalities being added with every release.
We reorganized the navigation to adapt new functionalities being added with every release.
Different new payment flows were merged into a single one (however, we had to keep foreign currency payments as a separate flow due to legal requirements; otherwise we would have had only one flow for any transaction).
Different new payment flows were merged into a single one (however, we had to keep foreign currency payments as a separate flow due to legal requirements; otherwise we would have had only one flow for any transaction).
Both payment and foreign exchange flows were simplified radically by reducing steps and unnecessary elements.
We standardized and reduced the number of user interface (UI) patterns to a minimum. This helped develop new functionalities using standard UI patterns which the user was familiarized with.
We standardized and reduced the number of user interface (UI) patterns to a minimum. This helped develop new functionalities using standard UI patterns which the user was familiarized with.
ING HomeBank card limits
We minimized the number of interactions required for the user in most flows.
Entry and exit pages to Home’Bank were redesigned to give users relevant information for them to make informed decision regarding their finances. The login page had to serve relevant information to both existing and new clients, while the logout page had a more promotional or selling objective.
Entry and exit pages to Home’Bank were redesigned to give users relevant information for them to make informed decision regarding their finances. The login page had to serve relevant information to both existing and new clients, while the logout page had a more promotional or selling objective.
ING HomeBank proposed error page
Besides design changes, we also rewrote content for transactional flows (eg. explanatory texts, tooltips or alerts). It’s often tough to find relevant names for labeling new or existing features, and you can even get creative when dealing with an error.

There are perfect designs, and there are finished designs

Designers know there’s always a better or smarter way to do things. Unfortunately time, or other sensitive factors are not on their side. We had countless proposals which would’ve probably improved Home’Bank usage in various ways (some of these proposals are shown below).

However, when you’re looking at implementing them in an already disruptive interface—combined with slow adoption rates, overloaded development teams, strict product release schedules and high complexity of code—you realize it’s not the most pragmatic approach.

ING HomeBank sidebar
ING HomeBank transaction report proposal

Simplify. Simplify. Simplify

This can be an obsessive mantra for designers. However, when you get to user interface development, this can be a life saver on the long run.

The initial Home’Bank 2.0 release had excessively used RichFaces, a framework that allows developers to create rich interactions in web applications. Unfortunately, the framework was not fully compatible with Google Chrome (at that time accounting for 30% of the Home’Bank usage), was difficult to maintain and decreased page performance.

Our development team jumped in to help and revise the HTML, CSS and JavaScript code, in order to improve the performance of the application. Many UI controls had to be rewritten to decrease loading speed and improve cross-browser compatibility.

ING HomeBank HTML code

To make sure everyone stays within the new, much simplified approach, our design and UI development team finalized ING Home’Bank’s first-ever style guide. This was a major deliverable for an UX project, but proved to be really valuable for ING Bank’s product team, enabling them to make various updates with minimum implication from the agency side.

ING HomeBank styleguide

The whole layout is based on a 16-column, 960px wide grid. The grid helps to break down information into clear content or functional blocks. Typographic hierarchy and icons help the user quickly prioritize information and find his way through an otherwise complex application.

Introducing innovation

Romanians not only love to have the latest mobile phones, but also do love to talk! It’s no wonder that one out of five own more than one mobile phone. Therefore, it was no surprise when ING Bank’s product management team asked us to design a user-friendly flow to allow customers to recharge telecom prepaid cards directly from their Internet banking application. The new feature became popular very quickly after launch (in three months), also due to support of targeted online campaigns.

We’ve also helped ING Bank introduce the first-time ever purchase of car insurance through Internet banking, by integrating it with major insurers in Romania. Although a simple interface form, the project raised countless technical challenges because of differences between insurer technical platforms, which lead to compromises in the user’s experience in order to comply with the security and technical restrictions.

“All our dreams can come true—if we have the courage to pursue them” (Walt Disney)

We took our chances and made a difference. We not only saw user adoption increase, but many of the people around us using ING Home’Bank were happier and more satisfied with it. The simple fact that your friends congratulate more for a job well done that made their life easier, often means more than any award or confirmation.

And finally, but not least important, ING Bank got user adoption and great financial outcomes. In April 2011, at the award ceremony of the Online Banking Gala, ING Bank was designated the bank of the year for its ING Home’Bank, as compared with nine other banks.

ING Home’Bank had:

  • 9,300,000 transactions, more than double than the next competitor;
  • 28,393,000 EUR transactioned, compared to 11,974,160 EUR of the next competitor;
  • 1075 average transactions per client, compared to 136 for the next competitor;
  • the friendliest and most functional Internet banking solution, according to the benchmarking study conducted by Finmedia & Padicode.

We bet this is a good outcome for the first two chapters of ING Home’Bank’s story.

 

If you like our work and have an interesting web project send us a message and let’s get in touch.

  • Project duration: 19 months
  • Team members: Marius Ursache