Love the web

Earlier this year I got the opportunity to design a version of Kiwibank's internet banking pages optimised for the iPhone. iPhones had yet to be released into New Zealand and Kiwibank were wanting to launch an iPhone specific version of their internet banking into the market at the same time as the iPhone was released. 

Although the existing internet banking pages could be viewed on an iPhone, there were many reasons why Kiwibank wanted to create an iPhone optimised version. Conventional websites can be challenging to operate on the small iPhone as the type is tiny and there is often too much text to fit comfortably on the screen. This makes for poor usability and means the user will be constantly zooming and scrolling to read the content on the pages. Even logging into internet banking would have been a challenge.

Kiwibank had done some research into the current user patterns of their mobile banking services. Statistics showed that 90% of customers accessed their mobile banking to check their account balance, view transactions or to transfer money between accounts. This became the core functionality for the iPhone specific internet banking pages.

There were three key functions that users would be able to perform, access their account balance, view their transaction history and transfer money between their accounts. This meant we could use a very simple navigation structure. This helped to create a visually clean interface with only two main navigation items.

This was an exciting project to be working on as it allowed me to design a user interface that was very different to the ones I was familiar with. This also meant that there was a lot to consider in terms of functionality and the user experience.

Designing iPhone optimised pages has an interesting mix of constraints and opportunities. In comparison to designing for the web, you have a fixed screen size, resolution and only one browser to test in. This means you know exactly what you are dealing with and makes it is easier to achieve your intended design when rendered on the iPhone screen. 

The limited (and small) screen real-estate (320 x 480 pixels) was a challenge, the aim was to present information within the fixed screen size without having to zoom. The aim was to have just one direction of scrolling to view everything on a page.

There needed to be a balance between displaying the necessary content at a legible size, whilst using finger sized targets for buttons and text fields. There was no room for any unnecessary elements that would clutter the interface.

The focus was on achieving the primary tasks quickly and easily. The touch screen nature of the iPhone meant there needed to be fingertip-sized buttons for all selectable elements. We found the use of show and hide buttons was a very useful way to expand on or reveal more information on the pages. 

There were a few learning curves along the way: 

• text links are often not seen, people are more inclined to follow buttons on the iphone. 
• placing any buttons or links too close to the bottom of the screen was picked up by the iPhone as part of its interface rather than part of the web page.

The result was an iPhone version of internet banking allowing simple viewing and rapid access to account information.

Designing an iPhone optimised site was  a lot of fun and it was a great experience to work closely with the guys from Kiwibank to create the first New Zealand online banking service for the iPhone.