Сайт RBK.money
Мы сделали яркий сайт для обновлённого бренда RBK.money с многослойной персонажной анимацией и эффектом полёта.
RBK.Money_videocase from BeaversBrothers on Vimeo.
Аналитика
В начале работы над проектом мы провели экспресс-аудит, чтобы разобраться в продукте RBK.money, определить целевую аудиторию и составить пользовательские сценарии.
Мы сформулировали сообщение, которое встречало пользователей на главной странице сайта: «Подключить оплату на сайте — это проще, чем кажется».
В дизайне отразили особенности обновлённой платежной платформы — удобство и высокую скорость внедрения в любой бизнес.
Дизайн
Создание карты пользовательских сценариев помогло определить, где и какую информацию будет искать каждая группа пользователей. Это позволило нам упорядочить структуру сайта: правильно расположить кнопки с призывом к действию и распределить контент с иллюстрациями.
Главная страница сайта рассказывает о преимуществах продукта RBK.money. Блоки ведут пользователя на страницы с подробным описанием.
В первую очередь потенциальный клиент смотрит на комиссию. Поэтому мы добавили понятную и наглядную таблицу тарифов.
Калькулятор показывает клиенту возможную выгоду при выборе RBK.money вместо банка.
Окончательную стоимость подключения клиент узнаёт после заполнения заявки. Так компания собирает лиды и создаёт персональное предложение.
Иллюстрации
Мы хотели показать лёгкость работы с продуктом RBK.money. Поэтому мы нарисовали «парящие» иллюстрации для страниц сайта. Придумали сюжеты и сделали карандашные эскизы. Иллюстрации создавали эффект движения даже в статичном состоянии.
Сюжеты иллюстраций пришли из инсайта: платёжная система — портал между бизнесом и потребителем в любой точке мира.
Анимация
Мы добавили плавную многослойную анимацию и оптимизировали её, чтобы она не тормозила загрузку сайта и корректно отображалась в разных браузерах. В итоге страница открывается почти мгновенно, несмотря на большое количество скриптов, стилей и анимаций.
Мобильная версия сайта
Производительность
Мы сделали сайт максимально быстрым даже при слабом интернете. Наши разработчики использовали на страницах динамичный импорт скриптов, который позволяет загружать только нужные в данный момент элементы.
Мы получили следующие результаты производительности в инструменте Lighthouse:
| Время загрузки первого контента |
Время загрузки для взаимодействия | Общая скорость загрузки сайта |
Продолжение проекта
Мы работаем над интерфейсом личного кабинета для RBK.money. Делаем его удобным и понятным.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
