Online Banking Responsive Forms, User Experience and Interface Design

Improve the user experience of this high street banks online account opening process was the challenge. User flows, responsive form designs, all mobile first, touch enabled delievered with a suite of responsive components

VIEW PROJECT

Improving the online account opening experience for a major high street bank

INTRODUCTION

What was the customer experience like to open an account with this bank?

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?

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

• 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

What were the key pain points?

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

For the customer

• 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

For the business

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

What was happening outside of banking?

Investigation into the world's best digital account solutions. The international device market & the best practices for data entry online

ResearchResearch

How did designs develop?

Once there was a complete understanding of the entire account opening process for this banking retailers' online process, the creation of improved page designs began for key customer journeys. These designs were required across four break points

Sample Welcome Screens to Open a Bank Account on a mobile and tablet deviceSample Welcome Screens to Open a Bank Account on a mobile and tablet device

ARCHITECTURE

Simplification & reduction of content

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

Touch-enabled interface design

This approach was the first time this high street bank had considered and implemented larger targets areas for its users of their online experience, delivering a first time mobile-optimized interface design for its customers

USER TESTING

Could users complete the process via their touch screen devices?

Several rounds of usability testing on tablet & mobile devices allowed the team to assess any problem areas and enabled iteration of the interface design for an improved user experience for the high street banks customers

Testing_Image_v3Testing_Image_v3

COMPONENT LIBRARY

How do you speed up the design process?

Create a library of responsive modules that the business can use across all departments

Component Interface Design For Retail Bank Account OpeningComponent Interface Design For Retail Bank Account Opening

DESIGN STYLEGUIDES

Detailed guidelines & documentation

Rules, information & guidelines were created for developers, business owners & designers explaining how to use components and their individual behaviours across breakpoints

Modules

User Interface Module DesignsUser Interface Module Designs

Spacing

User Interface Design Element Spacing GuidelinesUser Interface Design Element Spacing Guidelines

Typography

Typography Interface DesignTypography Interface Design

Spacing rules & Interactions

User Interface Design Interaction GuidelinesUser Interface Design Interaction Guidelines

Buttons

Button User Interface DesignButton User Interface Design

Colours

User Interface Colour BrandingUser Interface Colour Branding

Summary of the results for the first release

The Account Opening Programme saw improvements across all areas; conversions, mobile-tablet device visitors and additional account feature uptakes

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

• 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

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

Are you looking to improve your businesses digital offerings?

Share your company's biggest challenge, frustration or problem with improving your digital product's user experience

[unex_ce_button id="content_2pdmeu1ea,column_content_rwoeiymwj" button_text_color="#ffffff" button_font="regular" button_font_size="16px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="15px 40px 15px 40px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="66px" button_text_hover_color="#d7cdc0" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="https://airtable.com/shrveDJfe5IgtoTyP" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]ANSWER HERE[/ce_button]