We created a modular illustration system for MKB Bank

Ilustration
Branding

In this broad range project we created a modular illustration system which is used in MKB Bank's different digital products, websites and presentations.

Our involvement

Illustration, Branding

Deliverables

Illustration system

Let's work together!

Contact us!

The challenge

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.

Our solution

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.

Duo-tone approach

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.

Colors:
Strokes:
Patterns:
#F8D3D9
Basic 1pt
#B01C33
Dashed 1pt
#000000
#F2F4F8

Starting with the basics

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.

Body and Face Construction

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.

Composing a scene

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).

EXAMPLE SCENES: LARGE
EXAMPLE SCENES: SMALL

50+ elements

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.

“Helping Hand” set

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 visual world of online finance

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.

Dark mode

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.

More work

Ecomate

Green banking app for financial and environmental consciousness.

Intesa Sanpaolo

Hassle-free investment experience for millennials.

MKB Bank

Modular illustration library and facelifted branding.

Have a project for us?

Estimate now
Close icon grey
Having an award-winning idea in mind already? Looking for help to figure out the initial concept? Either way, let us know!
Please fill in the form to contact us...
By sending this message you agree with our Privacy Policy.
Thank you for your interest, it's much appreciated! We will get back to you as soon as possible!
Oops! Something went wrong while submitting the form.
Not a form-person? Simply write an email.
hello@ffnext.io
Copied:)