Account Opening Re-design

Redesigning Account Opening experience for BOCHK banking app

Timeline

6 months (2022)

My Role

Lead UX/UI Designer

Project Type

Mobile App (iOS/Android)

Introduction

The BOCHK Banking App is a comprehensive mobile banking solution. It offers a wide range of services including account opening, wealth management, investment, and spending, all in one app. With just a HKID card and address, you can open an account without visiting a branch.

Final delivery - at a glance

Flow chart showing the first steps of account opening
IDV - Identity verification

My Role

I'm the lead product designer for this project. I collaborated with Business Analysts, Product Managers, and IT developers throughout this project.

Goal: increase conversion rate, reduce dropoffs

The goal is to streamline the account opening process, and reduce dropoff for each steps, thus increase the overall conversion rate

Current dropoff, and projection after improvement.

Problem 1: Navigation is confusing

Texts used in the account opening are confusing to customers, choices are often conflicting, with no clear sight what to expect next.

The figure shows a convoluted navigation a customer faces when opening an account

Problem 2: It's unclear what the benefits are for customers to open an account

The application process did not discuss what the benefits are for opening an account, while the competitors provide concise and easy-to-read texts for customers to understand what the benefits are.

A comparison of the problematic design, against major competitors

Problem 3: Overwhelming - many input fields are condensed into a single page

Some pages in the account opening form are extremely long, this makes the application form difficult to complete for the customers. Validation errors are difficult to be spot since the content is so overwhelming, it is hard to pick out individual errors.

Customers were asked to input lots of personal info in one single page

Problem 4: Customer dropoffs - Facial recognition screen is poorly designed

During the account opening process customers are asked to scan their faces. The facial recognition screen is poorly designed. For compliance reasons, this step is required to complete in less than 7 seconds. Customers will have to grasp large amount of instructions in a short time. There is also a count down clock which put pressure onto the customer.

Unclear screen instructions

Problem 5: Convoluted interactions - Address search is not intuitive

Customers are asked to complete their home address. To assist customers enter their address, there is a address search function. However the function is poorly designed, customers will often have to jump between an inline search box and an overlay window, which can be inconvenient to customers.

Convoluted interactions - Address search is not intuitive

Starting point: Rework journey

The journey is being reworked to address these different business needs

Solution 1 : Improve navigation and copywriting

The previously discovered navigation issues were resolved by reworking the button labels, "contrasting options" are presented to aid customer's selections.

Solution 2 : Adding an introduction page

An intro page is added to describe to the customer what sort of benefits are offered to the customer. I worked with an illustrator to create these drawings.

Solution 3 : Provide additional help for Mainland customers

Customers from mainland China requires additional documents to open their accounts, the required documents are listed early in the user journey.

Solution 4: Tell customers what the benefits are for opening an account

Provide information of each tier services to the customer

Solution 5: Provide visualized instructions for difficult tasks

It is observed a few customers could not complete scanning of their HKID card. To assist the customers, a brief tutorial page and on-screen instructions have been added.

Solution 6: Improved facial recognition experience

Facial recognition step is being reworked, with clear and on-screen instructions

Solution 7: Improve the address search function

The address search function is enhanced with advanced search and clearly organized into different regions

Final result

100+ finalised screens were delivered in the end. For bank projects, various stake holders including the platform owner, product managers, compliance, and IT have to agree on the solution. Excellent communication were maintained between these parties throughout the project.

Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.

Post-launch optimization

This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.

Continue to design better experiences

To follow through our product roadmap and continue to stick to our design principles.