Backbase

Designing a configurable end to end payment accelerator

Backbase helps banks worldwide with their digital transformation — using their out-of-the-box digital banking solutions optimized for retail banking, commercial banking, wealth management and insurance-specific scenarios. With offices in almost every continent, Backbase is a key player in the fin-tech industry, powering over 120+ financial institutions all over the world.

Sector Finance

Industry Small business

Year 2019-2020

My role

I was recruited to help Backbase realise their mobile vision and teach the organisations 35+ designers on how to think, tackle and design for mobile apps. I was placed in the Business Banking team where I mentored, taught and collaborated with other designers. My main focus was designing their small business payments solution.

Deliverables

  • Customer journeys
  • User flows & assets
  • Prototypes
  • Design system
  • Motion design

Activities

  • Sprint planning
  • Mobile design workshops
  • Co-design sessions
  • Design critiques
  • User testing

Who we designed for

Freelancer

Often working across multiple projects and meetings daily. Doesn't want to be burdened by an arduous payment process — make it magical and simple, so it's as easy as sending an email.

Small business owner

Constantly on the go, often multi tasking throughout the day. Interested in being able to make, schedule and manage payments for their business easily without having to dedicate a lot of time to the process.

Accounts payable

Manages a team or multiple accounts. Has to be able to create, approve and track the status of their payments. Needs a swift and simple experience to efficiently manage their accounts and fix issues quickly.

Making sense of the space

Payments across different regions

Catering for different payment types, we needed to understand each and every one of them. We used Miro to map the regions, payment types, required & optional information to understand the different requirements and combinations we’d have to support.

Real world insights

Together with our research team, we spent hours talking to users and transcribing those interviews to gain better understanding of how people think when it comes to payments. Speaking to a diverse pool of users allowed us to better empathise with their struggles and needs.

Establishing a baseline

Alongside that effort, we also started a competitor analysis library. We collected screenshots, recorded videos of their flows and annotated areas of interest to help us better design a solution that was intuitive, competitive and exceeded that market baseline.

Listen, Design & Test

Forming a blueprint

Leveraging our research, interviews and competitor analysis, we started to breakdown the different stages of a payment journey — which became the blueprint for our alpha solution.

Exchanging ideas

With blueprint in hand, we started sketching concepts for our UI to understand complexities, what would be possible, what wouldn't and what was unique.

Learning and growing together

Staying true to our blueprint, we designed an initial concept and got feedback from our teams, product owners and managers in our weekly design feedback sessions. These sessions allowed us to iterate quickly and get a better grasp of how banks dealt with payments. Without this feedback, we wouldn't have been able to get to an alpha as quickly as we did.

Validating our journey

Partnering with Allied Irish Bank (AIB), we flew to Dublin to test out this initial concept and get feedback from small business owners to ensure we were on track to deliver something truly useful.

Clearing a path forward

Payments hub

Dynamic fields

Transfer summary

No dead ends

Understanding feedback & grouping themes

Feedback received proved that we were on the right track, with room for improvement. Working alongside researchers, product owners & engineering teams, we evaluated feedback received and identified problem areas in the payments journey.

Iterate, iterate, iterate

We iterated on the critical and more time consuming areas first, determined to arrive at configurable and easy to understand solution for our users.

Designing for adaptation

With the more tricky areas wrapped up, we worked closely with our engineering teams to flesh out a more detailed flow and honed in on areas of our journey that would be more “dynamic / rule based”. Understanding how the tech powering our solution and mapping out the flows here really helped tweak our solution for the multiple markets we were going to serve.

Doubling down on testing

Applying our updated components and fleshed out flows, we conducted another round of testing. We received minor feedback that we were able to address and re-test a third time before wrapping up our testing efforts. To help speed up development efforts while we worked on the feedback received, we delivered detailed flows to engineering to ensure they had all happy and sad paths covered.

The breakthrough

Our payments capability impressed both management and tech teams in Standard Bank South Africa — they implemented our end to end journey in their SME app. The ability to use our flows & components out of the box, in addition to setting up rules and business logic for payment types using our configuration driven solution allowed them accelerate delivery of their payments capability.