Internet Bank

Here I designed the screens for a multi-million pound programme set to improve the infrastructure and interface of Nationwides’ internet banking platform. The design had to meet the following:

  • Modern design that makes everything easy to read.
  • clear overview of the accounts users hold.
  • At-a-glance balance information for user accounts.
  • Easy to understand statement layout.
  • Be able to make immediate transfers between Nationwide accounts.
  • Access to support whenever you need it.
The design of this site broke down into 3 stages which are detailed below.

Step 1. The overall look and feel

Working with a wide range of individuals a number of design suggestions were produced. These were then reviewed internally and the final 3 were refined and put infront of real users to see which was preferred. The following consideration needed to be taken on board for the designs:

  • The brand of the organisation at that time
  • The design philosophy which had been agreed on
  • User expectations of what an Internet Bank should be

Step 2. Working with Information Architects

Working with Information Architects I guided the structure of the pages to ensure that the user was put first. The overview page structure is defined below.

  1. Utility links
  2. Branding and main navigation
  3. Service message Area
  4. Main accounts area
  5. Widget and tools area
  6. Banner advertisement area
  7. Text advertisement area
  8. Footer

Step 3. Designing the screens

A key way of working on this project was to focus on the design patterns used. This helped to ensure that existing patterns were used and new patterns were only created when existing patterns wouldn’t do the job. To support this methodology a style guide was produced and also a pattern library to ensure that not only the correct patterns were used in the initial development but also going forward new designers could continue to reuse existing patterns rather than producing new ones. Also I produced a number style guides to support the programme. These were also used by the developers when coding the designs to ensure that the coded screens truthfully reflected the designs. Other examples of screens I designed are shown below.

The Full Statement Screen

This screen was optimised based on how users performed frequent tasks. The majority of users wanted to look at the last month, last 3 months and last 6 months of transactions. That’s why the design shows 3 main date filter buttons. In addition users wanted the ability to filter their transactions by transaction type.


The quick transfer tool

This tool was created based on users feedback. Originally users were taken to a different area within the internet bank when they clicked ‘Go’. This confused users when it moved them away from the screen they were using and they didn’t know how to get back. I suggested that all the stages of the transfer should happen in a single area of a page. This meant that users stayed on the page they were transacting with and had clear visual confirmation of their progress. The following design shows the five possible states of the tool and incorporated these important design aspects:

  • The colours used for the different states were consistent with other areas on the site, green for confirm, red for user error, blue for system error
  • A progress icon was used so users could be assured that something was happening when they clicked the ‘Go’ button
My solution was implemented on the new internet bank.


The Balance over time screen

A set of money management tools were produced for the new internet bank which included a calendar and three graph views. This offers something new for Nationwide users by visually representing their cash flow over a period of time . The following screen is one example of this.


The security settings screen


An example lightbox


Comments are closed.