Becoming a bank
Case study
•
2021
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, DesignDesign 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
Reviewing the app
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
Landscape analysis
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.
Scaling up
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:
Final IA
We ideated through collaborative workshops between Designers, Project Managers, Dev leads and Stakeholders.
Validating the hypotheses
After multiple iterations of design and usability testing, 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.
After thorough iteration and testing loops we were confident our original hypothesis was validated.
Strategic delivery
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.
