Дизайн и разработка нового сайта «Уралпромбанк»

Главное о кейсе

Мы создали дизайн, разработали и запустили новый адаптивный сайт «Уралпромбанка». Теперь на нём есть:
- четкая структура с разделение по целевым аудиториям: для бизнеса — одна, для частных лиц — другая;
- структурированные каталоги по продуктам и услугам банка, в которых легко ориентироваться;
- умные калькуляторы: они не только рассчитывают стравки по кредитами и проценты по вкладам, но и предлагают конкретные банковские продукты под запрос пользователя;
- блок с курсом валют и конвертером: пользователь указывает сумму, которую он хочет купить или продать в валюте, и сразу видит, сколько это будет в рублях.
- оптимизированные и разбитые на шаги анкеты для физических и юридических лиц с возможностью автоматически заполнить некоторые поля через «Госуслуги».
- обновленная карта подразделений банка с фильтрацией: можно, например, выбрать только банкоматы с круглосуточным доступом, убрав из списка те, что сейчас находятся на техническом обслуживании.
- единообразные контентные страницы, которые администраторы сайты создают с помощью универсального шаблона;
- удобный раздел с раскрытием информации для акционеров и регуляторов, в котором можно быстро найти нужные документы с помощью фильтров по году и виду раскрываемой информации.

We developed the design and launched a new adaptive Uralprombank website. Now it has the following features:
- сlear structure with a target audience division: one section is for corporate clients, the other one is for individuals;
- structured and easy-to-use catalogues of banking solutions and services;
-smart calculators: they not only calculate loan and deposit interest but also suggest specific banking solutions based upon a customer’s request;
- foreign exchange section with a currency converter: a user can indicate an amount they want to buy or sell in a particular currency and they see the equal amount in roubles;
- optimised forms, divided into several steps, for corporate clients and individuals with an autofill feature, enabled by connectivity with the Gosuslugi state platform.
- updated bank branch map with filters: it is possible to see all 24/7 ATMs, filtering out the ones currently under technical maintenance;
- content pages with a similar layout, created by website administrators, applying a universal page template;
- convenient section with information disclosure for shareholders and regulatory authorities with essential documents which can be filtered by year or type of published data.

Бизнес-задача и ее решение

ПРЕДЫСТОРИЯ / BACKGROUND
Предыдущая версия сайта «Уралпромбанка» была разработана в 2014 году. За прошедшие 7 лет он сильно разросся, структура размылась, накопилось много неактуальных документов и неработающих ссылок — пользователям стало сложно ориентироваться на сайте. Да и дизайн образца 2014 года сегодня смотрелся уже не так свежо. А ещё сайт не был адаптирован под мобильные устройства, хотя 48% пользователей заходили на него именно со смартфонов.

The previous version of the Uralprombank website was developed in 2014. In 7 years, it grew bigger, the structure got lost and many documents, stored on the platform, became completely irrelevant.
Moreover, 2014- vintage design did not look up-to-date. Also, the site was not adapted for mobile devices, although 48% were trying to interact with it using their smartphones.


ЦЕЛИ И ЗАДАЧИ / GOALS
Основная бизнес-цель «Уралпромбанка» на этом проекте — это увеличение потока заявок с сайта — на кредиты, ипотеки, обслуживание, открытие счетов и т.д. Новый сайт должен был стать не просто цифровой визиткой, а полноценным интернет-магазином банковских услуг и эффективным каналом продаж.
Также важно было максимально полно, достоверно и удобно раскрывать на сайте информацию о деятельности Банка для акционеров и регуляторов.
Чтобы помочь клиенту добиться этих целей, мы должны были полностью обновить сайт «Уралпромбанка» — технически, логически и визуально:
- создать современный дизайн для нового сайта;
- спроектировать понятную и простую структуру сайта;
- оптимизировать анкеты-заявки на услуги и продукты банка, упростить процесс их заполнения;
- создать новый каталог, в котором пользователям будет легко ориентироваться;
- проработать раздел «Раскрытие информации», сделать так, чтобы акционеры и регуляторы могли легко и быстро отфильтровать и запросить нужную информацию за разные периоды времени;
- оптимизировать объём информации в разделах;
разработать и запустить новый адаптивный сайт.

The major business goal of Uralprombank within the framework of this project is to increase the number of requests coming from the website, including requests for loans, mortgages, banking services, account openings, etc.
It is also crucial to properly present full and correct information on the Bank’s performance for shareholders and regulatory authorities.
To assist the client in reaching these goals, we had to fully update the Uralprombank website. The following tasks were established:
- development of a cutting-edge design for a new website;
- creation of a simple and user-friendly website structure;
- optimisation of the form for a banking services request, applying an auto fill feature;
- development of a new catalogue with easy navigation;
- elaboration of the Information Disclosure section to make it easier for shareholders and regulatory authorities to request and filter necessary information in different timeframes;
- optimisation of information blocks in different sections;
- development and launch of a new adaptive website.


АНАЛИТИКА /ANALYTICS
На этапе аналитики мы погружались в бизнес-процессы клиента, знакомились с его целевой аудиторией и основными конкурентами.
Сперва клиент рассказал нам все о своей целевой аудитории: её средний возраст, географические характеристики, какие устройства они используют чаще всего для входа на сайт и какими продуктами и услугами интересуются.
Затем мы провели анализ конкурентов. Смотрели в первую очередь на ту функциональность, которая была актуальна для нашего заказчика — это кредитные калькуляторы, каталоги банковских продуктов, контентные страницы и т.д. Нашей целью было выявить основные паттерны поведения пользователей на банковских сайтах и использовать их при проектировании новой версии сайта «Уралпромбанка».
А затем мы погрузились в данные метрик. Это помогло нам еще лучше понять целевую аудиторию, выявить самые популярные разделы сайта и отловить страницы отказов.
В результате мы пришли к пониманию, каким должен быть новый сайт. Мы создали первую версию карты нового сайта, изучили брендбук «Уралпромбанка» (на тот момент он состоял только из лого и цветовой палитры) и приступили к формированию общего визуального решения.
At the analysis stage we immersed ourselves into the business processes of the client, studying its target audience and main competitors.

As a result, we developed an idea of what a new website should look like. We created the first version of the map for a new website, examined the Uralprombank brand book (at that time it consisted of only a logotype and a colour palette), and started to work on a design.


ДИЗАЙН / DESIGN
Общее визуальное решение (ОВР) — это наш способ достичь взаимопонимания с заказчиком в отношении дизайна сайта. Сперва мы выяснили все предпочтения по стилю и цветовой палитре, а затем подготовили два варианта ОВР для главной страницы сайта.
Это были не окончательные макеты, а скорее их чуть менее детализированные первичные варианты — с сеткой, цветовым решением, элементами управления, типографикой и с некоторыми контентными компонентами. Эти первые наброски помогли нам убедиться, что мы выбрали правильные стилистику и цветовую гамму.
Заказчику понравились оба варианта ОВР, поэтому окончательный дизайн стал компиляцией самых удачных решений из обоих макетов.
Отметим, что в процессе работы над новым дизайном серьезно изменился брендбук банка. Клиент дал нам полный карт-бланш в этом вопросе, поэтому мы полностью переработали типографику и палитру нового сайта — выбрали более светлую цветовую гамму, немного изменили логотип, добавили градиенты и выработали стилистику для оформления всех иллюстраций.
Результатом работы на этом этапе стали дизайн-макеты всех страниц нового сайта «Уралпромбанка» и обширная библиотека компонентов. Последняя значительно облегчила работу нашей команде разработки и помогла добиться консистентности дизайна.

We started with clarification of the preferable style and color palette. Then, we designed two design concepts for the home page. The client approved both of them. So the final design has been the compilation of the most convenient elements of both concepts.
Also during the process of design creation, we supplemented the client's brand book. We changed a typographics of a new website, chose a lighter color palette, slightly changed the logotype, added color gradients and designed a style concept for the images.
The result of this stage of work was all pages’ layouts along with a wide component library. The library made the development team’s work easier and helped us to ensure the design consistency.


РАЗРАБОТКА / DEVELOPMENT
Новый сайт «Уралпромбанка» разработан на Umbraco. Это бесплатная CMS с удобной административной панелью и большим сообществом поддержки. Она постоянно развивается, в открытом доступе есть огромное количество модулей для оптимизации.
В разработке использовали .Net, ASP.NET, MS SQL, CryptoPro, JavaScript, SASS, React. Интегрировались с порталом «Госуслуги» и собственным API банка.
Работали двухнедельным спринтами. Раз в 2-3 спринта проводили демо клиенту — показывали, что уже готово, и за что мы возьмемся дальше.
Отметим, что изначально у нас был один план разработки, но жизнь внесла свои коррективы. В какой-то момент половина нашей команды слегла с ковидом (сейчас, к счастью, со всеми всё в порядке). В итоге пришлось экстренно менять планы. Мы пересмотрели приоритеты по задачам и скорректировали общий план работ так, чтобы не блокировать оставшихся в строю программистов и не растягивать сроки проекта.
Завершили этап разработки традиционно — тестированием, SEO-оптимизацией и запуском нового сайта.

Our team used .Net, ASP.NET, MS SQL, CryptoPro, JavaScript, SASS, and React in the development process. We integrated the platform with Gosusligu state platform and the Bank’s own API.
The work process consisted of 2-week sprints. Once in every 2-3 sprints, we arranged a demo solution presentation for the client, showing what had been done so far and what would be our further tasks.
As always, the development stage was finalised with testing, SEO works, and new website launch.


ОБУЧЕНИЕ СОТРУДНИКОВ / STAFF TRAINING
Старая версия сайта «Уралпромбанка» была на самописной CMS. Поэтому административная панель Umbraco была для сотрудников отдела маркетинга в новинку. Мы провели для них серию тренингов, на которых показали, как работать с сайтом — добавлять новые продукты и услуги в каталог, прикреплять документы и формировать новые контентные страницы по готовому шаблону.

We held a series of masterclasses where we showed the bank staff how to work with the website: add new banking solutions and services into the catalogue, attach documents, and form new content pages by applying a convenient page template.

Прочая информация о кейсе

Новый адаптивный сайт «Уральского Промышленного Банка» на Umbraco CMS — со свежим дизайном, переработанной структурой и удобным интерфейсом для бизнеса и частных лиц.

A new adaptive website of Uralskiy Promyshlennyy Bank based on the Umbraco CMS with an updated design, thought-through structure and user-friendly interface.

Скриншоты