Hi all! I’m Dima Kuramshin, Director of Business Processes at AGIMA. Today I’ll tell you how we, together with the Finam team, came up with a unified visual style for all the holding’s products and created a UI Kit with a set of ready-made design solutions. How to seamlessly integrate a new style in a large company, why a design system is needed at all, and how it can become the foundation for business development – read the article.
Finam is the largest financial holding company in Russia. The company has many different digital products: from a bank to its own training center. But all these services did not have unity in design.
There are two main problems:
1. Different Finam products developed separately and in different ways: there was no unity of colors, fonts, buttons, shapes, etc.
2. When moving between products (services, websites, applications), users did not have the feeling that they were in a single ecosystem.
The longer Finam products developed in parallel, the less they resembled each other. At some point, two different branches of corporate style even emerged: with yellow elements and with orange ones. There were risks that in the end the products would become very visually different and cease to be recognizable.
To bring everything to one denominator and create a recognizable and relevant face for Finam, an outside view was needed. That’s how we got involved in the project.
Our common goal with the customer became the creation design systemswhich will unite all products with one style.
Getting your style in order
Our team did not have a goal to come up with something fundamentally new. Rather, we were cleaning out the closet, rethinking the “wardrobe” and creating a new unique Finam style. At the same time, it was necessary to maintain a balance between the visual trends of fintech and the uniqueness of the brand.
First, we turned to the company’s brand book and analyzed its existing design solutions.
Color
The main accent color of the services was orange. In the palette it is closer to red, so it seems aggressive and makes it difficult to go through positive scenarios. In addition, red is the color of the broker’s loss, and it is also traditionally used to display errors or critical actions.
In the end we came to the color yellow. But here, too, it was necessary to move carefully, because yellow is often used in branding, including in fintech.
Font
The new font had to be well suited for both websites and mobile applications. We chose Inter because of its variability and versatility. It is good for numbers, headings, subheadings, quotes and other texts. Inter was already used in some Finam products and was therefore familiar to users.
Bringing Finam products to a unified style
We developed several design concepts and, together with the customer, chose the best one, checked it, made changes and launched the redesign work.
We confirmed all our design solutions with data from end users. They helped us with this quantitative research and in-depth interviews that Finam conducted in its Customer Experience Laboratory.
New design We applied to five products:
-
“Finam.ru”;
-
“Finam-Bank”;
-
The educational center;
-
FinamBank mobile application;
-
selling landing pages.
“Finam.ru”
A single header has appeared on the main page of the Finam.ru service for navigating through all available products. For example, previously a client of Finam Bank may not have known that the company also has its own training center with a large range of courses for investors and traders.
Now, when a user switches between Finam products, he does not have the feeling that he is entering any separate services – he is constantly within the company’s unified ecosystem.
Mobile application of Finam Bank
The FinamBank mobile application is a service of the Finam investment holding for simple and convenient access to banking products and services.
Now, when a user switches between Finam products, he does not have the feeling that he is entering any separate services – he is constantly within the company’s unified ecosystem.
Mobile application of Finam Bank
The FinamBank mobile application is a service of the Finam investment holding for simple and convenient access to banking products and services.
We also brought the application design to a unified style, developed icons, banners and stories. We also created components that are used only in the mobile application: displaying the balance on the card, transfers and savings.
Training center “Finam”
These are face-to-face and online courses for beginners and experienced investors. We updated the main page of the LMS system, created the main page of the training center, developed a catalog and detailed pages for courses.
Landing page builder
Finam often launches landing pages for its products. For example, you need a page for a new training course with a photo of the teacher, training plan, reviews, etc., or you need to draw up an individual package of proposals for an investor – now it’s much easier to launch such pages.
To prevent the team from spending a lot of time creating landing pages, we developed a large system of blocks and components and placed them in the UI Kit (a set of ready-made solutions). We have provided all possible topics and tasks. We came up with a visual solution for each: fonts, colors, buttons and contrasting screens.
The result was more than 30 key blocks. We set the basic style of each of them, and Finam designers, based on these decisions, expanded the number of components and possible blocks.
Here is an example of a page assembled in the landing page builder:
What problems does the UI Kit solve?
-
Saves team time: no need to invent and create elements from scratch.
-
Simplifies layout approvals. What should this or that banner look like? How to position it? What color should I use? All this has already been solved in the UI Kit.
-
New team members don’t have to dive into the product for a long time.
Testing hypotheses, creating and launching individual pages and entire products has become much easier and faster.
Dmitry Kuramshin, Project Manager
“We’ve put a lot of work into creating this tool, and we’re confident it will be an indispensable tool for Finam’s talented designers. Our UI Kit not only helps unify visual communication with users, but also provides a wide arsenal of visual elements that blend harmoniously across different digital products.
We are confident that this will help the Finam teams continue to develop and create amazing and useful products at the forefront of the world of finance and technology.”
Creation of a design system
As a result, we have put together a set of rules that will help Finam teams maintain the unity of design of all digital products. It combined all aspects of digital design:
-
typography styles and color palettes;
-
the principle of constructing icons;
-
button components;
-
modular grid systems;
-
ready-made content blocks from which you can assemble pages and landing pages.
We have also prepared convenient navigation through the design system, collecting the content in one frame:
Recommendations for use in different resolutions have been added to the components:
The demo pages showed how each component of the system works:
Ekaterina Lisetskaya, Creative Director of Finam
“Of course, a unified design system makes life easier. Our technical team converted a set of elements from the UI Kit into tokens and transferred them to two large libraries for designers and developers. Now we can easily and quickly assemble and release any layout.
In addition, we began to look elegant and more professional, they trust us, and the new style has had a qualitative impact on this. The results of A/B tests showed that users responded much better to the new design. Our awareness rates have increased and organic traffic for all products has increased. Of course, this is all a combination of factors and the fruits of a lot of different work. But we can say for sure that the new design system became the puzzle that we were missing. The picture has taken shape.”
Bonus: Two tips on how to integrate a new design without shocking users
Advice No. 1 from Ekaterina Lisetskaya, creative director of Finam:
“We came to the creation of a new version of the design after a series of studies. In our company we have a “Customer Experience Laboratory”, and at the first stage of the project within the framework of the “Laboratory” we conducted interviews with our clients: we found out their needs, what they lack, what they like.
As a result, we were well prepared for the changes, so their integration went and is still going very well. The secret to success in this case is preliminary research.”
Tip No. 2 from Dmitry Kozhevnikov, art director of AGIMA:
“The design of Finam services is changing gradually. The team gradually introduces new interface elements and not on all products at once. This gives users time to get used to innovations.
And if the redesign happens abruptly, then you need the option to roll back to the old version. We had redesign project for the Komsomolskaya Pravda website with gigantic attendance figures across Russia. We launched a new design with the ability to roll back to the old one. And still we received a wave of negative comments. We, of course, collected and analyzed them, but for the most part it was an ordinary rejection of the new. And that’s okay. Therefore, for some time it was still possible to use the old version of the site, but then it was disabled. As a result, after the redesign, the customer saw a significant increase in conversion, depth of views and overall traffic.
In any case, you need to communicate with the user, ask questions about the new design, and ask to evaluate it. Such dialogue makes the transition easier because the user feels that they are cared for and their opinion is important. Well, possible negativity is not directed directly in your direction, but in such polls.”
results
– Together with the Finam team, we created a unified visual style for the company and updated the design of its digital products.
– We developed a clear guide for creating new products in a single style, filled it with new elements and collected everything in the UI Kit.
– The project received the Tagline 2023 award – the largest Digital Award in Europe.
You will find even more illustrations and project details in the case on our website and on Behance.
PS We write about the product approach in design and development in our telegram channel. Subscribe if this topic is interesting.
What else to read
-
How to attract and retain users on fintech projects.
-
How to redesign a service: we’ll tell you using the example of a medieval castle.
-
How to build a CJM: the best way to look at the product through the eyes of the user.
Acknowledgment and Usage Notice
The editorial team at TechBurst Magazine acknowledges the invaluable contribution of the author of the original article that forms the foundation of our publication. We sincerely appreciate the author’s work. All images in this publication are sourced directly from the original article, where a reference to the author’s profile is provided as well. This publication respects the author’s rights and enhances the visibility of their original work. If there are any concerns or the author wishes to discuss this matter further, we welcome an open dialogue to address potential issues and find an amicable resolution. Feel free to contact us through the ‘Contact Us’ section; the link is available in the website footer.