Реклама в Яндекс.Дзен

Реклама в Яндекс.Дзен

Новый сверх-эффективный инструмент:

  • Оплата только за дочитывания
  • Целевые лиды от 7 рублей
  • Бесшовный переход на сайт
  • Низкая конкуренция (пока)
  • Чудеса эффективности занебольшой бюджет

Выстраиваем систему продаж через интернет

Как разработать сайт для банка и не утопить проект в потоке хаотичного контента

Кейс Медиасферы и НС Банка о взаимопонимании между клиентом и агентством

Что сложного в разработке сайта для банка, если сегодня можно собрать любой сайт на конструкторе за пару дней?

Следите за руками: по требованиям Центробанка на сайте банка должны быть размещены данные о компании (от сведений об уставном капитале до сведений о последней аудиторской проверке), различные отчетные документы и версия для слабовидящих. Это значит, что сайт по умолчанию не может состоять из пары минималистичных страниц.

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

Это и произошло с сайтом НС Банка. На помощь позвали команду Медиасферы.

Проблемы старого сайта: какие задачи хотел решить НС Банк?

Главная страница старого сайта передает привет из нулевых

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

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

Фронт работ конкретен и понятен.

План работ

Разработка сайта включает в себя пять этапов:

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

К проекту подключилась команда технического отдела Медиасферы: проектировщик, seo-специалист, дизайнер, аналитик, целая группа программистов и верстальщиков, проджект-менеджер, а также руководитель проекта – Игорь Михайлов.

«Мы взялись за дело, но чем дольше мы работали над проектом, тем быстрее росло ТЗ. Оказалось, что сайт должен отвечать требованиям одновременно трех аудиторий:

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

Старый сайт и правда так плох? Может проще «пересобрать» его?

Скажем прямо: до нас сайт держался на «честном слове». Любое стандартное действие программиста приводило к массе ошибок, которые фактически не могли быть связаны между собой. Но на деле еще как были. Например, мы правили кусочек кода в футере — устанавливали код счетчика Яндекс.Метрики. Обычно эта работа занимает 5 минут работы специалиста, а на работоспособности сайта вообще не сказывается. Но старый сайт НС Банка вдруг полностью перестал работать. Еще пример — мы корректировали форму обратной связи, а после этого отключился поиск по сайту. В админке сайта буквально присутствовали невидимые кнопки.

Самописный сайт — проклятие маркетолога

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

При правильном программировании на сайте есть единые блоки — шапка сайта, футер (он же подвал), слайдер и др. Так при замене телефонного номера в шапке он меняется на всех страницах сразу. В случае НС Банка такого не происходило. Масса разрозненных страниц лежали отдельно — простейшая задача по установке кода Метрики вылилась в многодневную рутину, так как код пришлось вручную прописывать во ВСЕ страницы сайта (на минуточку — их было больше сотни).

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

Страница «Зарплатные проекты»

Страница «Депозиты бизнесу и векселя»

Те же таблицы, но разного цвета; на первом скриншоте меню справа свернуто, а на втором — развернуто. А это один и тот же сайт.

Вывод — только разработка с нуля. Поддерживать жизнь в старом сайте было бесполезной и бессмысленной тратой денег и времени.

Разрабатываем новый сайт: неожиданные трудности

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

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

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

Страница «Ипотека»

Страница «О банке»

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

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

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

«Ипотека»

«О банке»

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

В подвале:

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

Лирическое отступление: найдете, как заказать карту на старом сайте?

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

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

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

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

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

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

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

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

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

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

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

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

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

«На старте Заказчик не понимал азов разработки, при этом с его стороны в согласовании участвовал миллион и один ЛПР с правками. Контент собирали буквально все отделы Банка (некоторые не с первого раза). Сотрудники отделов не всегда понимали, как должны работать некоторые механики. Во всем процессе важнейшую роль сыграла куратор проекта со стороны Банка Яна Соболь, которая собирала и систематизировала данные, полученные от сотрудников.

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

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

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

Что в итоге?

Проект сдан и прошел проверку ЦБ. Сейчас мы продолжаем работу с НС Банком по контентной поддержке сайта и обсуждаем функционал личного кабинета.

Для тех, кому важны факты:

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

Хотите эффективную рекламную кампанию?
Похожие посты: