RESPONSIVE WEB EXPERIENCE

Retail bank online account opening experience

B2C • Onboarding Redesign • User Research • Service Design • User Experience Design • Interface Design • Responsive Forms

Results

Delivered a seamless self-service process to open a bank account online. Bring a 156% increase in mobile conversion, 100+ more accounts opened per week, 3x accounts opened on mobile devices, with a 14% increase via tablet devices and 113 add-on packs taken all within the first week of launch, plus 8% of customers used the new review and edit feature.

Challenge

In the previous year of this programme, the business opened 900,000 new bank accounts with 97% opened in high street branches and only 3% opened online. Customers had to wait 1-2 weeks for an appointment and spend 40-60 minutes per appointment to open an account, often requiring a second appointment if documents were missing. This resulted in a slow and resource-intensive experience for both customers and this retail bank.

Scope

UX Strategy
User Research
Usability Testing
Service Design
Stakeholder Management
Information Architecture
Responsive Design
UX Copywriting
Design System

This retail banks customer experience 

With a total of 900,000 current accounts opened that year, where exactly were the issues with the user experience and how was the business being challenged?

The high street banks original in-branch experience

• Where 97% of accounts opened
• 1-2 weeks time for an appointment
• Old systems, Many data points
• Each appointment 40-60 minutes
• Awkward cross-selling
• 60% bankers time opening accounts

The banks original online account opening experience

• 8% of business serviced digitally
• 3% of accounts opened online
• 80% of traffic using desktops
• Poor mobile experience
• High bounce rates
• Little to no mobile traffic
• No responsive solution

Pain points

How were the challenges of opening an account with this service provider represented across the business and the customer?

Customers

• Not at consumers convenience
• Long waiting times 
• Long appointment durations
• Second appointments required
• Unclear customer questions
• Inefficient data entry
• Cross-selling unwanted by 60%
• Irrelevant questions

Business

• High costs to open accounts
• Most accounts opened in-branch 
• Extra staff required for demand
• Slow application processing
• Difficult to support non-UK nationals
• Customer loss to competitors
• 87% drop off online 

How did the design process develop?

Once there was a complete understanding of the entire account opening process for this banking retailers' online experience, we began by streamlining customer user flows and simplifying the page designs for the key customer journeys.

Using a mobile-first approach we started these designs focused on the mobile experience and then worked our way upwards across four separate break points for the interface design.

Above: Account opening welcome screen with clear overview of the process for customers

Simplification & reduction of content

Using a mobile-first approach empowered decision making to simplify the user flows and overall information architecture of the entire user journey through the process.

Touch-enable interface design

We lead this approach which was a first time initiative for the high street bank. Our key focus was the consideration for larger hit areas and visual targets for users to be able to easily interact with via touch screen devices.

This experience became the first mobile-optimized user experience design for the banks online customers.

Above: Mobile & desktop interface designs for key pages from online account opening process 

First sight of User interactions with touch screen devices

We completed multiple sessions of usability testing on both different touch devices, which allowed us to troubleshoot key challenging areas within the interaction design.

This delivered us the opportunity to iterate on the initial design and development improving the executed implementation.

Above: Photos from user testing within the banks usablitiy testing labs with cusomter working through touch interface 

Design system component library

To improve the end result, all deliverables and scalability of the programme we made the important recommendation that the bank develops its own responsive design system.

As a team, we created the first library of responsive form components and modules enabling the business to then utilise across the bank with different department requirements.

Above: Design system that's responsive to service different device sizes and maintains an optimum experience for customers

Design system documentation

To communicate the concepts, design rules, information and the knowledge we had developed we created a set of guidelines to share with others wanting to utilise this initiative across the bank.

To improve the final deliverable we hired a front-end javascript specialist who we worked closely with to insurance the utmost quality of the final code deliverable.

Modules

Spacing

Typography

Spacing rules & interactions

Buttons

Colours

Initial release results

This Account Opening Programme experienced improvements across all areas of focus for the team; conversions, mobile customers, tablet visitors and it even saw an uptake with the businesses additional account feature offerings, something that was described as a pushy sell from customers, previously

Conversion metrics

• 100+ extra accounts per week
• 6% Conversion increase to ‘About you’ section
• 8% Base conversion increase
• 20% Conversion increase to ‘Employment Details’ section

Device metrics

• 156% Mobile conversion increase
• 3x the amount of accounts on mobile devices
• Equaling 30% of all accounts opened online
• 14% Increase on applications submitted via tablets

Feature offering metrics

• 8% of customers using review & edit functionality
• 113 packs taken with accounts since launch