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.
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
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.
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, DesignDesign 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:
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.
Component library
Rollout plan
We were able to ship frequently and fast, while gathering user feedbacks and iterating on them.
The results
Business direction
We future-proofed the new app for key banking features launching in the next 2 years.
Future-proofed app
Redesign well received by user base
Indispensable for Series A funding
Payment squad delivery
We delivered a vast amount of must have features.
Tripled active users in 8 months.
New payment functionalities delighted the user base.
Team organisation & Processes
The design team efficiency improved through the UX design process, contributing to regular collaboration between developers and designers.
Knowledge sharing greatly improved.
Developers felt more engaged and contributed to the design process
Component library and design system
The team praised the work done.
Less time spent pixel pushing on both side.
Teams delivered features on times with higher front end quality.
Improved design speed, development speed and consistency.
Better new joiner onboarding due to extensive documentation.
Improved devs way of working.
Following my departure the company successfully raised a series A funding and obtained their banking licence.
