Redesign Barclay Banking App - UX Casestudy

BARCLAY OVERVIEW


Barclays Bank is a British multinational universal bank, headquartered in London, England. Barclays operates as two divisions, Barclays UK and Barclays International, supported by a service company, Barclays Execution Services.

With 325 years of history and expertise in banking, Barclays operates in over 50
countries and employs approximately 135,000 people.
Barclays is driven by its Purpose and Values, drawing on its heritage and the core essence
of the brand. Its Purpose is to help people achieve their ambitions – in the right way,
and its values are Respect, Integrity, Service, Excellence and Stewardship


CONTEXT


The banking sector is keen to develop new methods and embracing change through digital innovation to improve consumer user experience. Ranging from powerful mobile applications, native web apps to powerful in-store experiences through Kiosk.

The global banking sector recently suffered from low-interest saving rates, therefore, require innovative solutions to encourage savers back into the market and save money.


Redesign Barclay Banking App - UX Casestudy

MY ROLE

– Product Design
– UI Design
– UX Researcher
– Market Research

TOOL USED

– Adobe XD
– Adobe Indesign
– Adobe Premiere
– Atomic Deisgn
– Google Form
– Paper & pen

MY RESPONSIBILITIES

  • Design end-to-end journey that solves user and business pain points

  • Conceptualized a comprehensive product design strategy

  • Developed Design System, Design Rules, Handoff Standard

  • Created interactive wireframes, high level designs and other artefacts to share with stakeholders and test with customers

  • Defining design strategy

  • Taking care of most visual effect and UI screens.

METHODOLOGY

User Center Design Approach

The global banking sector recently suffered from low-interest saving rates, therefore, require innovative solutions to encourage savers back into the market and save money

UX Research & Analysis

Some common elements of written reports include headings to indicate topics and help the

Customer journey & Persona

We are using UCD methodology, every step is working closely to customers to understand

Atomic Design System

We are using UCD methodology, every step is working closely to customers to understand

DESIGN GOAL

DEVELOP UX SAVING PRODUCTS

The global banking sector recently suffered from low-interest saving rates,
therefore, require innovative solutions to encourage savers back into the market and save money.

Project Goal

DEVELOPE UX FOR 4 SAVING PRODUCTS BELOW

Retirement Product

Encouraging the target demographic to initiate a retire product

Booking Insurance

Some common elements of written reports include headings to

Saving Goals

Encouraging millenials saving for goals.

Saving Vault

Encouraging youngster savers.

Redesign Barclay Banking App - UX Casestudy

Research Finding

Current Market: Saving Products

The hardest part of the UX is not selling certain services,, but to educate non-user to know and comprehend clearly about the
products. Customer Journey map give us adeep insight of their journey, in order to figure out where are the touch points that we can reach

Redesign Barclay Banking App - UX Casestudy



Current Design: Identify Problems

To identify current problems with the app. We conduct research on both sides from the organization to our customer

Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy

In depth interview with front line staffs (Bank teller, call center, customer services and marketing). Review customer online feedback survey 
Conduct usability testing and field study with current customers

Integrate with many payment services

Customers can purchase almost any financial product.

Affordance is unclear ​

Customers could not know the total money they have when they look at account management

Multiple products to choose from

Outdated UI and style

Too many words

Low-level scanability 

Customer Goal

The hardest part of the UX is not selling certain services, but educating non-user to know and comprehend clearly about the products. Customer Journey map give us a deep insight into their journey, in order to figure out where are the touchpoints that we can reach

​How much money I have?

Accounts management is essential transaction in daily basis of user. Our design goal is to make users feel confidence when it comes to their portfolio management.
 

I need to pay / I have to book

This is second most common activity, and the most emotionally invested. Carefully design UI that employs behavioral science can create better decisions for risky transactions.

I need assistance

Some of the customer’s core frustrations are seen during their in-store experiences, being unimpressed with busy and un-interested floor staff as well as poor changeroom assistance and availability.

It better be worth the space

Customers are protective of their storage space and regularly cull apps they don’t use often.
Understand what is important to them in an app experience.

I dont know anything about saving

Whether exploring new products or looking for something specific, product browsing is the key goal of any shopping experience, and as such it must be well thought-out

Finding what’s right for me

With a myriad of products and customer archetypes, department store customers still need to feel like they belong and can find what they’re after with ease.

Customer Personas

Customer Journey Map

The hardest part of the UX is not selling certain services,, but to educate non-user to know and comprehend clearly about the
products. Customer Journey map give us adeep insight of their journey, in order to figure out where are the touch points that we can reach

Redesign Barclay Banking App - UX Casestudy

UX IMPLEMENTATIONS

Solution Direction

Optimize the user journey

from the moment of onboarding to when they see the 4 main products.

Improve visual elements

Improve, invoke customer engagement by visual approach instead of long boring page of wording.

Great support

Improve, invoke customer engagement by visual approach instead of long boring page of wording.

Banking First

Frequent banking tasks should always treat as the top priorities .

Redesign Barclay Banking App - UX Casestudy

Break It Down

In order to bring the greatest result, the whole app should be reconstructed and re-apply its branding visual.

Information Architecture

Homepage is a quick place for users to access and sort out their banking problems. This leads to the most important banking features that should be placed on the Homepage including Account Details, Card Details, History, Analytics, Profile, Search, Help..
In the meanwhile, Barclay products is a new tab to showcase different banking products, encourage them to use it in near future: Current Account, Credit, Saving Goals, Vaul, Pension….

Redesign Barclay Banking App - UX Casestudy

Site Map

There are too many tabs on the current Barclay app version that caused confusion to users. The new site map has only 4 tabs, which are: Home, Payment, Product Management, and Setting.

Redesign Barclay Banking App - UX Casestudy

1. Reconstruct Homepage

Redesign Barclay Banking App - UX Casestudy

Problem:How much money do I have? I need to manage my portfolio? Blue is everywhere, which one is a button? Where is…?

Solution: Easy to know the money and latest transaction, less frequent functions are moved up since it’s not a frequent banking task
Re-applied UI for a clean interface
Used visual assists storytelling instead of just wording.
Quick help assistant to assist users on every move

2. Smart Help Assistant

Redesign Barclay Banking App - UX Casestudy

Problem:Too long, don’t read, too much wording..I want to call the CC, where is the phone number? So what can I do here? What’s the News in Help Task? Why does it on top of the screen

Solution: Easy to know the money and latest transaction, less frequent functions are moved up since it’s not a frequent banking task
Re-applied UI for a clean interface
Used visual assists storytelling instead of just wording.
Quick help assistant to assist users on every move

3. Highlight Saving Products

Problem:How can we encourage users to save more? Where are saving products? Why should users save? How should users save?

Solution: The most important account is on top of the screen.
There a new tab: Your Financial Plan to educate users and encourages users to save more
One short ad message helps banks to communicate with users, giving appealing deals
Used visual assists storytelling instead of just wording.
Invoke users by giving empty slots so users will urge to fill them up

Redesign Barclay Banking App - UX Casestudy

The tactic here is using HUMAN PSYCHOLOGY:
– Force users to see, hear, aware of the benefits of saving, pension products
– Tempting users with appealing advertising from bank
– Teach users the benefits of the saving with “Your Financial Plan” tab
– Invoke users by giving empty slots so users will urge to fill them up

Redesign Barclay Banking App - UX Casestudy

4. Implement 4 products

Redesign Barclay Banking App - UX Casestudy

Besides optimizing the user flow from before using the product, the afterward flow is also developed to close the deal with our beloved customers. The saving, pension, and insurance products might sound totally different at first, however they actually share the same flows of educating users and getting them onboard:

Step 1: Walkthrough pages to introduce briefly about different products inside.
Step 2: Show different options with clean design and clear visual
Step 3: Follow up, reminds them of thei purchased products..

Design Principle

We laid down some principles based on UX research findings and data analysis,
based on which we structured the entire redesign.

One action per screen

Allow users to consume information seamlessly.

Don’t make me think

Make it easy to understand.

Design for scanability

Highlight key actions support scanning.

Highlight key actions

The most important account must standout. Easy to see, easy to access

Clear Navigation

Reduced the navigation tabs to focus on the most important products.

Visual supports description

Using visual assisting storytelling, reduce the time of reading long text.

Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy
Redesign Barclay Banking App - UX Casestudy

UI Design & Prototype

Designing a flexible set of steps that can capture the amount of data the user feels comfortable submitting—prioritising name, email and password fields—while leaving the door ajar for a customer to skip at any time.

Video Product Introduction

A short 30s video on introducing the redesign UI with 4 featured major UX-improved products: Retirement Product, Saving Vault, Saving Goals & Booking Insurance.