St. George Bank

Background

St.George Bank was looking to redesign its online home loan application form, so that a customer would be able to apply and complete the home loan application journey online.

The hypothesis: By significantly improving the customer experience and immediately giving the customer the exact amount they can borrow based off their personal finances, we can increase significantly improve completion rates.

My role and activities

• As a senior designer, Gordon helped in augmenting the St. George Bank’s design team on the Digital Mortgages project.
• Together, the team carried out research activities, co-design workshops, wireframing, prototyping and customer testing for the project.

A cheerful photo of our design team after a lengthy 2 day planning session

Challenges

• Applying for a home loan is one of the most difficult and complex tasks any person will face in their life. Designing one to handle all the possible financial scenarios customers might have is no simple task
• Furthermore, try squeezing that same application into a mobile screen and you’ve got more design challenges to think about.
• The former application form required customers to complete it sequentially, so as soon as a customer was stuck, they would have to save it, locate their information, then resume the form – which might lead a customer to a couple of start-stops, each one more likely to lead to a drop-out for the customer.

The team hard at work solving customer problems in a co-design session with business stakeholders

Approach and solution

Agile approach

• The numerous components of the Digital Mortgages application were divided up for staged delivery through the St. George Bank’s digital team’s standard program of work.
• At the beginning of each quarter of work, the program team decided which components would be delivered during the sprints of the upcoming period.
• Using an Agile workflow approach, the design team delivered approved designs for the development team to pick up for build.

Even without permanent wall space, a small whiteboard can still be used to help walk stakeholders through designs and inspire discussion

Early concept sketches up on the wall for discussion with stakeholders

Sophisticated design for a complex application

• The team agreed on a hub and spoke navigation model, that would allow customers to complete the application at their own pace. In essence, if one were to start the application without having all their information available at the time, they could for example complete their assets and income details, save the application form for later, then later resume to complete their expense and liability details.
• Several usability testing rounds were conducted with customers to ensure the navigation model and form progression was understood, as well as reducing friction points to improve comprehensibility and completion time.
• Responsive web design was used, allowing customers to complete the application from a desktop computer, tablet or mobile device. This was to allow customers to save, resume and complete the application anywhere at any time. Customers will see a familiar experience no matter what device they resume the application on.

Wireframe view of key screens from the hub and spoke navigation model designed in Digital Mortgages

Visual design treated property insights screen

Example screen of the form design components

Visually treated example of the dashboard

Hub and spoke model not only limited to the primary sections of the application form

The summary screen where a customer will find out whether they will be able to afford the property they wish to purchase

Results

Since going live, the form completion rate for St. George Bank’s Digital Mortgage application has consistently exceeded it’s target of 15% (up from the original 4% with the previous version of the application).