Визуальный сторителлинг на zero-code платформе: как мы сделали сайты для дайджестов ВТБ

ВТБ постоянно проводит улучшения своих онлайн-сервисов и добавляет новые услуги. Каждый квартал выходит дайджест с последними новостями: из него клиенты могут узнавать о возможностях банка.

Департамент цифрового бизнеса ВТБ обратился к нам, чтобы обновить дизайн спецпроекта — сделать имиджевый сайт с интерактивной презентацией новостей. Антон Шакиров, руководитель направления Method Zero дизайн-студии Pinkman, рассказал о работе над двумя выпусками — за первый и второй квартал этого года.

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

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

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

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

Мы собирали дайджесты на no-code платформе Webflow. Это продвинутый конструктор, который подходит для нешаблонного дизайна. В отличие от Tilda или Readymag, которые заточены под простые и быстрые решения, Webflow в своих возможностях верстки сравним с классической разработкой сайтов на коде.

Для решения задач ВТБ мы продумали нестандартный дизайн — моушн-графику с 3D-объектами, мини-опросы по ходу дайджеста и эффекты анимации, привязанные к скроллингу — чтобы изображения двигались по мере того, как пользователь пролистывает сайт. Все задумки удалось воплотить с помощью технологии no-code, минимально прибегнув к программированию.

Webflow позволяет точно настроить поведение интерфейса в адаптивных версиях. На Tilda или Readymag возможности верстки ограничены, а страницы дольше загружаются. Благодаря Webflow дизайн дайджеста в мобильной версии ничем не уступает десктопному.

С Webflow можно делать нешаблонные сайты быстрее, чем кодом. Работа над каждым дайджестом — от брифа клиента до выпуска — заняла у нас менее двух месяцев. Классическая разработка потребовала бы в два раза больше времени.

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

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

Наша команда отрисовала 3D-иллюстрации для дайджеста — они привлекают внимание и служат для визуализации новых возможностей продукта.

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

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

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

Есть несколько кликабельных элементов со знаком плюс — они открывают дополнительную информацию:

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

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

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

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

Помимо моушн-эффектов для 2D- и 3D-объектов в новом выпуске есть полноценное видео с мемоджи: в нем сотрудник ВТБ объясняет преимущества темной темы. Эта анимация проигрывается по клику пользователя. Мы решили не оставлять стандартную кнопку запуска видеоплеера и сделали для нее кастомный дизайн с помощью кода — так видео не выбивается из стилистики сайта:

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

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

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

Результат показывает, что технология zero code позволяет осуществить идеи разной сложности. Нам удалось реализовать визуально привлекательный имиджевый проект. На Webflow, с минимальной интеграцией кода, мы сделали дизайн, который увлекает пользователя и помогает разбираться в новых функциях и услугах банка.