made by zwoelf
HU EN
made by zwoelf
HU EN

Let's start a project!

Your name Please enter your name! (minimum 4 characters) We will be happy to get back to you within 24 hours.
Phone Please enter your phone number! You might prefer a phone call.
Email Please enter your email address! Or a quick response via email.
Message
  Sending...

words by zwoelf on identity and user interface design

The Making of the OTP Bank User Interface Style Guide

The Making of the OTP Bank User Interface Style Guide

The other day, working on the development of our portfolio, I was wondering what makes a project successful.

That it brought in a lot of money, that it was quick or that there were few conflicts? Only affecting small parts of projects, these factors are not important. I came to the conclusion that what really matters is that the product should create value. For this to happen, there should be a synergy between the interests of all participants of the project when creating the product.

This way it is not the people working on the project who can benefit the most from it, but those who use the product in the end. In case of OTP Bank this means a lot of people, hundreds of thousands of users per day.

Last year the online style guide of the largest commercial bank in Hungary was developed. Let us share this experience with you.

Why the need for a guide?

The UI team of made by zwoelf started working on some of the tasks related to the online visual identity of OTP Bank in mid-2015. In the early stages, we worked on 3 main projects:

All three projects were designed by a member of the same design team, but at a different time and place, which may be the reason why, even though we tried to create a uniform design, we ended up with a not perfectly unified look and feel.

We compared the designs of the projects and we found that they were similar in terms of image, typography and UI elements, but they were not unified.

Challenges

Differences were mostly the result of working on site. The bank manages these projects in war rooms, which is a highly effective method for dynamic development: all participants, from business, strategy, marketing, frontend/backend developers, UX design, UI design work on the same location, same room, even, throughout the project. This facilitates the flow of information: you don’t have to wait for emails, you just walk over to the person you need and discuss your problem.

This, however, also poses a problem for us, designers:

  • the lack of the usual, creative studio environment,
  • the team is dispersed, members are in different war rooms at different projects, and we can’t think together or ask for quick feedback.

The challenges above prompted the creation of a UI style guide. The online marketing and product development department at OTP Bank supported the creation of the guide, which is a definite plus.

Let’s take a look at our workflow.

UI sandbox

First of all, we created a virtual playground, a sandbox, so that we could gather the typical UI elements of the three completed interfaces, and juxtapose them for easy comparison.

As you can see the font is uniform, the size of the UI elements is almost uniform, but corner radius, font weight and tint are somewhat different.

Next we took a look at typography. We found that typographic hierarchy consists of different elements in the different projects. This discrepancy results in significant differences on UIs.

The card elements that comprise the UI were also significantly different. Corner radius, colour, drop shadow — these were all slightly different. These tiny discrepancies added up, though, resulting in a considerably less unified look.

Analysing the problems above, we devised a proposal about the ideal direction for the UI, but the decision was to be made together with the bank.

We sat down together and evaluated the existing UI interfaces, and based on that we defined the parameters of the direction to follow:

  • of the three completed UIs, it was Corporate account opening that was the farthest from the approved direction, and as a result, almost all of its elements were discarded.
  • The final direction is a mixture of the wealth planner and the retail personal loan interfaces, where the elements of the wealth planning interface are dominant.

Methodology: Atomic Style Guide

The system of the output was determined by the way we compared the UIs initially: first we took the screens into parts, breaking them down to the smallest elements, and used these to develop the final direction for the UI. It seemed obvious that the style guide should follow the logic and structure of Brad Frost’s Atomic webdesign.

In this method, UI is broken down to the smallest atoms: typography, buttons, basic UI elements, etc.

The next level is the molecular level, i.e. UI elements made up from several atoms. Such unit is, for example, a login box that consists of two input fields and a button.

Organisms are UI components composed of molecules. Following the logic above, this may be a card on the home page with a login box and a registration panel.

Organisms are arranged in templates, which are whole screens that are easy to reuse.

The recommended format of style guides created in this system is html+css blocks, which can also speed up the development process. According to the OTP Bank’s decision, first we developed an offline material that primarily helps the design process.

It was created in Sketch, as every OTP UI project is designed in Sketch. This way, in addition to the set of rules, an asset library was also created that designers can use easily with copy&paste in their day-to-day work.

OTP Bank Style guide pages: designed in A3 format for practical reasons, so it can be printed if necessary.

Some details of the Guide

We are not discussing the whole style guide here, but let’s describe some exciting details.

Basic rules

Before defining the atomic elements, we laid down basic UI/graphic rules. These include:

  • line styles, rounding system,
  • grid system, spacing system,
  • shadow system.

 

Corporate identity on the UI

Besides discussions with the bank, we also worked together on several issues with Café Communications, the corporate identity design agency of OTP Bank while creating the guide. Typical areas of cooperation:

  • typography: standardizing offline and online interfaces,
  • colours: defining the RGB code of the OTP UI green,
  • CTA buttons: for a unified UI, the buttons on the banners need to match the look of the sites.

Atoms: typography

As typography was unified, the appropriate focuses and a hierarchy within the pages evolved. We spent a lot of time searching for the appropriate font. The corporate font of OTP Bank is DIN Pro, and testing showed that it works well on UI as well. It seemed, for quite some time, that the whole online interface would use the font of the offline materials, but we finally switched to Source Sans Pro, because of a licensing problem.

Unfortunately, this means we do not have a unified online and offline typography. The free-to-use Google font we selected is great on screens. However, bolder weights “close” on low-res screens, so the Semibold (sometimes bold) weight is the boldest we use in the online visual identity.

Atoms: colours

We took the offline colours from the Corporate Identity Manual of OTP Bank, but additional, UI-specific colours were needed:

  • 3 grey tints had to be introduced,
  • accent and highlight colours had to be introduced,
  • the RGB code of the corporate green that works on the UI needed to be defined.

The corporate green of OTP was chosen as the primary action colour in an early phase of the UI design process. This means the primary brand colour is always present.

When defining the OTP Bank UI green, we tested many tints of the offline corporate colour. Moreover, since we are talking about screen colours, the type of display makes a lot of difference (TFT, IPS, AMOLED, OLED, etc.). Because of this, we collected several displays on which we could test the tints we selected.

Atoms: buttons

For buttons, de defined the different states, internal construction principles and, in case of CTA buttons, the hover and onclick states of several corporate colours. Here again, we handled and defined mobile versions separately.

We defined many more UI atoms: input types, data-specific inputs, mobile controls, icons, tabs, accordion, etc. We paid special attention to responsive UI elements.

Molecules

Once atoms were established, we defined a lot of molecules:

  • tables and tables on cards (mobile),
  • sliders/steppers,
  • popups,
  • Basic data, product cards, etc.

The style guide does not go beyond the level of molecules. We thought that there was no need to define larger structural units, as processes are rather varied. Since the new interfaces fit in the framework of the old website (footer, header), this decision can be justified.

Output

The first version of the style guide became effective in late May in 2016, after 3 months of work. The output is a 45-page document on which future extensions and updates can be based.

Currently there are several interfaces in the pipeline that are being designed according to the new system. One of them is already up and running: the retail account opening process.

Takeaway

A style guide is a must for large organisations that have parallel projects and want to have a unified online visual identity. The rules of a style guide are not set in stone. Naturally, abiding by the rules ensures uniformity, but as we can see it in our design work, a living style guide is always evolving, is always being refined and extended. With every new application, something is added.

When creating the OTP UI style, our aim was to create a design that is fresh, yet does not slavishly follow the most recent trends, one that can be used for at least 5–6 years without becoming outdated.

Time will tell if we have succeeded, but it is nice looking back on the design phase: every participant was working with the best interest of the users in mind, and I think this is the best kind of motivation in a UX/UI project.

Collaborators

made by zwoelf UI: Serfőző Péter — lead designer, Gerő Elektra, Bercsek Orsolya, Kovács Mónika, Csutorás Lajos — UI designer, 
Ergomania UX: dr. Rung András, Jankó Gergely, Tárkány-Kovács Balázs.

Papp Ildikó, Dolezsai Gergely, Kálosi Gergely (OTP), Kórusz Bea, Varga Gábor (Café Communications) Szalontai András (Flohr Design)

Péter Serfőző
Author: Péter Serfőző CEO, design lead

Ready to talk?

Start a project!