We created a modular illustration system for MKB Bank
In this broad range project we created a modular illustration system which is used in MKB Bank's different digital products, websites and presentations.
MKB is one of Hungary’s biggest banks, so it was an honor to work together with their in-house team, MKB Fintechlab on the design of their mobile application. They commisioned us to create a modular illustration system for the application, but the project soon grew from there, and we developed a set of illustrations which are easily applicable throughout their website as well as their entire brand.
We created a diverse set of elements and characters, and a set of simple design guidelines, making it super easy to create endless scene possibilities. The overall look and feel reflects MKB’s core brand, but adds some flair and imagination, making it easier for end users to connect to MKB on a new, emotional and empathic level as well.
It was a top priority to create a not too complex and highly scalable illustration system which truly reflects our partner's professional values and can be used in a wide variety.
The first step was to redesign an existing character, MKB’s smart assistant “Alfred”. We used simple geometric shapes to create the body and the head, and once we were satisfied with the basic shapes, we iterated them to create more characters to diversify the MKB illustration set. An important aspect when creating the characters was to be able to animate them easily if need be. So the decision to use simple shapes was not just design-driven, but arose out of the careful analysis of all possible use cases.
The same principles were applied to the design of the character’s faces as was to their bodies - simple, geometric shapes for a friendly and modular design.
In order to create numerous compositions, we designed over 50 elements and incorporated them into the characters’ visual world. We also set guidelines how to design more elements if the exisiting ones don’t fulfill the needs of the bank in the future. Since the illustrations ended up being used not only in the mobile application, but MKB’s website as well, we set rules on how to simplify or add detail to the scenes based on their sizes (ie.: facial features).
In order to create numerous compositions, we designed over 50 elements and incorporated them into the characters’ visual world. We also set guidelines how to design more elements if the exisiting ones don’t fulfill the needs of the bank in the future. Since the illustrations ended up being used not only in the mobile application, but MKB’s website as well, we set rules on how to simplify or add detail to the scenes based on their sizes.
In addition to the basic scenery elements, we created a set of large hands that interact with the characters and help guide them in their shenanigans, much like how MKB assists their clients throughout their financial journey. The hands and characters can be used on their own, but when used together, the hand should look sort of like that of a giant.
The end result is an easily adjustable, dynamic and fun modular illustration system. Stylistically it is quite minimal and sleek, making it a perfect bonus next to any otherwise boring or cumbersome text.
Incoprorating the illustrations into the “Dark mode” theme of the mobile application was an interesting problem to solve. We followed the Material Design Guidelines for translating the hues, colors and strokes over to a dark-mode friendly version.
UX research, UX consultancy & youth banking strategy for the bank regarding an app targeting teenagers with non-banking functions.
Targeting customers with personalised investment offers through a customer-friendly platform, backed by a learning algorithm & an AI-based engine.
