To support Bankhaus Metzler's modern brand refresh, Sensory-Minds rebuilt the bank's website around human needs rather than financial products – pairing an intuitive navigation model with a modular digital design system.
Metzler is one of the oldest private banks in Germany. Its website, however, was structured the way the bank was organized: by product. Visitors had to know the name of a service before they could find it – and had to translate their own situation into the institution's vocabulary. What was missing was not information. It was a way in.
At the same time, a progressive new corporate design approach had been developed by Metzler’s brand agency: quieter, more confident, more human. It existed on paper. Our task was to make it work in a browser – responsive, accessible, maintainable, and consistent across every template the bank would ever need. Two challenges, one project: rethink the structure, and build the design a system it could live in.
"True customer centricity is about more than just listening to our clients. It is about anticipating their unspoken needs and creating digital experiences that earn their trust every single day. The client is not merely at the center of everything we do; they are the uncompromising benchmark of our success."
Prof. Wolfgang Henseler – Chairman, Sensory-Minds GmbH
The Process
We started with the people, not the portfolio. Workshops, analytics and a review of the existing structure showed us what visitors actually arrive with: a question, a life situation, a decision to make. From those patterns we built a needs-based information architecture – entry points that describe a situation rather than a product, with the bank's services attached behind them.
In parallel, we took the new corporate design developed by human unlimited and turned it into a digital design system: type scale, spacing, motion, states, components. On colour world, icons and imagery we exchanged with Die Visionäre. Every element was defined once and reused everywhere, so the brand stays consistent as the site grows – and so the team can publish new content without asking a designer for permission.
Our Solution
A website that starts with the visitor's need and answers it in Metzler's voice. A modular design system carries the new corporate identity across every page, a headless backend gives the editorial team full control, and a lean, accessible frontend makes the whole thing fast on any device. New, without being hard to use – for visitors or for the people who maintain it.
Metzler’s new visual language was translated into a responsive digital design system.
Every page is assembled from the same component library, so the brand stays consistent and the team stays fast.
Needs-based entry points replace the old product logic – visitors start with their situation, not our vocabulary.
A headless backend gives Metzler's editorial team full control over content – without touching a line of code.
Human-Centered Design
The old site was sorted by what the bank sells. The new one is sorted by what people arrive with.
EVERYTHING NEW, NOTHING TO RELEARN
A complete redesign that feels familiar on the first visit. Change the visitors never have to think about.
One design, one system
The new corporate design rebuilt as reusable components – consistent by construction, not by review.
Needs-based navigation
Entry points describe situations, not products. The portfolio sits behind the question, where it belongs.
Built by one team
Concept, design and development in one hand. No handover losses between the idea and the running site.
Editorial freedom
A headless CMS with modular content blocks. New pages in minutes, without a developer in the loop.
Accessible by default
Contrast, focus states, semantics and keyboard navigation designed in from the start – not audited in at the end.
Ready for what's next
A system, not a snapshot. Every new page, campaign and product finds its place without a redesign.
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp))
:format(webp):focal(504x258:505x259))