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

1. Вводная задача от заказчика, проблематика, цели

Заказчик — акционерное общество «Уральский Промышленный Банк» (далее — «Уралпромбанк»). Мы разработали для них новый адаптивный сайт — со свежим дизайном, переработанной структурой и удобным интерфейсом для бизнеса и частных лиц.

ПРЕДЫСТОРИЯ

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

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

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

ЦЕЛИ И ЗАДАЧИ

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

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

Основная бизнес-цель «Уралпромбанка» на момент обращения к нам — это увеличение потока заявок с сайта на кредиты, ипотеки, обслуживание и открытие счетов.

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

АНАЛИТИКА

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

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

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

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

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

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

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

ДИЗАЙН

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

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

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

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

РАЗРАБОТКА

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

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

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

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

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

ОБУЧЕНИЕ СОТРУДНИКОВ

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

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

Два варианта общего визуального решения

3. Результаты сотрудничества

Мы создали дизайн, разработали и запустили новый адаптивный сайт «Уралпромбанка». Теперь на нём есть:

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