Daily Banking Solutions
Making Commerzbank Daily Banking More Accessible and Understandable
Role
UI / UX and Accessibility
timeline
January 2024 – February 2026
The challenge
Various online banking platforms still suffer from fragmented user experiences, inconsistent financial overviews, and inefficient transaction management flows, creating frustration for both end users and internal branch staff. Existing systems often lack visual and functional consistency between finance overview and transaction overview interfaces, while important user-centered features remain difficult to access or entirely absent. Based on real user data and operational feedback from both customers and branch-side administrators, this project aimed to improve usability, strengthen interface consistency, and introduce more intuitive and efficient functionalities within the Commerzbank online banking experience.
Status quo
Online banking is now the default in Germany —
but branches are closing faster than support can follow.
That leaves a real service gap for older users and anyone who still relies on in-person banking.
Adoption
Online banking in Germany has reached a new high
Source: Bitkom press releases, 2023–2025. Base: people in Germany aged 16+
Channels
The smartphone has become the main banking channel
Source: Postbank Digital Studie 2025. Coral marks the offline-reliant group.
Project goal
From complex banking screens to clear, accessible flows
Three pain points, three design directions.
The process
This project focused on improving the daily banking experience of Commerzbank by redesigning key flows such as the Finance Overview, Transaction Overview, and Überweisung. The goal was to enhance Barrierefreiheit, reduce UX complexity, and solve visual information overload by creating a clearer information hierarchy, more accessible interaction patterns, and a cleaner visual interface. The redesign helps users understand their financial status, review transactions, and complete transfers with greater clarity, confidence, and ease.
I worked on daily banking flows for Commerzbank, focusing on transaction overview, finance overview, transfer flows, and accessibility-oriented UI patterns. My contribution included information architecture, interface refinement, component documentation, and visual consistency across key banking touchpoints.
Accessibility
Yellow is for everyone.
Commerzbank's signature yellow is hard to read on white. The redesign keeps the brand colour, but never lets it carry meaning on its own — every signal pairs with an icon, label, or shape, and components are tuned to clear WCAG AA.
Never colour alone
Actions and statuses pair colour with an icon or label, so meaning survives for colour-blind users.
Contrast that clears AA
Components were re-tuned to beat WCAG AA — 4.5:1 for text, 3:1 for graphics.
Errors say more than red
Error states combine a thicker border, an icon, and a written message — never colour alone.
Focus you can see
Every interactive element gets a high-contrast focus ring for keyboard navigation.
Complex screens, made clear
The Daily Banking information architecture was redesigned to create a clearer and more accessible experience across Finance Overview, Transaction Overview, and SEPA / International Transfer. The main banking flows were restructured and redesigned recurring interface components to better support accessibility, readability, and task completion in line with BFSG-oriented design expectations.
The redesign reduces information overload by prioritizing key financial information, creating a clearer visual hierarchy, and organizing complex banking content into more manageable sections. For the transfer experience, complex SEPA and international transfer steps were transformed into a guided flow with clearer labels, input fields, review states, and feedback, helping users complete transfers with greater ease, confidence, and accuracy.
Two of the heaviest flows — the multibank finance overview and the transaction detail view — were rebuilt around one goal: surface what matters, defer the rest, and never lean on colour alone.
Finance Overview
Desktop · multibanking
Before (left) · after (right)
Collapsible groups
One long flat list became labelled groups — products, other banks, excluded — each with a count, a subtotal, and a collapse toggle.
Status you can read
A coloured dot plus a long helper sentence became a dot plus a short label: blocked, locked, deleted, not current.
Controls in one place
Search, export and view moved into a single toolbar, joined by an add-account action and a contextual help banner.
Transaction Overview
Mobile · detail view
Before (left) · after (right)
Essentials first
The detail view leads with four fields — booking date, value date, reference, type — instead of a ten-field technical dump.
Technical detail, deferred
IBAN, BIC, the end-to-end reference and the SEPA transaction ID no longer front the summary.
Actions stay close
Export, re-transfer and standing order remain one tap away at the foot of the screen.
The same system, at the terminal.
The accessibility style guide carried straight onto the physical bank terminal — read at arm's length, in changing light, often in a hurry. Colour, typography, and table styling were refined further to keep every screen legible.
Colour
Functional colour carries meaning, never alone: green for credits, red for sign-out, and a yellow primary action paired with an icon.
Typography
Gotham at a larger, higher-contrast scale, with a clear hierarchy tuned for arm's-length reading.
Table style
The transaction table was rebuilt for scanning: aligned columns, right-aligned amounts, clear row separation, and a per-row detail control.
Closing reflections
The redesign reorganised a sprawling finance overview into four collapsible groups, cut the transaction detail from ten fields to four, and brought every core component to WCAG 2.1 AA — with a single status and error pattern shared from the app through to the physical terminal.
It also changed how I work. Designing accessible-by-default proved clearer for everyone, not just impaired users; the hardest banking-UX decisions were about what to defer rather than what to add; and the design system only earned its keep once it was genuinely reused across touchpoints.
