Дизайнеры часто замечают, как улучшить тот или иной сайт. Здесь я делюсь вариантом дизайна лендинга «Аэрофлот бонус», который удобнее пользователю.
Как-то раз я участвовала в вебинаре, который проводил арт-директор Тинькофф банка. Тогда я впервые увидела страницу сайта «Аэрофлот бонус», и не сразу поняла, что предлагается карта. Но это просто сказать, пользователю не понятно, что делать на сайте. А предложить решение — гораздо сложнее. В течение нескольких дней я создавала новый дизайн с акцентом на основную цель сайта — помочь пользователю выбрать и заказать карту «Аэрофлот бонус». Мне хотелось, чтобы сайт стал понятнее, предоставлял дополнительные возможности, вызывал доверие и решал маркетинговые задачи. Здесь описывается результат, сложности при выполнении работы, способы решений и изначальная версия сайта, так как страницу могут обновить.
В качестве примеров решений можно, конечно, взять сайты авиакомпаний конкурентов. Но я выбрала сайты, предлагающие тарифные планы мобильной связи и банковские карты, так как они больше похожи по целевым действиям.
Вот список выявленных трудностей пользователя, мешающих оформить бонусную карту, и сразу же предложение по редизайну.
• Основное действие “купить билет”. Должно быть “оформить карту”.
• Баннер не поясняет цель сайта. Можно карту показать.
• Текстовые акценты неверные. Подзаголовки должны быть ярче пояснительного текста.
• Несколько кнопок уводят со страницы сайта. Следует увеличить количество кнопок целевого действия.
• Таблица сравнения карт не удобна для визуального восприятия преимуществ. Нужно определить категории предоставляемых услуг и показать отличие карт по набору услуг.
• Слишком яркий блок о партнёрах. Достаточно перечисления.
• Нет возможности заказа карты онлайн. Нужно создать форму онлайн заказа с предложением определённого варианта заказа по умолчанию.
Я пригласила на интервью знакомых, которые сами заказывают себе авиабилеты онлайн и используют банковские мобильные приложения. Задала одинаковые вопросы, чтобы лучше понять пути пользователя и возникающие трудности.
Ради чего пользователь заходит на сайт:
Я работаю в figma. По желанию заказчика создаю анимированный макет сайта с возможностью протестировать активные элементы дизайна. И только после согласования начнётся вёрстка сайта.
Структура страницы поменялась. Удалены новости, преимущества собраны в один блок и добавлена онлайн форма. Теперь страница сайта состоит из таких блоков:
Заголовок делаю с акцентом на вход в личный кабинет. Привычное для пользователя расположение элементов меню.
На баннере два основных элемента: кнопка целевого действия и пояснительный текст. Ненужные кнопки удаляю. Иконки оставляю и ещё для работы использую готовый набор элементов в едином стиле — UI Kit Taiga.
Описание бонусов разделяю на 2 части — как их можно получить и как потратить.
Три бонусные карты предлагаю сравнивать по таблице с перечнем основных привилегий. Ячейки таблицы заполняю зелёными галочками или прочерками. Под каждой картой кнопка целевого действия, под золотой картой более яркая кнопка оформления по умолчанию. Эти приёмы в дизайне помогают пользователю быстрее определится с выбором карты и решиться на оформление.
В блоке о партнёрах убираю яркие изображения и добавляю ссылки для подробной информации.
Форма заявки на оформление карты содержит 3 необходимых поля, поле типа карты уже по умолчанию заполнено. На полях подписи-подсказки и маска для номера телефона.
Добавляю чекбокс принятия условий передачи информации со ссылкой на документ о персональных данных. Юристы инфобизнеса рекомендуют не ставить за пользователя галочку по умолчанию. На изображении я показала вариант с уже принятыми условиями.
И последний блок — подвал. Убираю избыточную кнопку “позвонить с сайта” и делаю номер телефона кликабельным.
Десктопная версия сайта готова. Страница стала проще для восприятия информации. Баннер сразу даёт понять назначение сайта. Текст — рекламное сообщение, кнопка — целевое действие. Дизайн стал чище: светлый фон с контрастным текстом. Пользователь может сравнивать привилегии бонусных карт по категориям. Благодаря онлайн форме процесс заказа оформления бонусной карты стал быстрее и проще.
Десктопная, планшетная и мобильная версии страницы сайта — это минимальный набор адаптивов одной страницы сайта. Использую приёмы горизонтального скролла с добавлением яркого ползунка, замещение видимого меню на бургер-меню, уменьшения размеров шрифтов, кнопок, полей ввода данных.
Самое сложное — таблица сравнения. Здесь выбираю приоритетные привилегии, на основе которых уже можно сделать выбор. А остальные прячу с помощью кнопки “показать/скрыть”.
Адаптивные версии сайта готовы.