Becoming a bank

Case study

The situation

B-social was a social app with a debit card for splitting bills with friends and family. It was rebranded as Kroo, a challenger bank focused on being a social, inclusive, and eco-friendly financial platform.

The main business objectives were to secure a banking licence from the Bank of England and raise Series A funding, requiring the team and product to evolve.

My role

Design Lead & strategy

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 software

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 ambitions 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

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


We 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

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

We also implemented the fundamental pillars of the bank throughout the app:

􂔁

Banking functionalities

Banking functionalities

􀝊

Social finances

Social finances

􀵴

Social consciousness

Social consciousness

Final IA

􀵋

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

Iterate & finalise

After multiple iterations, we agreed on the IA above as an initial hypothesis for further testing and refinement.

The new UX was developed collaboratively using lo-fi wireframes and prototypes.

The final hi-fi wireframes and prototypes were shared with the business and marketing teams to ensure the incorporation of the new branding.

  • Lofi wireframe
  • App Mapping
  • High fidelity wireframes
  • Lofi wireframe
  • App Mapping
  • High fidelity wireframes
  • Lofi wireframe
  • App Mapping
  • High fidelity wireframes

􁣛

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.

Component library

Rollout plan

􀐚

We were able to ship frequently and fast, while gathering user feedbacks and iterating on them.

The results

􁾪

Spearheaded business direction

We future-proofed the app for upcoming banking features, delivered a well-received redesign, and built towards the Series A funding.

􀛯

Enhanced product team efficiency

Enabled rapid delivery of key features, tripling active users in 8 months and new payment functionalities delighted users.

􀝊

Improved team organisation & processes

Team efficiency improved through a refined UX design process, fostering regular collaboration and knowledge sharing. Developers became more engaged and actively contributed to design.

􀐞

Component library and design system

The component library and design system were highly praised, reducing pixel pushing and enabling on-time, higher-quality feature delivery. Design and development collaboration, speed, consistency, and onboarding improved, along with developers’ workflows.

􀇺

A few months after my departure the company successfully raised a series A funding and obtained their banking licence.