Barclays_Prototype_Design_01.jpg

Barclays

 

BARCLAYS

Banking not banking

Launching a customer-centric digital bank

 
 
Barclays_Prototype_Design_01.jpg
 

Role
UX/UI Design Director

Project type
Mobile app

Client
Publicis Sapient for Barclays US

Timeline
April 2018 - March 2019

 
 

Challenge

Design, build and launch a digital mobile-first bank in the US to stand out from the “sea of sameness”.

“Sea of sameness” most banking apps follow the same product design model

Objectives

  • Develop a profoundly unique and differentiated mobile app banking experience grounded on competitive and consumer research.

  • Help transform Barclays US as a leading, customer-centric organisation by delivering a unparalleled digital experience.

  • Utilise existing strategy and research into the bank’s potential customers, offerings, and functionality

  • Create working in collaboration/co-creation withkey bank stakeholders & Barclays customers

  • Incorporate thinking from other industries, customer research, and forward-looking concepts


Design approach

To achieve this the team took a 2 path approach

Product innovation

Develop strategies for setting Barclays apart. What key experiences / functionality can Barclays create that moves past parity? What can be incorporated in a Day 1 launch, and how does everything else get incorporated into subsequent updates.

Product optimisation

Nail the basics including how the four product experiences can be as frictionless as possible to a user


 
 

Product innovation

Discovery Workshop

The initial immersion phase of design surfaced three interaction concept models: Conversation Starters, Mosaic Map, & Storybook. Each concept had its own approach to providing valuable insights into a consumer’s finances.

Barclays_Phase_1_Concepts.jpg
 
 
 

Sketch concept

After a collaboration session with the client, the “Mosaic Map” interaction concept model was chosen. Responding to the challenge of ‘banking not banking’ the design team began the design iteration process, starting with a series of paper prototypes.

Barclays_Paper_Prototypes.png
 
 
 

Hi-fidelity prototype

The paper design process proved to be inspirational and very productive, which lead to the creation of a high-fidelity interactive Framer prototype.

 
 

The mosaic map concept design was presented to the client and was well received. However, it didn’t pass the approval of Barclays CEO, who unknown to all, had a new design direction waiting for us.

 

 
 
 

Visual Metaphors

Design iteration
Based on a ‘well-being scaffolding financial risk model’ developed by Oxford Risk, the team was challenged to find “visual metaphors” with the purpose of enabling customers to easily understand their full financial landscape. Powered by emerging AI technology the app would automatically delegate day-to-day banking tasks and recommend ways to save & invest.

Barclays_Phase_2_Concepts.jpg
 
 
 

Three design squads were tasked with developing the financial well-being model into a fully functional digital product. Each model was based on a different visual metaphor that could enable a customer to see a full picture of their finances from immediate spending, and mid-term investment to long-term goals and gains.

 
 

Landscape

Initial ideas started with looking at customers financial landscapes. These designs were highly visual representations and very playful displays.

 
 
 

Telescope

This concept played on the idea of seeing near term spending and future event horizons seen through a telescopic concept.

 
 

Bridge

The concept of short, medium and long-term financial goals and ways to manage money was played out in the metaphor of stage gates.

Bridges between each were visualised to show how finances could be managed through shifting between each.


Product development

Through all the twists and turns of the design process, the client always maintained a ‘no regrets’ policy. This meant that if the final concept didn’t meet both business and consumer requirements, we’d have an optimised design ready to release.

 
 
Barclays_hero_Hres.jpg
 
 
 

The team focused the remainder of the engagement on a consumer banking app that provided the standard range of financial products & services including; app onboarding, checking account, check deposits, credit card details, customer support, and cross-sell functionality.

Barclays_Designs_Final.jpg
 
 

Design system

I worked close with the design team to create a robust design library housed and maintained in Sketch.

Barclays_System_Design.jpg
 
 

Project responsibilities

Discovery workshops | Stakeholder management | Design team management | Design system management | Resourcing | Design direction | Concept creation | Wireframing | Design reviews and presentations