Разработка сайта для НС Банк

Проблемы старого сайта

Когда специалисты Банка обратились к нам, они четко понимали свои проблемы и вытекающие из них задачи:

какие задачи хотел решить НС Банк?
  • На сайте отсутствует единый фирменный стиль. Нужно привести сайт к единообразию с помощью элементов фирменного стиля и единых приемов дизайна: шрифтов, корпоративных цветов, инфографик и т.д.
  • Дизайн сайта устарел. Нужно сделать его современным, но не зацикливаться сиюминутных трендах, чтобы сайт долго выглядел актуальным.
  • Структура сайта слишком сложная. У Банка появляются новые продукты, а структура сайта при этом не меняется. Нужно создать архитектуру, которая позволит клиентам быстро находить информацию о продуктах и услугах. Также новая структура должна предусматривать рост продуктовой линейки Банка.
  • Форма обратной связи для клиента неочевидна. Необходимо добавить несколько форматов обратной связи в разные блоки страниц: «напишите нам», «закажите обратный звонок», «заказать карту», «пожаловаться на конкретный офис» и т.д.
  • По сайту непонятно, чем банк отличается от других. У клиента нет понимания, что Банк может ему предложить. Нужно сформировать главное меню и главную страницу, которые будут отвечать на эти вопросы.

Цель

Сайт должен отвечать требованиям одновременно трех аудиторий:

  • Посетителей: им нужна возможность быстро рассчитывать кредитные условия, пересчитывать валюты, связываться с банком (формы обратной связи нужны на 50% страниц).
  • Администраторов сайта: они хотели быстро и самостоятельно обновлять информацию на сайте, добавлять формы обратной связи для каждого кредитного продукта, собирать аналитику, оперативно информировать клиентов обо всех изменениях.
  • Еще сайт должен отвечать всем требования Центробанка. По требованиям Центробанка на сайте банка должны быть размещены данные о компании (от сведений об уставном капитале до сведений о последней аудиторской проверке), различные отчетные документы и версия для слабовидящих. Это значит, что сайт по умолчанию не может состоять из пары минималистичных страниц.

Проблема / Задача

Проблема

Задача

1. Не однородное оформление - нет четкого следования единому фирменному стилю.

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

2. Устаревший дизайн сайта.

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

3. Усложнённая структура сайта (т.к. у Банка появляются все новые продукты, а структура сайта не меняется).

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

4. Форма обратной связи для клиента не очевидна.

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

5. У сайта отсутствует специфика (не очевиден приоритет в направлениях деятельности Банка, не очевидны его ключевые задачи) – у клиента, который не знает кто мы нет понимания, что мы можем ему предложить.

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


Прототип

Обычно самое сложное в реализации проекта — выявить и зафиксировать задачи, которые перед нами стоят. Чем дольше разговариваешь с заказчиком, тем больше новых задач появляется.

А после этого работа движется быстро: этапы прототипирования, дизайна и программирования мы прошли очень хорошо, опережая сроки.

Так выглядели прототипы будущего сайта:

На этапе прототипирования число макетов ограничено: мы не отрисовываем 100% страниц, берем только основные — главную, список новостей, новость детально, контакты, документы и т.д. Контент для них мы взяли со старого сайта — его все равно нужно было переносить.


Дизайн

Дальше за дело взялся дизайнер. Он доработал страницы на основе UI Kit — правил использования визуальных элементов на сайте.

Вот как они стали выглядеть:
«Ипотека»

-


«О банке»

-

 


«Формы обратной связи»

А вот и формы обратной связи, которые были так необходимы. Разместили их в шапке сайта:

 


В подвале:

 


На внутренних страницах сайта:

Мы доработали цвета, иконки, элементы страницы — в общем, подготовили «боевые» макеты и перешли на этап программирования.

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

 


Программирование

Контент не вписывается в шаблоны

До этого момента клиент четко принимал все наши работы, был с нами согласен. А потом мы начали получать от сотрудников Банка очень разноплановый контент, который попросту не вписывался в шаблон нового сайта, который мы утвердили. По объему, структуре и многим другим параметрам. Тем не менее клиент ставил задачу «перенести отсюда — сюда», и мы снова начали уходить от единообразия страниц. Но вовремя остановились.

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

Напомним, для запуска проекта и прохождения проверки ЦБ мы должны были перенести не только текст, но и массу документов. Но мы знали, как работает старый сайт: говорить о каких-либо стандартных методах переноса информации — парсерах и прочих методах автоматической «транспортировки», даже не приходилось. Весь контент переносился вручную.

Клиент понимал, что их аудитория может не принять новый дизайн моментально и желателен переходный период, когда работают оба сайта. Но по правилам ЦБ контент старой и новой версии должен идеально совпадать! Поэтому на этапе финального переноса и запуска приходилось менять график работы офисов или должности сотрудников синхронно на двух версиях сайта.


Как построить работу с правками, чтобы она не превратилась в «смените синюю кнопку на желтую»

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

Например, в дизайне у нас был заложен один макет формы обратной связи с одним списком полей, а по факту клиент попросил несколько форм с разными полями в зависимости от необходимой клиенту услуги. «Тыкать носом» в ТЗ или дизайн мы не хотели, поэтому все время находились в поисках альтернативных решений. В этом случае мы подключили к админке специальный модуль, который позволяет на любой странице разместить форму и выбрать необходимые для нее поля. Это нестандартное решение, обычно Битрикс так не работает, но в данном случае другого решения кроме «конструктора» форм для контент-менеджера у нас не было.

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

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

Факты

Для тех, кому важны факты:
  1. Сайт стал работать стабильно. Прошлый сайт регулярно отваливался, и мы боялись, что следующий раз может стать последним.
  2. Администрирование сайта упростилось. Время на решение одной и той же задачи сократилось в десятки раз — от 23 часов до 15 минут.
  3. Скорость загрузки сайта значительно увеличилась за счет многих факторов — изменения системы управления, оптимизации контента, ухода от дублей и пр.
  4. Сайт перенесен на популярную cms, что обеспечивает более высокую защиту от вирусов и возможность обращения в техподдержку (плюс регулярные обновления, документация), а также легкую смену команды, обслуживающей сайт — это безопасность для клиента.
  5. Клиент доволен =)

 

Результат проекта
Проект сдан и прошел проверку ЦБ. Сейчас мы продолжаем работу с НС Банком по контентной поддержке сайта и обсуждаем функционал личного кабинета.
 
Понравилась работа и хотите не менее крутую? Напишите или позвоните нам: +7 /812/ 676 80 32
Эта страница закончилась, но у нас есть еще пара не менее интересных страниц :)