A new website for the Bank Saint Petersburg: design and development

It is essential to keep in mind that the current content will move to a new reality and be transformed into our new visual concept and stay in it.

The bank has provided such detailed research as a description of the target audience, competitor analysis, and CJM.

In addition, an analysis of the individual’s and legal entities’ behavior was carried out. We had enough artifacts — we studied information, structured it, and compared the data with the business goals of the bank. MobileUp started to design a new service based on the data.

We have developed a design vocabulary that still has been helping to scale the solution. It includes all the necessary elements to create pages:

The library was formed iteratively: the first block of important components was done and given to the client. The guys from the bank are completing the block while we are working on a new one at the same time.

We worked closely with the design department of the bank to seamlessly integrate our solutions into the brand and the bank products. The guys from the Lipsoft design team have worked on over 200 images and banners for the project.

We thought a template through to accelerate the design process. The size of the bank’s website is large, about 500 pages.

If we deal with such page size, it is essential to think over the logic of the elements and pages in general to have a single system on the one hand, and the opportunity to show individuality and focus the user’s attention on the other hand.

We didn’t forget about the content managers who would have to create and update the information. The content is diverse, but the pages have a similar structure.

Some sections of the site are purposely different from the main page, but at the same time, they are made in the bank’s conceptual design and look consistent.

There are some examples of how the design vocabulary has adapted to the sections «Private Banking» and «Bright» below.

We worked in such environments as local Env, test Env, pre-production Env, and production Env. The customer had already used Kubernetes, a deployment and maintenance system.

We deployed a test stand on Kubernetes to unify the process of deploying apps to servers and eliminate variations in the three environments:

Testing took place in two stages: our approval and tests on the side of the bank.

When developing the constructor, MobileUp started by creating custom components. We quickly understood that this is not the best solution regarding flexibility.

We run a migration process from components to Strapi data types. This solution was chosen for convenience. On the one hand, this is a ready-made CMS, on the other hand, it can be quickly customized and flexible in layout.

The previous website had two admin panels for the web and mobile versions. We decided to use a boxed solution and made one admin panel to rule them all on the new one.