User Experience Design for Banking
At K2 we have a lot of experience working with banks and other financial institutions. Over the last 10 years we helped to envision, design and develop over 10 transactional systems and several dozen websites for many banks. Over 10 millions of people are using our banking systems, including clients of the two largest banks in Poland: PKO Bank Polski and Pekao S.A.
What’s important when designing for banks? Here are some of our cases and a few tips based on our experience.
The process is as important as the product
Let’s start by saying that digital projects for banks are usually projects of gigantic proportions. Large banks have hundreds of financial products for many groups of customers and banking websites have thousands of pages. Transactional systems have hundreds of screens (over 500 is not surprising), and unlike informational websites, there are no templates, each screen is at least a little bit different.
Now think about Responsive Web Design and multiple everything at least by 2, maybe 3 or 4, depending on site’s design and number of breakpoints. Don’t forget iterations, revisions, corrections.
Creating thousands of layouts in Photoshop and managing change is an insane task. So right process for the job is really important.
What you want to do is:
- Minimize the number of graphic design files as much as possible…
- …but the developers still need to know how each screen will look like and how all of it connects and works.
These two things are at odds. How to do it?
The first banking project I’ve worked on was the redesign of the transactional system Pekao24 for Pekao S.A. Bank in 2008-9. Though old-school, it is still in use, and still looking cleaner than many much newer banking systems.
During this project we’ve created only a dozen of graphic design layouts and a stylesheet of all elements, but we’ve designed every important screen (almost 500 of them) as a wireframe.
Naturally it’s much faster to create rough wireframes using the library of previously made elements, than pixel-perfect designs in Photoshop. And it was enough for developers to have just a few layouts and the stylesheet plus our wireframes as a documentation.
Firstly UX Designers worked on the concept, structure and navigation, then Graphic Designer stepped in to design a few key screens like the home page or money transfer form. After that UX Designers started to wireframe all the screens consulting with the Graphic Designer on an ongoing basis. When new widgets were needed for a particular screen or feature Graphic Designer created them and they were added to the library, so we could use them in our wireframes.
We were working in sprints and presented new work to the client once a week. Once in a few weeks there was a meeting with all the directors from the Bank (a steering committee) where important decisions were made.
We had an access to the internal test server of the system, but once in a while we stumbled upon some processes that couldn’t be invoked easily. And with systems as large no one knows everything and it can take days or even weeks to find the source of information and have all the answers. But while working with Pekao we had an incredible experience of calling the client with some questions and receiving in a few hours a complete documentation of the whole process written especially for us! They were 100% dedicated to the project. It was incredibly intense, but the partnership was great.
Another example of a process set to minimize the amount of work necessary for a very large project is our recent redesign of the PKO Bank Polski info-site. We did it again in 2016 after our first design of it from 2009-2010 (more about it later). The site is enormous — over 15 000 pages with hundreds of financial products for different groups of customers: individual customers, small businesses, big corporations and institutions, and so on. This time we wanted to introduce Responsive Web Design and many other improvements. And guess what?
We never did any wireframes during this project (besides just a few during the concept phase, which the client never saw).
If your UX Designers really know their shit and have a good rapport with Graphic Designers you can jump straight away to graphic design. All I needed was a quick brainstorms of ideas on a piece of paper with the Art Director and that’s it. The final product was a several dozen of PSD files with templates, a stylesheet, and some rules how to scale it to different resolutions from desktops to tablets to mobile. And of course a big-ass Excel file with the structure of everything.
And just a few months ago PKO Bank Polski was awarded as the most user-friendly bank in Poland for its website, mobile app, and its transactional system iPKO (which we also helped to design) by the highly regarded polish magazine Puls Biznesu, who audited digital touchpoints of all the banks in Poland. It’s great to be a part of this success, which wouldn’t be possible without the trust and hard work of many people working at the Bank.
Design a system
Large banks not only have very complex websites, but also have a lot of them. You have to think globally.
While working on the first version of the main info-site for PKO Bank Polski in 2010 we have created a whole new design language for all of its digital touch points: websites, mobile apps, ATMs.
It was based on a system of tiles used as navigation and was thought out to be easily adapted for different contexts and resolutions. It was very innovative idea back then (Ethan Marcotte just coined the term Responsive Web Design in May 2010!) and our CEO though I was crazy. Unfortunately it was never implemented as a proper RWD (I think it was too early), but this design language was subsequently used for several dozen websites of the Bank’s sub-companies and transactional systems iPKO, SKO and PKO Junior.
This previous version of the PKO Bank Polski main website was nominated for IxDA Awards in 2011 as the first and only project from Poland so far.
Whatever you do it’s worth to think larger than your current project and design a system. Below is an example of Web Guidelines created by us during the redesign of the main website of Raiffeisen POLBANK in 2012.
Working on this project we were inspired by the work of Otl Aicher, incredible German graphic designer, author of the Raiffeisen logo, logo of Lufthansa and the identity of 1972 summer olympic games, among many other great works. Simple flat elements and iconography — flat design years before it came into fashion in digital.
Take time to innovate and experiment early
Large projects for banks usually take at least a year or more to complete. Your time to market is long, and besides, large projects need to have a long lifespan. So think how’s the web is changing, how it will evolve, how the client’s needs can evolve, what’s the future?
You want to experiment early and create multiple different solutions. Because after a few months working on the project everybody will be tired of it and just want it to be over, not to innovate. Go crazy at the beginning.
When we were designing the iPKO transactional system for PKO Bank Polski in 2012–14 we have created a staggering number of 26 design concepts! Below are some of the unused visual design ideas.
During the redesign of PKO Bank Polski main website in 2016 we also created at least 5 or 6 completely different concepts at the beginning. For a long time we were pursuing one of them that we have called “Focus”. We had an idea of focusing user attention and hiding all the distracting elements. And we also wanted to break off from the idea of a traditional home page and show a set of the most popular products’ pages instead of it. It involved an unusual zoom-out and zoom-in navigation.
It was finally scrapped, but we used many learnings and some elements from it in the final version.
Know your users
It’s not so hard for designers to understand the general needs, problems and tasks of the users of personal banking. After all, we’re all banking users. But what about some special groups, like small businesses, corporations and institutions, professional investors, wealthy people, students and teenagers, or kids, or older people? Banks are always looking to expand their reach and offer specialized solutions. And in cases like these you have to do some research to really understand your user group.
When Pekao S.A. Bank asked us to redesign and improve the interface of its online transactional system for corporate clients, PekaoBIZNES24, we had to understand the needs and everyday jobs of the accountants, financial directors and top managers from big companies, who use this system.
We gathered requirements from over a hundred of Bank’s clients, the users of the website. This data helped us to shape our vision of the new interface.
Corporate banking is very different from personal banking. Individual users are logging into their banking accounts just from time to time for a very short periods of time, but some corporate banking users can spend whole days using their systems: it’s their job.
Szkolne Kasy Oszczędności (Schools’ Savings Accounts), widely known by the acronym SKO, is Poland’s programme of financial education for kids aged 6–13. It was launched around 1927 and still exists today as a service provided by PKO Bank Polski. SKO was very popular in Poland after the WWII, especially during the ’80s, when participation in the programme was obligatory for all elementary schools.
How the service works? As children under the age of 13 can’t open their own banking accounts, the saving accounts are owned by the school. Teachers take deposits and make withdrawals for their classes, and their role is to educate kids about money and encourage them to save. SKO in its previous form involved a little paper book owned by each kid, where all transactions were filled in by hand by the teachers, but in 2011 PKO Bank Polski decided to update the whole service to benefit from new technologies and asked us to design the new SKO online experience. The paper books were going to be replaced by online applications — one for kids and the other for teachers to manage savings for their pupils.
When brainstorming how the online transactional system for 6–13 olds could look like, we were inspired by sites like Mint.com, but wanted to make money management understandable to children. The application had to be fun to use and motivate kids to save their money.
It’s important to note that a gap in development between kids aged 6 and 13 years old is huge. Six year olds are only starting to learn reading and doing basic maths, and what is fun for younger children quickly becomes boring or even embarrassing for the older kids. The system had to cater for the interests and needs of all age groups and educate children about basic financial concepts in a way appropriate for their age.
Initially, we thought about dividing application in two parts for younger and older kids with different features, but eventually we came to conclusion it was a more complicated approach and ultimately — a wrong one. Instead, we decided that the core features needed to be usable for all age groups, but we wanted to add some more advanced features for the older kids. Younger users could still try them, but if some options prove too hard for them to understand they wouldn’t need to use them at all.
After we worked out the initial interaction design concept and features, we tested our prototype with girls and boys in different age groups and it was a valuable lesson, as we managed to correct many of our wrong assumptions.
The main feature of the application is the creation of piggy banks or money boxes for various saving goals. Kids can create as many goals as they want and assign a chosen sum of money to each one. Later on they can track their progress in saving for each financial goal. The application helps to calculate how much money and how often the user needs to deposit to reach the defined goal at a defined date. Kids don’t need to set a specific date, they can choose options like „next month“, „summer vacations“ or „Christmas“.
Each SKO account is a real bank account with its own bank account number and parents can transfer money to it, but it is not possible to withdraw money without parents’ permission. It’s the teachers who manage deposits and withdrawals.
The project was a big success. Over 4500 schools are now participating in the programme (one third of all elementary schools in Poland).
Subsequently, we designed the PKO Junior banking system, which is managed by the parents, not by the schools, and is very similar to SKO, but with some different features. It has now over 16 000 accounts
The future is now
So what’s the future of banking? One answer is mobile. Mobile banking is on the rise.
We had worked on mobile banking transactional site for Pekao S.A. as early as in 2009 and we have helped them to create PeoPay mobile payment service in 2013.
PeoPay is a modern and convenient way to pay without cash. It allows to non-cash payments in shops and service points, payments for purchases on the internet and quick transfers between users of the application. PeoPay goes a step further than other mobile payment systems by offering a mobile application for retailers. It allows to accept payments via smartphone without the need for additional equipment or terminal.
The important part of the experience is the application interface. It is gesture-based and could be operated one-handed using only the thumb. We prototyped the interface using Adobe Air, which allowed us to to try and test our ideas on the phone very quickly.
Most banks in Poland had already redesigned their informational websites to be responsive and mobile friendly. We did it for Raiffeisen in 2012 and for PKO Bank Polski in 2016. We proposed responsive redesign of the main website for Pekao S.A. Bank, but it’s sadly unreleased and their website is still desktop only.
With transactional websites the transition into Responsive Web Design is going slower for most banks. They’re just happy to offer mobile apps. Here’s once again our unreleased proposition of the responsive online banking system Pekao24 for Pekao S.A.
But for us, really, the future of banking is omnichannel — banking on desktop and mobile web, mobile apps, smart watches, smart speakers, messaging apps… And we shouldn’t forget about traditional touch points like bank branches, which are also becoming “digital” — we had once worked on a concept of the “branch of the future”.
This is the thinking behind our recent creation of the K2 Bank: a prototype of a digital multi-channel banking system based entirely on an artificially intelligent robot assistant and a vision of the future of banking after the second Payment Services Directive (PSD2) will be transposed into national regulations across the European Union in 2018. PSD2 will force banks in Europe to provide access via APIs to their customer accounts and this will open a lot of new and exciting possibilities in banking!
Want to know more? Talk to us!
If you want to talk about possible cooperation please write to Maciej Lipiec, K2’s User Experience Director, at email@example.com
K2 Internet is a leading digital product design and communications agency in Poland. We develop digital services, apps and websites with a strong focus on user experience. We have a pleasure of working with many financial institutions and the most amazing companies such as CD Projekt RED, IKEA, Volkswagen, and many more.
Thank you! If you enjoyed reading this, please 👏👏👏 and share! :)
More of our thinking:
For the past year we were working on a concept of conversational interface for an online banking system that we called…chatbotsmagazine.com
K2 agency presents a new way of personal banking: K2 Bank powered by Stanusch Technologies.medium.com
For several of our clients from the banking sector K2 digital agency has been working on the concept of the branch of…medium.com