{"id":14270,"url":"\/distributions\/14270\/click?bit=1&hash=a51bb85a950ab21cdf691932d23b81e76bd428323f3fda8d1e62b0843a9e5699","title":"\u041b\u044b\u0436\u0438, \u043c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a \u2014 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0433\u043e\u0440\u0435","buttonText":"\u041d\u0430 \u043a\u0430\u043a\u043e\u0439?","imageUuid":"f84aced9-2f9d-5a50-9157-8e37d6ce1060"}

Путешествия по-новому: как мы делали дизайн приложения для поиска туров FUN&SUN

В марте 2022 года к нам обратился сервис для путешествий FUN&SUN. Компания планировала выпустить мобильное приложение TourAgent, в котором люди смогли бы быстро находить подходящие туры с помощью реальных турагентов. И нам, кроме прочего, доверили отвечать за брендинг проекта.

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

Задача

Когда FUN&SUN пришёл к нам, у них не было брендбука или чётких требований к визуальному стилю, а приложение было в формате MVP.

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

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

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

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

Мобильное приложение по сути является посредником между пользователем и турагентом.

Аналитика

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

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

Тем не менее есть прогрессивные компании, опыт которых стоит учитывать. Например, Airbnb или Aviasales.

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

Общая концепция. Главный экран

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

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

Еще один вариант — поэтапный онбординг с возможными вопросами о путешествии.

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

В итоге мы с клиентом пришли к решению — на главном экране объединить две смысловые части:

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

Личный кабинет и подбор туров

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

Статус заявки и предложения от турагентов отображаются у пользователя в разделе «Заявки».

Дальше остается выбрать, забронировать и оплатить подходящий вариант.

Чтобы помочь пользователю в этом нелегком деле мы долго работали над UX/UI:

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

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

А как же ощущение путешествия

После работы над прототипами мы приступили к созданию визуального стиля.

Путешествия — всегда про эмоции и впечатления. Эта тема тесно связана с отпуском, отдыхом и релаксом, и именно эту атмосферу мы хотели передать.

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

Тогда возникла идея использовать иллюстрации, и мы разработали восемь вариантов.

В итоге мы остановились на варианте, который объединяет в себе два важных критерия:

  • Отражает человекоориентированность — вместо роботов в приложении живые турагенты, которые подбирают тур с учётом всех требований клиента.
  • Создаёт атмосферу путешествий, с красивыми эффектными пейзажами и достопримечательностями

Финал

Приложение уже в релизе!

Пользуйтесь, наслаждайтесь, отдыхайте )

И не забывайте давать обратную связь!

P.S. Подписывайтесь на нас в ВК и других социальных сетях :)

0
24 комментария
Написать комментарий...
Дмитрий Ольшевский

вот эти картинки порядком подзбали. это мягко сказано. тесты какие были? от них только мусор конский и их хочется събать науй с экрана. я про заипавший стиль этот для долбебов

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

В данном случае мы рассматривали множество стилей - этот отвечал всем нашим задачам, тесты на картинки не проводили

Ответить
Развернуть ветку
Огурец Молодец

Хм, странно, что акцент на реального, персонального и живого агента, а вы все равно отказались от реальных качественных фоток в пользу абстрактных иллюстраций из 2020го :-\

Ответить
Развернуть ветку
Claudia Mitchell

они художники, они так видят

Ответить
Развернуть ветку
Елизавета Дроздова

Скора эта мода пройдёт

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

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

Ответить
Развернуть ветку
Генрих Элер

Здравствуйте! Со всем уважением, но:
Первый бан за иллюстрации, вы их тупо на шаттере брали по доллару за штуку? Второй бан - типографика, столько разных кеглей и начертаний одновременно на одном экране я давно не видел.
Третий бан - (если к этому стремились) то проще не стало, акцентов нет, подсказок нет, а количество атрибутов осталось как и у конкурентов.
Четвертый бан - за презентацию. Вы так и отправляли клиенту, или это пытка только для пользователей виси? Причём тут черно белые фотки, знаки "Ок", черные точки раскиданные по углам, коллажи, и такое количество красного цвета, которое убивает малюсенькие экраны смартфона на слайдах и выходит на первой план?

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Спасибо за комментарий.
1. Иллюстрации отрисовывали сами. Но использование стоков тоже входит в нашу практику, особенно если речь идет о фотографиях
2. К каждому проекту мы разрабатываем тайпстайл, которым ограничивается использование разного рода начертаний, их ровно столько, сколько оптимально мы определили для всех задач в этом приложении. Каждое начертание всегда добавляем очень критично, только если это действительно оправдано.
3. Мы, как минимум, тестируем свои решения на фокус-группах, но и это не дает гарантии, что все будет идеально отрабатывать в бою, это приложение постоянно будет развиваться и дорабатываться, как и должно происходить со всеми диджитал продуктами.
4. Мы не отправляли данную презентацию клиенту, это фирменное оформление нашей студии

Ответить
Развернуть ветку
lady marr

На вкус и цвет все фломастеры разные. Мне, например, зашло

Ответить
Развернуть ветку
Константин Ж

Сколько денег?

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

К сожалению, не можем сказать. Подписан NDA

Ответить
Развернуть ветку
Константин Ж

Ожидаемо.

Ответить
Развернуть ветку
Вовчик

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

Мы выбирали между фото и иллюстрацией и победили иллюстрации, потому что сейчас так модно.

Мы взяли 8 заезженных иллюстрация и собрали их из бесплатных элементов.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Давно Зареган

С регистрацией!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Roman Tretyakov

В аппсторе до сих пор старая прила стоит. Релиз только на андроиде был?

Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

На айос тоже )
Вот тут приложение
https://apps.apple.com/ru/app/touragent/id1553719196

Ответить
Развернуть ветку
Roman Tretyakov

В моем регионе не доступно новое. ( Казахстан ). Хотя старое доступно

Ответить
Развернуть ветку
Igor

Я же правильно понимаю, что вы занимались исключительно дизайном и навигацией через экраны? Само приложение в итоге разрабатывала другая компания?
P.s. 8 оценок в эпсторе - это сильно)

Ответить
Развернуть ветку
Igor
Ответить
Развернуть ветку
Дизайн-студия 65pixels
Автор

Все верно, мы разрабатывали только дизайн. Приложение совсем недавно вышло в релиз)

Ответить
Развернуть ветку
Михаил Лушников

🔥

Ответить
Развернуть ветку
Михаил Лушников

🔥

Ответить
Развернуть ветку
21 комментарий
Раскрывать всегда