× Close

Top-notch mobile banking

Battle Strategy: Make an app that stands out in the competition

“We wanted to bring the application’s design up to today’s standards, improve the user experience and make the application scalable. This meant that we had to rethink the functionalities from the ground up, and so the update has made a number of new functionalities available to our customers,” says Mika Käyhkö from Säästöpankki.

Digital services are hugely important to customers and can be decisive in their choice of bank. The new app gives Säästöpankki a better position on the market with regard to the competition. What is more, the new payment services directive (PSD2) will intensify the competition between banks.

Säästöpankki wanted to be ready for the new competition by making sure their application provides the same top level customer experience that their physical branches are known for.

The first step when launching a new service is getting people to use it. The next step is monetising it. The old app had no monetisation angle but there were several opportunities identified for turning the new app a vehicle for revenue generation. Bringing the investment capabilities available on mobile was the logical first step towards this direction.

Creative ambitions: Make customers feel proud

“We want our customers to feel proud of the services we provide”, Käyhkö says. Hence, the design of the new app was taken seriously.

​The project started with a rapid design phase that was run on two tracks: UX and visual identity. The UX track was focused on creating a clear concept that would support all the feature needs required by different business units. It was decided from the very beginning that the navigation structure of the app should not reflect the organisational chart of the bank. Hence, there were no separate menu sections for e-invoices and loans but the features were organised into semantically meaningful categories that were tested with users as well.

Another part of the UX design track was coming up with a set of reusable components, navigational styles and motion design principles. These were still iterated during development phase but a common style guide helped keep things consistent.

Design: Sweating the details

Track 1: Smart defaults, delightful details

A constant theme was utilising smart defaults and minimising unnecessary interactions. This is evident in several details of the UI. The keyboard is shown when you expect it to be and automatically hides when you scroll away. When entering the account number in the required IBAN format, the FI prefix is filled by default. Should you erase it, you will have the full keyboard available while entering the country code and based on the selected code the keyboard changes to a numpad for easier data entry, assuming that there are no letters supported in the said country.

The payment flow is a good example of a design where all the unnecessary steps were removed, saving several taps compared to competing solutions. The message field was only left compulsory because the old payment message protocol happened to demand it. Another delightful detail that makes payments easier is that if you enter the payment view with an IBAN code on your clipboard, it is automatically entered to your recipient field.

The design was also done so it would activate people to start using the new services. Activating e-invoicing makes the user’s life a lot easier and also has business benefits for banks. Hence, enabling it was not hidden in a menu but rather made possible after making a payment. Activating it will require entering a lot of the same data anyway, so why not enable it right away. Similarly, the UI promotes activating then new biometric authentication and making extra investments to your existing funds. This way the adaptation rate for the new functionality provided by the app has been exceptionally high, considering how conservative people typically are when it comes to changing their banking habits.

Track 2: Timeless visual identity

The visual identity track wanted to ensure that we have a timeless, modern design style that feels fresh still when the app is launched. The old app looked dated and the existing concept material for the new app was following a similar design language. The web site was also in the state of change, so there was room to define the visual identity properly from the ground up.

Combining the core elements of the brand book and the industry trend of visual reduction, demonstrated by the then current redesigns of Instragram, Uber and the like, three different concepts were created. Gone were the extensive photo backgrounds and decorative elements – the styles were playing with color, white space and strong typography.

These styles were tested with end users and internal stakeholders to find the most appealing style. The winning style was further refined and tested in a blind study agains existing bank apps, asking the users to find the one that pleased their eye the most. Once we started systematically winning these polls we knew we were on the right track.

Since the style itself was so simplistic, a lot of the experience was based on the motion. This is where the UX and visual tracks came together naturally and the final style guides were crafted with realistic data and functionality already defined. At the end of different successful transactions, custom animated "Ta-daa!” illustrations were created. The loading indicator was modelled after a simplistic spinning coin. The very last addition to the visual style was when the updated brand photos became available during the spring 2018. They added a nice splash of color to the UI but were so simplistic by nature that they would fit the minimalistic style.

Technical implementation: Agile development, mega release

Building a banking app is different from a typical development project. Security requirements are on a different level and things need to be tested and documented thoroughly. In spite of the rigid environment, we wanted to follow an agile process that had been found successful in our earlier projects. Replacing an existing application at once with a single mega release brought along its own challenges. The decisions made on the day one could only be fully tested with live audience after the large feature scope was fully completed. This is typically not the optimal way of building new services but it was necessary due to business reasons and was managed with proper planing and project management.

The day-to-day process followed a typical lean pattern: business needs and metrics were clarified with the business stakeholders, designs were created and tested with end users, followed by the development sprint were the final details were iterated. The close collaboration between designers and developers enabled us to reach the ambitious production value as defined in the design concept. Technically, the product is a native application, built separately for iOS and Android. This technology decision was made to optimise for the security and user experience requirements.

There are many parts that contribute to the final user experience that are dependent on the implementation quality. For example, special attention was put to having a great bar code scanner. Modern phone cameras are so good that there is enough precision to read the codes by keeping your phone in portrait orientation. User still expect they need to rotate their phone to scan the code, but the scanning is so fast the code is typically scanned before the user is done rotating the phone.

Integrating the new, separate authentication app, operating system level biometrics support etc. made the project technically interesting. Another thing that is invisible under the hood are the remote management, monitoring and analytics capabilities that were included to enable smooth business operations. Individual features can be disabled flexibly and users can be informed about maintenance breaks, new features etc.

Investments: a major capability and a future revenue generator

A significant part of the app strategy was to create functionality that generates additional revenue. Enabling investments in the app would be a huge step to this direction. The first version of the app includes extensive market information and the possibility to do transactions with different kind of instruments. It is possible to buy and sell individual stocks, funds and manage one's insurance portfolio.

The big deal is the simplicity: it is possible to buy funds directly in the app without separately opening a specific investments account. In the approachable Säästöpankki fashion, different financial indicators were explained in layman's terms.

Great results

The app has reached most of its goals now about 6 months after its launch. It already has more users than the old version had and most importantly, the amount of monthly active users has almost doubled. The total download figure is limited by the overall customer count that Säästöpankki has. Hence, it is more interesting to compare the percentage of customers who have started using the application. Similarly, the share of transactions taking place on mobile vs. desktop has seen a remarkable increase, communicating that the app does what it should.

The app has been successful in getting customers to start using the new features. For example,  60% of users already use biometrics when logging in, pay slips have been viewed over 140 000 times in just three months and there are 3000 new e-invoice subscriptions done every month.

The first version of the app already has certain revenue-generating functionalities, most importantly the investment feature. The figures cannot be shared at this time but it seems clear that the app has potential for not only saving costs and improving customer experience but creating financial value as well!

Results 6 monts after launch, in 2019:

Next →