Scotiabank on iOS: Adding Value to the Home Screen
The home screen is the first thing a user interacts with when launching a mobile application. Most apps don’t take full advantage of this screen. The Scotiabank app is no exception as it provides little value and minimal detail. After logging in this is what you’re presented with:
Front and centre are your accounts and the balances for each. This is helpful and generally one of the main components you’d be looking for. From there unfortunately, there’s not much else to see. Everything is hidden and requires additional interaction cost to access. It would be great to use up more of the available screen real estate with some usable information. Wouldn’t it be nice to know how important that “1” message is? It could be helpful to see recent transactions across all of the accounts. There’s also room to enhance the visuals without taking away from the important information that’s already there.
My proposed redesign:
I started by introducing a new area for recent transactions. This shows transactions from all accounts sorted by most recent. When a user logs into their account they’re able to see, at a glance, the last few transactions made. Along with these transactions I’ve introduced colour coded dots to visually separate different types of transactions. In the image above purple represents ‘POS Purchases’, blue is for ‘Bill Payments’ and green signifies ‘Deposits’.
I decided to enhance the account information by providing more information in the form of a subtle chart and positive/negative arrows to visualize account performance over the past few months.
The tabs at the bottom provide easier access to some of the main functions of the app instead of having to tap first on a navigation button.
Two other new aspects I focused on are messaging and the new search bar in the header.
I wanted messages to have more priority and visibility when a message is available. The logo gets a yellow dot so it can be seen from other screens and the messages are placed at the top of the list. Again, this eliminates the additional tap found in the current app.
The search bar in the header was the last main addition to the redesign. A lot of times the header bar isn’t quite used to its full potential, especially on the landing screen. This way there’s quick access to the search when needed. This can be perfect for those times when you quickly want to see the last time you ate at Tim Hortons.
Lastly, I wanted to go one screen beyond this home page to illustrate how the design for the accounts area could be continued.
I’ve kept the same graph up at the top to visualize the performance of the account and how it’s been doing over the past few months.
The home screen is most often the first thing your users see. This critical screen should provide value without hindering the experience. By making some small adjustments to how content is displayed and adding a few features I was able to make the Scotiabank home screen a valuable part of the user journey.
Feel free to let me know what you think of this redesign and any other ideas you might have on Twitter.
Read my previous article on how I’d redesign the Cineplex iOS app.
Need help planning, designing and prototyping your next big idea? Hire us to help you out!
