Редизайн

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

Как было раньше

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


_{Старая мобильная версия главной страницы Mail.ru}

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

План выглядел так:

• Изменить визуальный стиль главной страницы, опираясь на новую дизайн систему Mail.ru;
• Сделать доступ ко всем сервисам удобным и быстрым;
• Добавить навигации по странице развлекательный характер за счет индивидуальных рекомендаций материалов и способов их оформления;
• Сохранить видимость всех продуктов и учесть интересы тех, на которые пользователи чаще всего переходят с главной страницы Почты,Поиска и Новостей;
• Адаптировать изменения под устройства с маленькими экранами, чтобы каждому пользователю было комфортно.

С чего начали

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

Для начала мы решили направлять внимание пользователя на важные элементы только визуальными инструментами.


_{Первые UI варианты страницы}

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

Затем мы поработали над остальными продуктами за скроллом. Каждый блок и продукт обрел свой дизайн, который помогал выполнять их функции.


_{Новая лента}

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

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

Изменение UX страницы

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


_{Варианты главной страницы для UX исследований}

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

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

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

Новости остались на том же месте, но мы немного поработали над самим блоком: изменили количество новостей (необходимость этого также показали тесты), добавили отступы между материалами и увеличили размер шрифта. В ленту добавили Пульс, сделав ее бесконечной, поэтому футер перенесли в бургер меню вверху слева так мы получили место для других проектов Mail.ru Group без потерь для дизайна и пользователя.

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

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

• Наверху расположен навигационный блок с меню, геолокацией и профилем;
• Поиск выше Почты, а Погода рядом с Новостями;
• Меньше акцентного цвета (синими остались только логотип и Поиск).

Финальные штрихи

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

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


_{Добавление виджетов}

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


_{Сравнение старого и нового дизайна мобильной версии главной страницы Mail.ru}

Как новая главная живет и процветает

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

В результате мы заметили такие изменения:

• +12% к переходам на медиапроекты, включая погоду и ковид;
• +4% к переходам в Поиск;
• +5% к переходам в Почту.

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

Состав творческой группы:

• Алена Китабова менеджер продукта.
• Вячеслав Яшков руководитель команды дизайна Search & AI.
• Елена Джуга дизайнер Search & AI.
• Игорь Фролов руководитель группы frontend-разработки главной страницы и портальной навигации.
• Владимир Францкевич программист группы frontend-разработки главной.
• Денис Стасьев младший программист группы frontend-разработки главной.
• Александр Буки программист группы frontend-разработки главной.
• Анастасия Краснова ведущий инженер по тестированию.

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

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



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

Мы в 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. Делаем его удобным и понятным.