Редизайн страницы сайта «Аэрофлот бонус»

Дизайнеры часто замечают, как улучшить тот или иной сайт. Здесь я делюсь вариантом дизайна лендинга «Аэрофлот бонус», который удобнее пользователю.

Описание проекта редизайна лендинга с использованием таблицы сравнения тарифов и онлайн формой заказа оформления карты

Предистория

Как-то раз я участвовала в вебинаре, который проводил арт-директор Тинькофф банка. Тогда я впервые увидела страницу сайта «Аэрофлот бонус», и не сразу поняла, что предлагается карта. Но это просто сказать, пользователю не понятно, что делать на сайте. А предложить решение — гораздо сложнее. В течение нескольких дней я создавала новый дизайн с акцентом на основную цель сайта — помочь пользователю выбрать и заказать карту «Аэрофлот бонус». Мне хотелось, чтобы сайт стал понятнее, предоставлял дополнительные возможности, вызывал доверие и решал маркетинговые задачи. Здесь описывается результат, сложности при выполнении работы, способы решений и изначальная версия сайта, так как страницу могут обновить.

Первоначальный баннер лендинга Аэрофлот бонус

Аудит существующего сайта и анализ решений на других сайтах

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

Основное действие “купить билет”. Должно быть “оформить карту”.

Баннер не поясняет цель сайта. Можно карту показать.

Текстовые акценты неверные. Подзаголовки должны быть ярче пояснительного текста.

Несколько кнопок уводят со страницы сайта. Следует увеличить количество кнопок целевого действия.

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

Слишком яркий блок о партнёрах. Достаточно перечисления.

Нет возможности заказа карты онлайн. Нужно создать форму онлайн заказа с предложением определённого варианта заказа по умолчанию.

Исследование пользовательского опыта

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

Ради чего пользователь заходит на сайт:

Иконки, соответствующие основным потребностям пользователей целевой аудитории лендинга Аэрофлот бонус
  • понимание преимуществ;
  • выбор карты;
  • онлайн оформление карты;
  • обратная связь.

Макет страницы сайта

Я работаю в figma. По желанию заказчика создаю анимированный макет сайта с возможностью протестировать активные элементы дизайна. И только после согласования начнётся вёрстка сайта.

Структура страницы поменялась. Удалены новости, преимущества собраны в один блок и добавлена онлайн форма. Теперь страница сайта состоит из таких блоков:

  • заголовок
  • баннер
  • преимущества
  • сравнение тарифов
  • партнёры
  • форма заявки
  • подвал

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

Меню заголовка лендинга Аэрофлот бонус с основной кнопкой входа в личный кабинет

На баннере два основных элемента: кнопка целевого действия и пояснительный текст. Ненужные кнопки удаляю. Иконки оставляю и ещё для работы использую готовый набор элементов в едином стиле — UI Kit Taiga.

Баннер лендинга Аэрофлот бонус после редизайна

Описание бонусов разделяю на 2 части — как их можно получить и как потратить.

Блок описания преимуществ лендинга Аэрофлот бонус после редизайна

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

Таблица сравнения привилегий трёх уровней программы Аэрофлот бонус по основным категориям

В блоке о партнёрах убираю яркие изображения и добавляю ссылки для подробной информации.

Блок "Наши партнёры" лендинга Аэрофлот бонус

Форма заявки на оформление карты содержит 3 необходимых поля, поле типа карты уже по умолчанию заполнено. На полях подписи-подсказки и маска для номера телефона.

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

Форма онлайн заявки оформления карты Аэрофлот бонус

И последний блок — подвал. Убираю избыточную кнопку “позвонить с сайта” и делаю номер телефона кликабельным.

Подвал лендинга Аэрофлот бонус с основным действием позвонить

Десктопная версия сайта готова. Страница стала проще для восприятия информации. Баннер сразу даёт понять назначение сайта. Текст — рекламное сообщение, кнопка — целевое действие. Дизайн стал чище: светлый фон с контрастным текстом. Пользователь может сравнивать привилегии бонусных карт по категориям. Благодаря онлайн форме процесс заказа оформления бонусной карты стал быстрее и проще.

Десктопная версия лендинга Аэрофлот бонус после редизайна

Адаптивные версии страницы сайта

Десктопная, планшетная и мобильная версии страницы сайта — это минимальный набор адаптивов одной страницы сайта. Использую приёмы горизонтального скролла с добавлением яркого ползунка, замещение видимого меню на бургер-меню, уменьшения размеров шрифтов, кнопок, полей ввода данных.
Самое сложное — таблица сравнения. Здесь выбираю приоритетные привилегии, на основе которых уже можно сделать выбор. А остальные прячу с помощью кнопки “показать/скрыть”.

Адаптивные версии сайта готовы.

Мобильная версия лендинга Аэрофлот бонус после редизайна
Используемый UI kit для редизайна лендинга Аэрофлот бонус