UX/UI кейс. Дизайн мобильного приложения "Белавия": каким оно могло бы быть
Меня зовут Маша, я продуктовый дизайнер из Минска. Звезды сошлись так, что начало моего обучения дизайну на курсе Wannabelike совпало с подготовкой к зимовке в Индии. Покупая билет Минск-Дели у "Белавиа", я сразу поняла, какой проект хочу реализовать: дизайн нового приложения беларуской авиакомпании, погнали!
Контекст
В августе 2023 года беларуская авиакомпания “Белавия” запустила прямые рейсы из Минска в Дели. Почти сразу мы с подругами решили купить билеты и устроить себе удаленку в Индии на пару месяцев. Раньше я не летала с “Белавиа”, и, когда пришло время бронировать рейс, нам оказалась доступна только веб-версия сервиса. Мобильного приложения не было. В 2023 году. У единственной авиакомпании Беларуси. Понимаете, да?
Так случился этот проект: я захотела показать, как может выглядеть сервис "Белавиа" у нас в телефонах. Цель — пересмотреть опыт бронирования авиабилетов на сайте и собрать его в новом мобильном приложении.
Исследование
Работа над проектом началась с изучения конкурентов и качественного исследования, для которого потребовалось восемь глубинных интервью. Они позволили сформулировать гипотезы о том, как сделать опыт бронирования авиабилета более простым, понятным и удобным.
Что болело
На интервью мне было важно узнать о трудностях, с которыми пользователи сталкиваются в процессе покупки билетов, о способах решения этих проблем и об опыте управления бронированием. Респонденты помогли подсветить ключевые неудобства:
Несколько интересных наблюдений:
- Приложениям авиакомпаний доверяют значительно меньше, чем их же веб-сайтам. Пользователям кажется, что на экране телефона отображается меньше информации, что влияет на чувство безопасности: мы боимся не заметить что-то важное. Для меня это стало открытием, ведь, глобально, использовать мобильное приложение значительно удобнее — можно оперативно поменять или вернуть билет, отследить статус бронирования по пути в аэропорт, открыть посадочный талон на телефоне. Важно обеспечить пользователей всей необходимой информацией, чтобы в приложении было безопасно.
- Когда непонятно — страшно. Пользователи не знают, чего ждать, если нажать куда-то не туда. Важно, чтобы в приложении путь пользователя был простым и ясным.
- Пользователям важно чувствовать, что все под контролем и, при необходимости, им помогут: нужная информация в быстром доступе, можно оперативно получить ответы на вопросы, отслеживать статус брони. Важно показать, что “Белавия” поддерживает и заботится.
Что предлагаю
Изучение сайта “Белавия”, анализ конкурентов, боли пользователей стали фундаментом для апдейта UX и внедрения новых фичей. Я предлагаю:
Ценности, миссия, видение, метафора
Исследование привело меня к следующему этапу — определению ценностей, миссии, видения и визуальной метафоры новой “Белавиа”.
Мне очень хотелось, чтобы процесс поиска и покупки билетов требовал минимум времени и усилий, чтобы можно было легко управлять своим бронированием и чтобы сервис давал подсказки и помогал там, где у пользователя могли бы возникнуть вопросы.
Я решила, что приложение “Белавия” должно обладать следующими ценностями: простота, доступность, забота, контроль. Затем определила свою миссию: создать дизайн мобильного приложения с улучшенным UX и обновленным UI. Придумала, что в перспективе мобильное приложение “Белавия” — это карманный ассистент по перелетам.
На основе ценностей сформулировала визуальную метафору: ясный путь в любом направлении.
Структура
Чтобы путь стал действительно ясным, я определила ключевые сценарии взаимодействия с интерфейсом и структуру информации к ним. После этого началась работа над не менее важным этапом — созданием вайрфреймов.
Дизайн мобильного приложения "Белавиа"
Теперь, когда выполнена вся работа по проектированию, переходим к дизайну!
Поиск
Страница поиска рейсов предлагает самое важное: поиск с последними запросами, горячие билеты и популярные направления — ничего лишнего.
Теперь календарь показывает только доступные даты с указанием минимальной стоимости билетов. А на этапе поиска направления можно выбрать не только предыдущий запрос, но и “Куда угодно” в качестве пункта назначения.
Страница с результатами позволяет быстро редактировать поиск, сортировать выдачу, удобно просматривать рейсы и их цены на соседние даты, а также подписываться на уведомление об изменении цены билета.
Бронирование
Процесс бронирования начинается с выбора тарифа. Тут было важным показать описание тарифов так, чтобы оно было емким и понятным.
Самая важная часть проекта — процесс бронирования. В отличие от прежнего UX, все этапы бронирования размещены на одном экране: шаги открываются в модальных окнах, благодаря чему появляется возможность менять данные, оставаясь на той же странице. Такое решение позволяет пользователю видеть всю информацию о предстоящем полете в одном месте и завершать бронирование быстрее.
Мы помним, что одна из ценностей нового приложения — забота, поэтому теперь, в момент заполнения персональных данных, “Белавия” подсказывает:
- Загляни в паспорт и сверь данные;
- Сверь данные еще раз, а то в случае ошибки придется платить;
- Если не хочешь вводить данные, выбери сохраненного пассажира или отсканируй паспорт.
Кайф же, да?
Когда персональные данные успешно заполнены, пользователь может не только выбрать место, но и добавить багаж или указать предпочтения по питанию.
Когда все шаги пройдены и бронирование практически завершено, убедимся в удобстве размещения всего процесса на одной странице: можно быстро проверить введенную информацию и, в случае необходимости, изменить данные.
Кстати, теперь отдельное модальное окно рассказывает о баллах программы лояльности, которые можно получить за бронирование, а также ссылается на более подробную информацию о ней.
Рейс забронирован, ура! Быстро вышло, правда?
На странице подтверждения можно добавить рейс в календарь, скачать подтверждение о бронировании, а также перейти на страницу управления.
Управление бронированием
Контроль по-прежнему в наших руках. Раздел “My trips” позволяет:
- Быстро отследить, сколько дней осталось до рейса;
- Управлять бронированием;
- Открыть посадочный талон;
- Добавить другие услуги.
Отслеживание статуса бронирования помогает во многом:
- Понимаем, как скоро рейс;
- Можем докупить услуги онлайн;
- Получаем напоминания о следующих действиях (например, о том, что сейчас самое время пройти онлайн-регистрацию);
- Благодаря инструкциям о том, как добраться в аэропорт и как найти гейт, не боимся потеряться!
Посадочный талон, конечно, можно скачать, но лучше открыть его, красивого, в самом приложении.
И последнее — личный кабинет, который позволяет управлять данными профиля, просматривать уведомления, отслеживать изменения цен на выбранные рейсы, обращаться в поддержку, участвовать в программе лояльности и многое другое.
Мы нашли рейс, купили билет и отследили статус бронирования. Новый дизайн “Белавиа” предлагает пройти этот путь значительно комфортнее и быстрее, чем раньше. Горячие билеты, календарь с ценами, модификация поиска, направление “Куда угодно” подводят пользователя к бронированию рейса в считанные минуты. Процесс покупки билета теперь не кажется чем-то сложным и страшным: заполнять, проверять и менять данные можно находясь на одной странице. Кроме этого, “Белавия” поддерживает пользователя вплоть до рейса, напоминая об оставшихся этапах и предлагая помощь в подготовке к полету.
Я очень люблю летать и люблю, когда получается подготовиться к путешествию легко и без стресса. С новым дизайном “Белавия” путь ясен в любом направлении.
Намасте!