Как за год создать эффективную дизайн-систему и в разы ускорить разработку на сайте?

Хаос – это лестница в прекрасное будущее, но только не в Банке. В особенности, если речь идет о визуале и «начинке» сайта — здесь лучше иметь крепкий фундамент. К примеру, полномасштабную дизайн-систему.

В Уральском Банке Реконструкции и Развития дизайн-системы не было, что стало причиной того самого хаоса. Всё изменилось, когда на передовую вышли наши дизайнеры. И вот что произошло дальше.

Рассказывают эксперты УБРиР: Денис Тур – управляющий директор Центра цифрового развития каналов взаимодействия с клиентами, Марина Кузнецова – руководитель Бизнес-блока развития сайта и анкетного сервиса и Александр Чехломин – руководитель направления развития сайта.

Digital-команда УБРиР давно понимала: пора провести масштабное «техобслуживание» сайта, заменить все, что устарело, навести порядок в работе с визуалом. Проблем хватало: медленный и малофункциональный сайт, не единообразный веб-дизайн, долгий цикл разработки. Чтобы разобраться со всеми сложностями, команда и затеяла проект совершенствования дизайна. Дизайн-система станет основой для будущих изменений в технологиях и визуале онлайн-платформ банка.

Сначала занялись мобильной версией сайта. Такой выбор продиктован «ковидной реальностью», во время которой 60% клиентов пользуются сервисом Банка со смартфонов и планшетов. До изменений мобильная версия, по сути, представляла собой минимальный адаптив десктопа, а нужен был отдельно разработанный сервис.

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

Начали с основ – системы управления контентом. Первая проблема – команда использовала две разные платформы в работе. На одной сайт, на другой лэндинги. У каждой системы разные интерфейсы и возможности.

Приходилось делить надвое команду дизайнеров и разработчиков. Единообразия становилось все меньше, недопонимания – больше. А если приходила задача, обширная для географии сайта (к примеру, поменять название кредитного продукта), нужно было внести правки в обе системы. Из-за этого TTM (*time-to-market) увеличивался в два раза.

Вторая проблема – CMS Drupal, на которой работал основной сайт УБРиР. Она доставляла множество неудобств. Вот только некоторые из них:

• версия устарела и не позволяла внедрять новые технологии. Например, турбо-страницы для Yandex, удобную мобильную версию. Сайт долго загружался, из-за чего терял часть клиентов и верхние позиции в поисковиках.
• жесткие шаблоны страниц ограничивали. Доступна была только простая верстка: картинка и текст сбоку, картинка по всей ширине страницы и текст внизу и т. д. А нужна была гибкая система-конструктор, с возможностью создавать новые элементы и управлять ими.
• все изменения в CMS были привязаны к каждой конкретной странице и блоку. Не было универсальных блоков, которые разработчик мог изменить один раз и получить консистентный результат на всем сайте. Это делало А/В тесты дорогими и невыгодными, поскольку каждый раз версталось два варианта контента.
• были трудности с подрядчиками. Drupal теряет популярность, поэтому на рынке осталось мало агентств, которые занимаются этой платформой. Трудно найти и специалистов в штат, и подрядчиков.

Чтобы решить эти проблемы, банк решил перейти на новый стек технологий. Что касается бэкенда — CMS Drupal, то во второй половине 2022 года ее планируют заменить на более удобный и современный вариант. А в части фронтенда сделали ставку на React. Сейчас разработчики используют фреймворк Next. js, который базируется на React и связывается с CMS через API. Он предоставляет гораздо больше возможностей, чем предыдущий формат работы: HTML-шаблоны на Bootstrap, строго привязанные к CMS. Среди преимуществ — высокая скорость загрузки и работы страниц, SEO-совместимость.

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

Следующий шаг – создание библиотеки компонентов. Она была необходима, чтобы сделать визуальный облик всех онлайн-площадок УБРиР единообразным. Раньше все элементы были неоднородными. Условно говоря, 100 иконок навигации, все разного вида.

Основа библиотеки компонентов – атомы и молекулы, небольшие элементы сайта. К каждому, вплоть до самой маленькой кнопки и чек-бокса, написаны спецификации. Отражен размер, форма, цвет, поведение при нажатии и переходе.

Атомы и молекулы формируют организмы – крупные компоненты (калькуляторы или формы для подбора карт, например). Они созданы по всем продуктам – вкладам, кредитным и дебетовым картам и пр. Один раз сделав такой элемент, можно использовать его в любом интерфейсе.

Трудно поверить, но раньше такой системы у УБРиР не было. Визуал для каждой страницы создавали с нуля! Цикл разработки из-за этого длился долго. По многим задачам обращались к стороннему подрядчику. Сейчас же создана единая среда разработки, а созданные компоненты могут использовать как внутренние, так и внешние команды.

С помощью библиотеки digital-команда не только ускорила разработку. Компоненты решают конкретную бизнес-задачу – сделать онлайн-платформы УБРиР удобными для клиентов. Единые дизайн-решения формируют пользовательский опыт. Покупатель быстрее перемещается по сайту и с помощью подсказок находит то, что ему нужно. У него нет ощущения разнобоя, хаоса, дискомфорта. То есть, с клиентом говорят на общем визуальном языке. Часть покупателей не будет «отваливаться» из-за некомфортного интерфейса.

Единый подход помогает улучшить и взаимопонимание в команде. Над проектом работают 4 дизайнера и 8 разработчиков. Когда команда обсуждает какой-либо элемент – чекбокс или калькулятор, например, каждый понимает, о чем идет речь. Это тоже влияет на TTM.

Дизайнеры и разработчики не только обновили и систематизировали компоненты сайта, но и сделали их удобными для пользователей. Изменения внесли на основе результатов исследований, А/В тестирования и обратной связи от клиентов. Проверили и доработали все, от оформления таблиц до формата подсветки.

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

Визуал на посадочных страницах сделали лаконичным. Убрали излишне яркие элементы из форм заявок, чтобы не отвлекать клиента от целевого действия. Такие формы внедрили и на других страницах сайта: пользователям не нужно совершать лишнее действие и переходить на лэндинг для оформления заявки, как было раньше. Дизайнеры также создали элементы, которые помогают клиенту завершить покупки – вовлекающие коммуникации по всему CJM. Например, сообщения с предложением продолжить оформление заявки появились не только на лендинге, но и на сайте при входе. Весь контент оформили в едином стиле.

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

В 2022 году начали выпускать первый обновленный визуал. Сейчас это главная страница УБРиР и основные страницы в разделе Бизнес. Дальше будет поэтапный запуск остальных страниц на основе собранной библиотеки компонентов. Работы много: переверстать нужно порядка 300 страниц.

Пока обновление не завершится, будет работать параллельно и старый, и новый фронтенд. Доработали страницу в новом дизайне – опубликовали. Это поможет быстрее обновить важные для бизнеса разделы сайта, а не ждать, пока полностью будет доработан весь контент.

Следующая большая задача – это полный редизайн оффлайн и онлайн-носителей УБРиР. Этот проект будет разрабатываться в плотной связке с маркетингом. Важно не просто сделать красивые картинки, а выдержать стиль и характер бренда, проработать визуальный tone-of-voice. Сделать это будет проще, ведь дизайнеры сформировали основу – дизайн-систему. Вносить изменения можно в готовые компоненты, а не рисовать с нуля.