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

Команда fuse8

Руководитель проекта
Вениамин Мустафин

Дизайнеры
Алексей Пилишков
Наталья Календарёва

Тимлид
Артём Черненко

Бэкенд-разработчики
Максим Захаров
Илья Стародубов

Фронтенд-разработчики
Екатерина Чекина
Кирилл Зуев

QA-инженер
Алексей Герасимов

«Уралпромбанк»

Директор по развитию
Александр Яхнин

Ведущий маркетолог
Екатерина Арсеньева

Технический директор
Владимир Бучко

Разработчики
Нариман Ибатуллин
Николай Латыш

Начальник отдела
информационной безопасности
Антон Кучерявый

Председатель правления банка
Михаил Парфентьев

Заместитель председателя правления банка
Артём Курзанов

Предыстория

На момент обращения к нам у «Уралпромбанка» уже был свой сайт. Его разработали и запустили еще в 2014 году.

За прошедшие 7 лет сайт сильно разросся, структура размылась, накопилось много неактуальных документов и неработающих ссылок — пользователям стало сложно ориентироваться. Да и дизайн образца 2014 года сегодня смотрелся уже не так свежо. А ещё сайт не был адаптирован под мобильные устройства, хотя 48% пользователей заходили на него именно со смартфонов.

Сайт нуждался в глобальном обновлении и переосмыслении. За это взялась наша команда. Начали мы, как всегда, со сбора требований, выяснения целей заказчика и постановки задач.

Цели и задачи

Итак, первое, что мы сделали — это познакомились с нашим заказчиком.

«Уралпромбанк» — это крупный банк, зарегистрированный в Челябинске в 1994 году. Работает с физическими и юридическими лицами. Основные направления деятельности — обслуживание и кредитование клиентов из Челябинской области, операции на долговом и межбанковском рынках.

Чтобы помочь клиенту добиться этих целей, мы должны были полностью обновить сайт «Уралпромбанка» — технически, логически и визуально:

• создать современный дизайн для нового сайта;
• спроектировать понятную и простую структуру сайта;
• оптимизировать анкеты-заявки на услуги и продукты банка, упростить процесс их заполнения; 
• создать новый каталог, в котором пользователям будет легко ориентироваться;
• проработать раздел «Раскрытие информации», сделать так, чтобы акционеры и регуляторы могли легко и быстро отфильтровать и запросить нужную информацию за разные периоды времени; 
• оптимизировать объём информации в разделах;
• разработать и запустить новый адаптивный сайт.

Аналитика

На этапе аналитики мы погружались в бизнес-процессы клиента, знакомились с его целевой аудиторией и основными конкурентами

Сперва клиент рассказал нам все о своей целевой аудитории: её средний возраст, географические характеристики, какие устройства они используют чаще всего для входа на сайт и какими продуктами и услугами интересуются

Затем мы провели анализ конкурентов. Смотрели в первую очередь на ту функциональность, которая была актуальна для нашего заказчика — это кредитные калькуляторы, каталоги банковских продуктов, контентные страницы и т.д.

Нашей целью было выявить основные паттерны поведения пользователей на банковских сайтах и использовать их при проектировании новой версии сайта «Уралпромбанка».

Затем мы погрузились в данные метрик. Это помогло нам еще лучше понять целевую аудиторию, выявить самые популярные разделы сайта и отловить страницы отказов.

В результате мы пришли к пониманию, каким должен быть новый сайт.

Мы изучили брендбук «Уралпромбанка» (на тот момент он состоял только из лого и цветовой палитры) и приступили к формированию общего визуального решения.

Дизайн

Общее визуальное решение (ОВР) — это наш способ достичь взаимопонимания с заказчиком в отношении дизайна сайта. Сперва мы выяснили все предпочтения по стилю и цветовой палитре, а затем подготовили два варианта ОВР для главной страницы сайта.

Это были не окончательные макеты, а скорее их чуть менее детализированные первичные варианты — с сеткой, цветовым решением, элементами управления, типографикой и с некоторыми контентными компонентами. Эти первые наброски помогли нам убедиться, что мы выбрали правильные стилистику и цветовую гамму.

Заказчику понравились оба варианта ОВР, поэтому окончательный дизайн стал компиляцией самых удачных решений из обоих макетов.

Результатом работы на этом этапе стали дизайн-макеты всех страниц нового сайта «Уралпромбанка» и обширная библиотека компонентов. Последняя значительно облегчила работу нашей команде разработки и помогла добиться консистентности дизайна.

Разработка

Новый сайт «Уралпромбанка» разработан на Umbraco. Это бесплатная CMS с удобной административной панелью и большим сообществом поддержки. Она постоянно развивается, в открытом доступе есть огромное количество модулей для оптимизации.

Работали двухнедельным спринтами. Раз в 2-3 спринта проводили демо клиенту — показывали, что уже готово, и за что мы возьмемся дальше.

Отметим, что изначально у нас был один план разработки, но жизнь внесла свои коррективы. В какой-то момент половина нашей команды слегла с ковидом (сейчас, к счастью, со всеми всё в порядке). В итоге пришлось экстренно менять планы.

Мы пересмотрели приоритеты по задачам и скорректировали общий план работ так, чтобы не блокировать оставшихся в строю программистов и не растягивать сроки проекта.

Завершили этап разработки традиционно — тестированием, SEO-оптимизацией и запуском нового сайта.

Обучение сотрудников

Старая версия сайта «Уралпромбанка» была на самописной CMS. Поэтому административная панель Umbraco была для сотрудников отдела маркетинга в новинку.

Мы провели для них серию тренингов, на которых показали, как работать с сайтом — добавлять новые продукты и услуги в каталог, прикреплять документы и формировать новые контентные страницы по готовому шаблону.

Результат

Результатом всех наших работ стал запуск нового адаптивного сайта «Уралпромбанка».

Мы выстроили новую структуру главной страницы сайта с учетом анализа поведения пользователей, изменили логику каталога продуктов и услуг банка, а также добавили на главную страницу несколько полезных инструментов.

Умный калькулятор

Калькуляторы на главной странице теперь не только рассчитывают стравки по кредитами и проценты по вкладам, но и предлагают конкретные банковские продукты под запрос пользователя.

Конвертер курсов валют

Дополнили блок с курсом валют конвертером: пользователь указывает сумму, которую он хочет купить или продать в валюте, и сразу видит, сколько это будет в рублях.

Анкеты и заявки

Оптимизировали и разбили на шаги анкеты для физических и юридических лиц. Некоторые поля теперь можно заполнить автоматически через «Госуслуги».

После заполнения и отправки анкеты клиент попадает на страницу благодарности. На ней есть подтверждение удачной отправки заявки и блок потенциально-полезных предложений и продуктов.

Карта банкоматов

Обновили карту подразделений банка. С помощью фильтров можно, например, выбрать только банкоматы с круглосуточным доступом, и убрать из списка те, что находятся на техническом обслуживании.

Раскрытие информации

Спроектировали удобный раздел с раскрытием информации для акционеров и регуляторов. В нем можно быстро найти нужные документы с помощью фильтров по году и виду раскрываемой информации.

Дизайн-система

В процессе работы над новым сайтом «Уралпромбанка» серьезно изменился брендбук компании. Клиент дал нам полный карт-бланш в этом вопросе, поэтому мы собрали новую дизайн-систему для сайта. В ней мы полностью переработали типографику и палитру — выбрали более светлую цветовую гамму, немного изменили логотип, добавили градиенты и выработали стилистику для оформления всех иллюстраций.

Отзыв клиента

Мы выражаем благодарность компании fuse8 за плодотворное сотрудничество в рамках проекта по разработке нового корпоративного сайта «Уралпромбанка». Хотим отметить высокоорганизованную работу коллектива fuse8 на всех этапах выполнения проекта. Между нашими командами установились дружеские отношения и полное взаимопонимание.