Процесс разработки сайта с анимацией

Современная платежная платформа это портал между бизнесом и потребителем в любой точке мира. Как показать это в дизайне?



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

Мы в BeaversBrothers решили поделиться практикой в создании сайта с персонажной анимацией для RBK.money. Расскажем о зарождении идеи с парящими персонажами, подходах, сложностях и решениях для веб-проектов.

Заказчик: RBK.money

Деятельность: платёжный агрегатор

Целевая аудитория: малый и средний бизнес

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

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

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


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

1. Разработка сайта с погружением в бизнес-задачи заказчика

Сайт для RBK.money это основной канал взаимодействия с аудиторией. Новых посетителей площадка знакомит с продуктом, рассказывает о преимуществах. Клиенты компании могут войти в личный кабинет. Кроме того, на сайте можно узнать новости компании и посмотреть вакансии.

При выборе подрядчика компания ставит перед агентством два важных вопроса:

1. Насколько результат будет соответствовать поставленным задачам?
2. Успеет ли агентство выполнить работу в срок?

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

Именно поэтому работу начали с экспресс-аудита компании. Он помог нам понять продукт RBK.money и составить портрет целевой аудитории. Результатом аудита стал документ, в котором прописаны цели и задачи, описан продукт и ЦА. В нём мы предложили клиенту наше видение проекта и закрепили этапы работ. Прозрачность процессов помогла достичь взаимопонимания. Согласовали.

Как понять, когда и каким будет результат?

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

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



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

Важно: здесь мы закрепляем срок разработки. Согласовываем.

До ВeaversВrothers несколько агентств пытались сделать нам сайт. Проблема была в том, что они предлагали шаблонные вещи (что есть у всех), не старались найти индивидуальный стиль. Причем мы даже уже заключили договор с агентством, и они сделали прототипы. А на этапе дизайна пришлось разойтись из-за того, что они просто копировали референсы, а индивидуальные иллюстрации и собственный стиль не разрабатывали. Выбрали ВeaversВrothers, потому что был уже положительный опыт по совместной разработке формы оплаты. Плюс, они с самого начала были вовлечены в специфику нашего бизнеса.

Наталья Сергиенко, директор по маркетингу RBK.money

2. Сделать удобный сайт для пользователей

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

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

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

Мы разделили целевую аудиторию на условные роли. В нашем случае их получилось три:

• клиенты (подключение платёжной платформы),
• партнёры,
• персонал.

Мы составили подробные портреты и разобрали поведение каждого сегмента: какая им движет цель, на какой странице какое сообщение надо показать. Далее мы по блокам разработали прототипы каждой страницы сайта.

Создание Карты пользовательских сценариев один из самых значимых этапов разработки. Она позволяет навести порядок на страницах, разобраться с витиеватой структурой сайта, распределить контент и иллюстрации. Всё это ускоряет процесс разработки и в дальнейшем уменьшает количество правок. А готовый сайт делает удобным и понятным для пользователя.

Сложности и решения на этапе проектирования.

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



Решение нашлось в результатах Экспресс-аудита, который был проведён нами в начале проекта. Мы детально проанализировали критерии, по которым пользователь выбирает платёжный сервис. Один из основных удобство и скорость внедрения системы. Значит, акцент нужно делать на прогрессивности технологий, которые позволяют легко интегрировать платёжную систему в любой онлайн-бизнес. Нужно дать понять пользователю, что он не будет испытывать проблем с установкой решения RBK.money на свой сайт.

3. Дизайн может стать главной идеей сайта

Прежде чем выбрать платёжную систему, потенциальные клиенты RBK.money просматривают предложения разных компаний. О рациональных критериях отбора мы уже говорили. Теперь расскажем об эмоциональных.

Когда иллюстрации говорят о компании больше, чем текст

Акцент сайта мы предложили сделать на иллюстрациях с эффектом левитации. Такая идея взялась из инсайта: платёжная система портал между бизнесом и потребителем в любой точке мира.

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



Иллюстрации настолько удачно вписались в новый стиль компании, что команда RBK.money решила использовать персонажей не только на сайте. Мы передали файлы в исходниках.



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

Как анимация может заставить сайт летать

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

Сложности и решения по анимации сайта

Анимацию мы разработали в After Effects и экспортировали для веба с помощью плагина BodyMovin. Затем, мы использовали на странице lottie-web плеер, чтобы воспроизвести её на странице.

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

4. Разработка в четыре руки

Технические моменты разработки сайта

Разработка, вёрстка и тестирование проходили в обычном режиме. Финальной публикацией заказчик занимался самостоятельно.

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

Мы оптимизировали вёрстку, чтобы добиться максимальной скорости загрузки страниц.

Приёмы и результаты по производительности страниц сайта RBK.money

Мы старались сделать сайт максимально быстрым, даже при плохом интернете.

В разработке мы ориентировались на два основных показателя:

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

В нашем случае получились следующие результаты:

• Время загрузки первого контента 0,5 0,8 с
• Время загрузки для взаимодействия 1,6 1,9 с

Общая скорость загрузки сайта 94 балла из 100 (инструмент Lighthouse).

Как мы работали с временем загрузки

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

Все изображения и иллюстрации векторные это уменьшает их размер и отображает без искажений на Retina-экранах.

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

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

Сложности и решения в вёрстке сайта

Основная сложность на этом этапе анимация. Корректность её отображения нужно было проверить во всех браузерах, которые закреплены в договоре с заказчиком.

Адаптивной версии уделили отдельное внимание. Если где-то вёрстка съезжала, выясняли причины у разработчиков браузера. В некоторых случаях корректировали текст, упрощали или отключали анимацию отдельных элементов. Но при этом сохраняли главную идею эффект левитации.

5. Результат разработки сайта

В назначенный день у команды RBK.money появился новый сайт. Получился отличный подарок к новому году для компании и её клиентов, ведь запуск произошёл в предновогоднюю неделю.

Наш веб-проект для RBK.money был отмечен международной наградой в области веб-дизайна Awwwards, 10 апреля после подведения итогов голосования на сайте премии мы получили специальный диплом. Также сайт RBK.money попал в подборку лучших примеров дизайна для веб-страниц от агрегатора Muzli от InVision: muz.li/inspiration/best-designed-landing-pages/.

Как сдать сайт в срок?

Чтобы сдать проект вовремя, мы работаем над процессами. Вот некоторые из тех, которые помогают нам в разработке сайта:

1. Экспресс-аудит подготовительный этап, благодаря которому мы узнаём продукт и целевую аудиторию.
2. Агрегация требований видим, что нужно сделать и каким будет результат.
3. Карта пользовательских сценариев фиксируем, где и какую информацию ищет пользователь. Что нужно сделать, чтобы увеличить конверсию.
4. Используем несколько разработчиков, которые трудятся в тесной связке в вёрстке. Процессы, которые можно вести параллельно нужно вести параллельно.
5. Тестируем готовый проект в Pixel Perfect. Достигаем того результата, который был задуман.

Грабли проекта и мысли по их избежанию

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

P. S. Продолжение? Следует!

Работаем над личным кабинетом для RBK.money. Делаем его удобным и понятным.