Case Study - Easy to use online banking - Savings Account

Initial Product Research and Analysis

A well known Global bank needs to update its current services online. It’s a continuous upgrade cycle.

Axure is used for all prototypes after the wireframes are drawn. From the prototypes, presentations are given to stakeholders.

There are other prototypes created using CSS/HTML and Javascript as well some built on Sitecore.

We used Agile process throughout. This meant daily stand up meetings with the scrum master and often with the product owner.

The UX work starts from an epic and individual stories. Many stories make an Epic. These stories are broken down further into individual tasks as can be seen below.

User flows are created to help understand the best way to create the wireframes and prototypes. Below is just one example, however there are dozens upon dozens  for every possibility.

Wireframing, Technical Feasibility and Early User Testing

Much of the early testing would be done weekly. Often wireframes would be critiqued by the local team and also online Skype presentations. This was a great exercise for questioning and scrutinising the UX.

Below are examples of wireframes and the thoughts behind them.

Initial Step

1. Full width imagery. The height of this image should take up a large area.

2. Options to filter products. Only visible when specified by entity. Default view. Uses a statement builder with tags as buttons. By default, all recommended products are shown and tags are selected to reflect this.

2a. Customers can select / deselect tags to filter products in view. e.g. clicking ‘Fixed rate’ would deactivate the tag, and all fixed rate products would be removed from view below. Multiple tags can be selected / deselected at any one time.

2b. Recommended products may include products from other tags. If a customer deselects a tag which includes recommended products, the recommended tag will also switch to deselected state to reflect products in view. e.g. if the list of recommended products included fixed rate products, and the customer deselects fixed rate products, recommended products will also be deactivated.

3. Product information – broken down into:

▪ Key product advantage are presented first (will differ per product)

▪ Product name

▪ Product filter

▪ 2 calls to action: Find out more – will go to the product detail page. Apply will open step 1    of the application process (as seen within this document)

▪ Key product benefits

4. UX recommendation is for a personalised look and feel statement to be introduced to product descriptions once customer segmentation has improved to the point that the product listing page can be personalised – the content can be standard for every customer but visually should look like a personalised message

5. Customer must be authenticated to Customer Authentication Model Level 40 (CAM) in order to apply for a credit card online. If customer is not then they will be presented with a CAM 40 step up page before continuing. Recommendation is for Step up to appear in overlay. Awaiting for this issue to be resolved before finalising step up process.

6. Content is configurable per entity. Branch call to action will direct to local 6 entity Branch Finder

Step 1

1. Customer is presented with the minimum set of personal and contact details filled in on screen which they need to confirm are correct before moving to the next step (tailored per country regulation).

2 & 2b. Customer is given the option to amend their details in the customer maintenance section if any information presented is incorrect. Customer is informed that if they choose this option they will have to begin the Account Opening Process from the beginning.

3. Customer is required to confirm & accept the minimum set of details via a check box before they can progress.

4. Some entities require T&C’s to be presented directly at start of application.

5. Clicking “continue” takes customer product configuration page based on the product.

6. Customer is presented with a cancel button on every page within the account opening process. Customer is presented with a warning message informing them that if they cancel their account opening process, none of their details entered thus far will be saved. They will have the option to accept or reject the cancellation. Customer is routed back to the Account Summary page upon exiting the Account Opening process from the warning message displayed. Customer is able to return to the product configuration function if they wish to amend any details. Each country upon S&A will need to review and approve the minimum set of personal and contact details and if already available from the back end.

6b. Cancel alert.

Step 2

This page illustrates the product configuration page shown to the user for Term deposit account opening.

1. All available accounts displayed. Customer is shown the available balance of the funding account. The account is opened in the country used to log-in.

2. Customer is presented with product feature options specific to chose product (e.g. amount to be debited, account term, interest rate etc).

3. Currency defaults to the entity in which customer is logged in to and is therefore creating new account in. Currency lozenge and exchange rate only appear when customer is drawing funds from a foreign account. Customers should be able to specify the amount they want to transfer in the either the “new deposit” currency or the “debit/funding account” currency. Clicking the currency lozenge enables customers to chose from these two options.

3b. Rate is indicative rate and not live rate.

4. This data field is only applicable when the account type to be opened is a term deposit account with interim interest.

5. Continue. customer will be asked for any further regulatory information or data if required e.g. FATCA, KYC for HBMX. FATCA data capture appears on following page and 5th step is added to step tracker (sole or joint account depending on whether a joint account was selected in step 2).

6. Cancel. On click go to alert 6b.

Step 3

This page illustrates what a customer will see to review and verify details of their new product. Customer is presented with a confirmation page based on that product configuration only.

1. In order to proceed to the next step the customer must accept the T&Cs. The version of T&Cs displayed are tailored per country and product.

2. Clicking confirm takes customer to Confirmation.

3. Customer is presented with cancel button which will return them to the Product Category page.

Step 4

This page illustrates what a customer will see when their application was successful.

1. Customer receives onscreen message to confirm their application has been approved. If a longer paragraph about the successful application is necessary, it appears directly below the message.

2. Notification as per BRD.

3. Customer can see their:

  • Application reference number
  • Product Name
  • Account Name
  • Account Number
  • Effective Start Date and Term (if applicable for product) and other relevant information base on their product

4 & 4a. Modal overlay with rate card to inform customers how the interest rate has been calculated.

5. This data field is only applicable when the account type to be opened is a term deposit account with interim interest.

6. Customer is informed of any next steps & referral information regarding their account as defined for the product e.g. customer is informed that they may need to attend their local bank branch to conclude the credit agreement

7. Customer is presented with a link to direct them back to their account dashboard page (where new account is visible)

High Fidelity Prototype and User Testing

The final deliverable to be signed off would be a high fidelity Axure prototype, with all required interactions and documentation accompanying it.

This would be presented along side a high fidelity Photoshop design with all the information to be given to the developers to do the CSS and Javascript.

A style guide had already been completed and we would adhere to this.

Delivery and Developer Hand-Over

Once all the wireframes and prototypes were finished for individual user stories they would be handed over to the developers to work on.


There were constant iterations by the UX team, which were then passed on to the developers.

This process was very successful as it continually sorted out all the issues and also catered for anything new that came in to alter the current designs.

© 2017 Ben Jones Graphics Ltd. Registered in England and Wales. Company number 09189975