UX/UI кейс. Дизайн мобильного приложения "Белавия": каким оно могло бы быть

Меня зовут Маша, я продуктовый дизайнер из Минска. Звезды сошлись так, что начало моего обучения дизайну на курсе Wannabelike совпало с подготовкой к зимовке в Индии. Покупая билет Минск-Дели у "Белавиа", я сразу поняла, какой проект хочу реализовать: дизайн нового приложения беларуской авиакомпании, погнали!

В августе 2023 года беларуская авиакомпания “Белавия” запустила прямые рейсы из Минска в Дели. Почти сразу мы с подругами решили купить билеты и устроить себе удаленку в Индии на пару месяцев. Раньше я не летала с “Белавиа”, и, когда пришло время бронировать рейс, нам оказалась доступна только веб-версия сервиса. Мобильного приложения не было. В 2023 году. У единственной авиакомпании Беларуси. Понимаете, да?

Так случился этот проект: я захотела показать, как может выглядеть сервис "Белавиа" у нас в телефонах. Цель — пересмотреть опыт бронирования авиабилетов на сайте и собрать его в новом мобильном приложении.

Работа над проектом началась с изучения конкурентов и качественного исследования, для которого потребовалось восемь глубинных интервью. Они позволили сформулировать гипотезы о том, как сделать опыт бронирования авиабилета более простым, понятным и удобным.

Что болело

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

Несколько интересных наблюдений:

• Приложениям авиакомпаний доверяют значительно меньше, чем их же веб-сайтам. Пользователям кажется, что на экране телефона отображается меньше информации, что влияет на чувство безопасности: мы боимся не заметить что-то важное. Для меня это стало открытием, ведь, глобально, использовать мобильное приложение значительно удобнее — можно оперативно поменять или вернуть билет, отследить статус бронирования по пути в аэропорт, открыть посадочный талон на телефоне. Важно обеспечить пользователей всей необходимой информацией, чтобы в приложении было безопасно.
• Когда непонятно — страшно. Пользователи не знают, чего ждать, если нажать куда-то не туда. Важно, чтобы в приложении путь пользователя был простым и ясным.
• Пользователям важно чувствовать, что все под контролем и, при необходимости, им помогут: нужная информация в быстром доступе, можно оперативно получить ответы на вопросы, отслеживать статус брони. Важно показать, что “Белавия” поддерживает и заботится.

Что предлагаю

Изучение сайта “Белавия”, анализ конкурентов, боли пользователей стали фундаментом для апдейта UX и внедрения новых фичей. Я предлагаю:

Ценности, миссия, видение, метафора

Исследование привело меня к следующему этапу — определению ценностей, миссии, видения и визуальной метафоры новой “Белавиа”.

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

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

На основе ценностей сформулировала визуальную метафору: ясный путь в любом направлении.

Структура

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

Теперь, когда выполнена вся работа по проектированию, переходим к дизайну!

Поиск

Страница поиска рейсов предлагает самое важное: поиск с последними запросами, горячие билеты и популярные направления — ничего лишнего.

Теперь календарь показывает только доступные даты с указанием минимальной стоимости билетов. А на этапе поиска направления можно выбрать не только предыдущий запрос, но и “Куда угодно” в качестве пункта назначения.

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

Бронирование

Процесс бронирования начинается с выбора тарифа. Тут было важным показать описание тарифов так, чтобы оно было емким и понятным.

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

Мы помним, что одна из ценностей нового приложения — забота, поэтому теперь, в момент заполнения персональных данных, “Белавия” подсказывает:

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

Кайф же, да?

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

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

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

Рейс забронирован, ура! Быстро вышло, правда?

На странице подтверждения можно добавить рейс в календарь, скачать подтверждение о бронировании, а также перейти на страницу управления.

Управление бронированием

Контроль по-прежнему в наших руках. Раздел “My trips” позволяет:

• Быстро отследить, сколько дней осталось до рейса;
• Управлять бронированием;
• Открыть посадочный талон;
• Добавить другие услуги.

Отслеживание статуса бронирования помогает во многом:

• Понимаем, как скоро рейс;
• Можем докупить услуги онлайн;
• Получаем напоминания о следующих действиях (например, о том, что сейчас самое время пройти онлайн-регистрацию);
• Благодаря инструкциям о том, как добраться в аэропорт и как найти гейт, не боимся потеряться!

Посадочный талон, конечно, можно скачать, но лучше открыть его, красивого, в самом приложении.

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

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

Я очень люблю летать и люблю, когда получается подготовиться к путешествию легко и без стресса. С новым дизайном “Белавия” путь ясен в любом направлении.

Намасте!

Посмотреть этот проект на Behance
Связаться со мной в LinkedIn