Deutsche Kreditbank

The new digital banking experience for one of the top online banks in germany

DKB, the second biggest direct bank in Germany with over 5 million customers, faced stiff competition from a growing number of neo banks, providing a top-notch user experience.
The bank embarked on a significant digital overhaul to stay ahead of the game, and I had the privilege of leading the design efforts for their banking applications.
To ensure consistency across all of DKB's digital products, my team and I created a design system in collaboration with the product teams using it. This included developing a unique illustration style that captured the essence of DKB's brand identity.
Role
Senior UI/UX Designer
Team
20+
Platform
iOS, Android, Desktop
Industry
Finance
Time
3 years

This project is partially confidential

A few designs are hidden from the public version of this site, as they include unreleased concepts. If you want complete access feel free to drop me an e-mail :)

From old to new

A lot has changed in the banking world and new players storm the market with top-notch usability as their selling point. To stay ahead of the game DKB founded their daughter firm COFA to rebuild their banking systems from scratch.

The perfect fit for your individual financial portfolio

DKB customers have diverse product portfolios including checking and savings accounts, credit cards, loans, and brokerage accounts.

To cater to this variety, I devised a dynamic homepage that adjusts the level of information displayed based on the number of products the user possesses. Users with a single account can view their transactions instantly, while users with multiple accounts will see a list of their accounts first.

Direct transfer from your main account

Given that transferring funds is the second most frequently used feature in the app, I made sure to prominently display the transfer button on every variation of the homepage, regardless of the number of accounts a user has.

Visualized developments of your investments

We had significant opportunities to enhance the broker, and now users have instant access to an interactive visualization of their investment's development.

The design system behind the product

As a major digital bank, DKB generates numerous web pages, necessitating a reliable system to ensure consistency across all future sites. Stella the new design system addresses these needs, providing components for iOS, Android, and React.

Principle 1

Trust

Trust in digital products has great influence on the trust in a company. We want to ensure that our users feel safe and trust the bank with their finances and sensitive data.
Principle 2

Empathy

Humanization of technology – Our products are used by a wide variety of users. By making sure we find and validate our actual users need we design with empathy. Thus achieving a better adaptability of our digital products from our different customer types.
Principle 3

Sustainability

We take responsibility for our actions and care about sustainable development. As one of the biggest investor in renewable energy we want to inform our users about our commitment to social and environmental issues within our digital products.

Documentation

DKB has 5 internal design teams dedicated to digital products, in addition to external agencies creating websites for the bank, which makes it easy for things to get a bit chaotic. To prevent this from happening, we extensively documented our guidelines and sought feedback from designers using it.

The color system

To ensure we selected the appropriate colors for our products, I devised a systematic approach using two color tables: a base color table containing all available colors for designers to choose from, and a semantic color table linking color values to names that reflect their intended use.

The base colors

The initial table outlines all available colors for designers to select from, with each hue offered in varying levels of darkness and transparency. This approach allows for simple color adjustments, such as changing an element's color from red to green, while maintaining the same contrast ratio.

The semantic colors

This table serves as a link between development and design. Here, we assign base colors to specific use cases within our products and provide them with descriptive names that can be easily understood by both designers and developers.

This ensures consistency, makes later changes easier and eliminates the need to hardcode colors for each of our software languages.

Creating a scalable illustration library

I developed an illustration library that any designer can contribute to. Similar to our design system, the illustrations are constructed using reusable components, enabling new designers to create new illustrations while maintaining the overall style.

How did we get there? Together!

Design is no longer a solitary pursuit of a lone genius in a dark basement. It's a team sport! We get the best results when we bring together the brightest minds and collaborate from the get-go. That's why I organized and facilitated design workshops and sprints, depending on the feature's impact. I brought in everyone with valuable knowledge and different perspectives, from researchers and product owners to developers and financial specialists. Together, we come up with two or three basic prototypes that we put to the test with our users. We take their feedback, iterate, and refine until we've got a design that serves as a solid foundation for the next steps.

Test and refine and test and refine and...

When we created the concepts, we noted down our wild assumptions and highlight the areas where we're unsure. Then we put our prototypes to the test with our users to see if our hunches were correct or if we've missed anything crucial. We do this over and over until we're absolutely positive that our solutions are top-notch and truly meet our users' needs. By doing so, we uncovered potential pitfalls and gained insights that helped us refine the designs.

Communication with the team

As this project involved a lot of people, clear communication was key. I created a variety of artifacts to convey research findings and design concepts.

What the team says

Vince Smithers

iOS-Developer

Andi is an excellent designer, who is easy to work with and cares a lot about the end result. He is always open to developer feedback which makes him great to work with and makes my job easier. I especially enjoyed the collaboration on the SEPA transfer feature and the result is a very well-designed part of the app.

Fabian Engelbach

Product Owner

In close cooperation with our user research team, he analyzed all new features in detail and achieved the best possible result for our customers. During the development he was always approachable for our developers and could therefore help to implement our new features quickly. Personally, I enjoyed working with him and I am convinced that Andi will continue to shape digital products in his future positions.

Portrait of Anita Popovic
Anita Popović

Design Manager DKB

Andi's ability to maintain consistency and coherency in design language across banking products is also commendable. He ensured that the user experience is seamless across multiple touch-points, which helped to build trust and loyalty among our customers.

What the users say

Special thanks to:

Alexander Nehls • Julian Dorn • Thies Grüning
Fabian Engelbach • Benjamin Salanki • Lissy Bonness
Elisa Litty • Anita Popovic

Social

Contact