Summary
I designed the complete UX, UI and design system for a mobile banking app that Sopra Financial Technology offers to banks in Germany. One app brings everyday banking, investments, loans and insurance together, with an AI assistant at its core, and a token-based system lets each bank make it their own.
Context
Sopra Financial Technology builds banking software for the German market. The goal was a ready-made mobile banking product that banks could adopt under their own brand, instead of building an app from scratch.
The challenge
Banks split everyday banking, investments, loans and insurance across separate tools. We wanted one coherent experience that covers all of them, stays simple for everyday tasks, and can be rebranded for any bank without redesigning the product.
My role
I was the only designer on the project. I owned the end-to-end UX, the UI, and the design system, and worked daily with the PM, developers and testers from first concept through build and QA.
Key decisions
01 — The design system is the product
Because every bank needs its own look, I built the UI on tokens and variables from day one. Colours, type and modes are defined once, so switching brand or theme does not mean redrawing screens.
02 — Light and dark from the start
Both modes are part of the token system, not an afterthought. Every colour role has a light and a dark value.
Light mode
- Background#F9FAFB
- Surface#FFFFFF
- Primary text#000000
- Secondary text#5F7578
- Button & links#FF4F2F
- Button hover#E14226
- Input border#EAECF0
Dark mode
- Background#232929
- Surface#2D3434
- Primary text#FFFFFF
- Secondary text#8F9B9C
- Button & links#FF4F2F
- Button hover#E14226
- Input border#3B4242
03 — An AI assistant as a module
The team developed a new assistant module that answers questions about the user's own finances, for example yearly car maintenance costs, inside the banking flow.
