Becoming a bank

Case study

The situation

B-social was a social app paired with a debit card that helped split bills with friends and family.

It was to be rebranded to Kroo and become a challenger bank. It aimed to be different, a social bank for everyone with an accent on green features.

The main business objectives were to acquire a banking license with the Bank of England and raise a series A funding.

The team and product had to evolve.

My role

Design Lead

I was leading and building the design function during the business transition and was part of the Payment squad.

I worked directly and collaborated with the CPO, Head of product and Project managers while taking care of the design strategy.

The Challenges

􀊋

Business transition

The business was transitioning from B-Social, an application focused on split bill sharing using a debit card, to a fully-fledged banking app that was about to be rebranded to Kroo.

􀈐

Redesign

The product had to be rethought and redesigned to accommodate the new business direction.

􀝊

Team organisation

We had to reshuffle the product team into squads and hire new designers among extensive planning.

Sketch

Sketch was crippled with bugs and lags. I had to move the whole product team to Figma

􀙒

No component library nor design system

The product team didn’t use a component base library and there was no proper design system in place either.

􀞟

Two main issues to address

The team organisation and its processes

Scaling the app to a fully featured banking app

Organisation and processes

􀙠

Team Organisation

We had to build a robust way of working inside the product team to deliver effectively the business transition.

The developers were separated into 3 squads containing a Project manager, tech lead, and Designer. We needed to hire 2 more designers to fill the remaining squads.

􀉘

Process setup

I put in place a design process to deliver work in an efficient manner with a particular focus on the handover and collaboration with the developer.

That was one of the main gap and bottleneck on the product team. The effort had to be done on the Design side as we had a service redesign to do and a component library to build with the devs, 2 consequential and intricate task.

Design thinking process

with an hypothesis driven approach.

Research & Understand (HMW)
Ideate > Test > Validate or Iterate
Document & handover
Collect user feedback and reflect

Dev collaboration, handover and QA process

Kick off meeting:
PM, Dev, Design
Design spec
Components library
Animations & micro interactions
Halfway catch-up
Final Review & Iteration

Scaling the app

We first had to understand the business ambition and needs to become a bank.

*Most phases included user testing

UX audit

While doing a UX audit I discovered very early on, among other UX and UI issues, that the current Information Architecture would not sustain the user needs and upcoming features.

We had to rethink the current service from the ground up.
With the 2 new designers, we started with a Research phase, including the creation of the current information architecture as there wasn’t one defined.

Current B-social Information Architecture

IA can’t accomodate upcoming features

Interbank payment

Standing Order, Direct Debits,
Outbound payments

Account management

Switching, close account,
change address

Open APIs

Open banking

Social

Kitty, request money,
Lend

Card payments

Request

Choose from multi card

Insight

Budget, analytics

Ethical

Carbon offset

Pots

Shared, charity

Security

Confirmation of payee,
3D secure

Overdrafts / Loans

Research

I conducted user research with our user base to identify “must have” and “nice to have” functionalities.

I also researched thoroughly our competitors (direct, indirect, challenger, traditional), defined there IA, user flows, UJ mapping, mental models and crossed referenced the whole data set.

User research

Competitor research

􀥄

The competitive landscape became clear. We gained valuable insights into "must have" features, common UX and information architecture patterns.

Ideation

Following the research we gathered all the business requirements.

New information architecture

The goal was to create a future-proof Information Architecture that’s purely hierarchical and object-oriented, not influenced by current screens or wireframes.

The fundamental pillars of the bank were also to be implemented throughout the app:

􂔁

Banking functionalities

􀝊

Social finances

􀵴

Social consciousness

Final IA

􀵋

We ideated through collaborative workshops between Designers, Project Managers, Dev leads and Stakeholders.

Iterate & finalise

After many iteration we settled on the IA above, an initial hypothesis that would be tested and refined further.

We collaboratively worked on the new UX with some Lofi Wireframes and prototypes and worked on new UX patterns.

Lofi wireframe

App Mapping

High fidelity wireframes

We progressed to work on Hi-fi wireframes and prototypes.
This step had to be informed with the business and marketing team as we had to incorporate the new branding.

The whole process took 2-3 months.

􁣛

After thorough iteration and testing loops we were confident our original hypothesis was validated.

Plan & Deliver

The new IA and its UX had been validated. The new UI was defined enough so we could start delivering the changes.

A lot had to be delivered and we needed to coordinate with the devs but also the business to layout the steps to transition to this new IA.

Transition squad

Deliver final design for new IA alongside BAU tasks.

Account squad

Onboarding, tree referrals, card management.

Payment squad

My responsibility

New payment functionalities, Outbound, Open Banking, confirmation of payee, contact management, transaction details, spending insights, payment requests

Design system & Component library

My responsibility

Create a design system for the new UI to support each squad and collaborate
with Lead Devs to develop the component library (react native) and plan a smooth rollout.