Outbank

A Tab Bar for Outbank

2017 – 2018

Future proofing a navigational structure

Introducing a Tab Bar

In June 2016 the new Outbank was relaunched as a multi-platform banking app. After 1.5 years of work bringing the app back to a strong feature-set on all platforms the team had to future-proof the navigational structure.

  • Client: New and existing Outbank users

  • Timeframe: October 2017 - February 2018

Problems:

  • Features aren't visible to the user

  • No space to add more functionality

Goals:

  • Increase feature visibility

  • Easy navigation for all users

  • Achieve a higher usage of key features

The current state of the app

To get a precise picture of the app's current navigational structure I gathered every screen and interaction in a Lucidchart user flow diagram.

Up to this point the app's navigational structure was a hamburger menu on the side, visible from the list of accounts. In that menu the user could find settings, help, the about screen, a lock function and a shortcut to the login created by the user. By doing this research first I was able to find and rank the most important interactions in Outbank and categorize them accordingly:

Features:

  • Bank Accounts

  • Financial Plans/Contracts

  • Reporting

  • Settings

  • Search

Actions:

  • Accounts

  • Budgets

  • Fixed Costs

  • Money Requests

  • Payments

Wireframes

I then arranged the key features of the app in the tab bar on the bottom of the screen with a key action button as the center item. Behind that the user could find key actions of the app. This made sure that the user could see and easily reach the most important features of Outbank while always being able to reach useful actions like making a payment or creating a budget. The items in the tab bar from left to right: Accounts, Financial Plans, Action Button, Reporting and Settings. Search was moved to the top right of the list of accounts and is also accessible from any list of transactions. The previous lock functionality was moved to the top right of the settings screen, only a tap away (same as before).

These first wireframes were created in Adobe Comp and then presented to the team.

The unique case of the iPad

Even though most of Outbank's users use the app on an iPhone I also had to make sure that the navigational change would work on the iPad. After all this release would be released on both devices. After a couple of sessions with our Product Owner, CTO and a few different members of the team we decided on the following solution.

The standard behaviour for a tab bar on the iPad would be very similar to the iPhone. It's a bar on the bottom of the screen. This solution wouldn't have worked for Outbank very well as I created a two-column layout for the iPad app that would sometimes need additional actionable items at the bottom for different screens (e.g. actions in a bottom bar of the list of transactions). These bars would have then laid on top of each other, taking up unnecessary screen real-estate making the interface more complicated with too many options.

I instead put the tab bar on the left side of the screen, vertically, always visible. This layout could also be thought of as a three-column view with a tab bar on the left, next to a column showing the currently active tab. The third column showing what was currently selected on the second column.

User Interface Design

I designed the tab bar following the iOS Human Interface Guidelines. Creating the tab bar was part of the bigger Outbank 2.0 Redesign on iOS, which followed much of the iOS HIG while also incorporating the Outbank branding.

Key Action Animation

After designing the general UI for the tab bar I also designed an animation for opening the key actions from the center item of the tab bar.

Results

After the tab bar was launched we saw a big increase of usage of some key features we wanted to get in front of users as shown below. Additionally our QA-Team was able to see a drop in negative feedback of users that were previously critizising misplaced functionality in the app.

*The numbers below show the average increase of clicks of different features in the five months after launch compared to the month before launch.

3.9x Financial Plans*
3.6x Reports*
3.2x Search*
1.7x Settings*

Credits

  • Sebastian Metel – UX & UI Designer

  • Lisa Cali – Product Owner

  • Ralf Sangl – CTO

  • Krisztina Csernavölgyi – Head of Support

  • Anya Schmidt – CEO

  • Lukas Gramalla – iOS Developer

  • Fabian Renner – iOS Developer

Tools

  • Adobe Comp

  • Sketch

  • InVision

  • Principle

  • Jira

Future proofing a navigational structure

Introducing a Tab Bar

In June 2016 the new Outbank was relaunched as a multi-platform banking app. After 1.5 years of work bringing the app back to a strong feature-set on all platforms the team had to future-proof the navigational structure.

  • Client: New and existing Outbank users

  • Timeframe: October 2017 - February 2018

Problems:

  • Features aren't visible to the user

  • No space to add more functionality

Goals:

  • Increase feature visibility

  • Easy navigation for all users

  • Achieve a higher usage of key features

The current state of the app

To get a precise picture of the app's current navigational structure I gathered every screen and interaction in a Lucidchart user flow diagram.

Up to this point the app's navigational structure was a hamburger menu on the side, visible from the list of accounts. In that menu the user could find settings, help, the about screen, a lock function and a shortcut to the login created by the user. By doing this research first I was able to find and rank the most important interactions in Outbank and categorize them accordingly:

Features:

  • Bank Accounts

  • Financial Plans/Contracts

  • Reporting

  • Settings

  • Search

Actions:

  • Accounts

  • Budgets

  • Fixed Costs

  • Money Requests

  • Payments

Wireframes

I then arranged the key features of the app in the tab bar on the bottom of the screen with a key action button as the center item. Behind that the user could find key actions of the app. This made sure that the user could see and easily reach the most important features of Outbank while always being able to reach useful actions like making a payment or creating a budget. The items in the tab bar from left to right: Accounts, Financial Plans, Action Button, Reporting and Settings. Search was moved to the top right of the list of accounts and is also accessible from any list of transactions. The previous lock functionality was moved to the top right of the settings screen, only a tap away (same as before).

These first wireframes were created in Adobe Comp and then presented to the team.

The unique case of the iPad

Even though most of Outbank's users use the app on an iPhone I also had to make sure that the navigational change would work on the iPad. After all this release would be released on both devices. After a couple of sessions with our Product Owner, CTO and a few different members of the team we decided on the following solution.

The standard behaviour for a tab bar on the iPad would be very similar to the iPhone. It's a bar on the bottom of the screen. This solution wouldn't have worked for Outbank very well as I created a two-column layout for the iPad app that would sometimes need additional actionable items at the bottom for different screens (e.g. actions in a bottom bar of the list of transactions). These bars would have then laid on top of each other, taking up unnecessary screen real-estate making the interface more complicated with too many options.

I instead put the tab bar on the left side of the screen, vertically, always visible. This layout could also be thought of as a three-column view with a tab bar on the left, next to a column showing the currently active tab. The third column showing what was currently selected on the second column.

User Interface Design

I designed the tab bar following the iOS Human Interface Guidelines. Creating the tab bar was part of the bigger Outbank 2.0 Redesign on iOS, which followed much of the iOS HIG while also incorporating the Outbank branding.

Key Action Animation

After designing the general UI for the tab bar I also designed an animation for opening the key actions from the center item of the tab bar.

Results

After the tab bar was launched we saw a big increase of usage of some key features we wanted to get in front of users as shown below. Additionally our QA-Team was able to see a drop in negative feedback of users that were previously critizising misplaced functionality in the app.

*The numbers below show the average increase of clicks of different features in the five months after launch compared to the month before launch.

3.9x Financial Plans*
3.6x Reports*
3.2x Search*
1.7x Settings*

Credits

  • Sebastian Metel – UX & UI Designer

  • Lisa Cali – Product Owner

  • Ralf Sangl – CTO

  • Krisztina Csernavölgyi – Head of Support

  • Anya Schmidt – CEO

  • Lukas Gramalla – iOS Developer

  • Fabian Renner – iOS Developer

Tools

  • Adobe Comp

  • Sketch

  • InVision

  • Principle

  • Jira

Future proofing a navigational structure

Introducing a Tab Bar

In June 2016 the new Outbank was relaunched as a multi-platform banking app. After 1.5 years of work bringing the app back to a strong feature-set on all platforms the team had to future-proof the navigational structure.

  • Client: New and existing Outbank users

  • Timeframe: October 2017 - February 2018

Problems:

  • Features aren't visible to the user

  • No space to add more functionality

Goals:

  • Increase feature visibility

  • Easy navigation for all users

  • Achieve a higher usage of key features

The current state of the app

To get a precise picture of the app's current navigational structure I gathered every screen and interaction in a Lucidchart user flow diagram.

Up to this point the app's navigational structure was a hamburger menu on the side, visible from the list of accounts. In that menu the user could find settings, help, the about screen, a lock function and a shortcut to the login created by the user. By doing this research first I was able to find and rank the most important interactions in Outbank and categorize them accordingly:

Features:

  • Bank Accounts

  • Financial Plans/Contracts

  • Reporting

  • Settings

  • Search

Actions:

  • Accounts

  • Budgets

  • Fixed Costs

  • Money Requests

  • Payments

Wireframes

I then arranged the key features of the app in the tab bar on the bottom of the screen with a key action button as the center item. Behind that the user could find key actions of the app. This made sure that the user could see and easily reach the most important features of Outbank while always being able to reach useful actions like making a payment or creating a budget. The items in the tab bar from left to right: Accounts, Financial Plans, Action Button, Reporting and Settings. Search was moved to the top right of the list of accounts and is also accessible from any list of transactions. The previous lock functionality was moved to the top right of the settings screen, only a tap away (same as before).

These first wireframes were created in Adobe Comp and then presented to the team.

The unique case of the iPad

Even though most of Outbank's users use the app on an iPhone I also had to make sure that the navigational change would work on the iPad. After all this release would be released on both devices. After a couple of sessions with our Product Owner, CTO and a few different members of the team we decided on the following solution.

The standard behaviour for a tab bar on the iPad would be very similar to the iPhone. It's a bar on the bottom of the screen. This solution wouldn't have worked for Outbank very well as I created a two-column layout for the iPad app that would sometimes need additional actionable items at the bottom for different screens (e.g. actions in a bottom bar of the list of transactions). These bars would have then laid on top of each other, taking up unnecessary screen real-estate making the interface more complicated with too many options.

I instead put the tab bar on the left side of the screen, vertically, always visible. This layout could also be thought of as a three-column view with a tab bar on the left, next to a column showing the currently active tab. The third column showing what was currently selected on the second column.

User Interface Design

I designed the tab bar following the iOS Human Interface Guidelines. Creating the tab bar was part of the bigger Outbank 2.0 Redesign on iOS, which followed much of the iOS HIG while also incorporating the Outbank branding.

Key Action Animation

After designing the general UI for the tab bar I also designed an animation for opening the key actions from the center item of the tab bar.

Results

After the tab bar was launched we saw a big increase of usage of some key features we wanted to get in front of users as shown below. Additionally our QA-Team was able to see a drop in negative feedback of users that were previously critizising misplaced functionality in the app.

*The numbers below show the average increase of clicks of different features in the five months after launch compared to the month before launch.

3.9x Financial Plans*
3.6x Reports*
3.2x Search*
1.7x Settings*

Credits

  • Sebastian Metel – UX & UI Designer

  • Lisa Cali – Product Owner

  • Ralf Sangl – CTO

  • Krisztina Csernavölgyi – Head of Support

  • Anya Schmidt – CEO

  • Lukas Gramalla – iOS Developer

  • Fabian Renner – iOS Developer

Tools

  • Adobe Comp

  • Sketch

  • InVision

  • Principle

  • Jira

Made with ❤️ in Potsdam.