Triplay: Дизайн для ИИ-планнера путешествий

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №1 — Интерфейсы на Dprofile
Triplay: Дизайн для ИИ-планнера путешествий — Изображение №2 — Интерфейсы на Dprofile


🔸 Клиент

Triplay — это ИИ-планнер путешествий. Сервис позволяет путешественникам в считанные секунды составлять удобные и интересные туристические маршруты в любом городе мира.

🔸 Задача

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


🔸 Решение

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

В исходном дизайне было много элементов с неочевидным значением (иконка замочка, тумблер AI-ассистента и др). Также, отсутствовала грамотная визуальная иерархия, из-за чего было не понятно, на что смотреть в первую очередь, а сам визуал казался нагруженным и безликим.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №3 — Интерфейсы на Dprofile
Triplay: Дизайн для ИИ-планнера путешествий — Изображение №4 — Интерфейсы на Dprofile




🔸 Решение

Я переработала визуальную иерархию так, что взгляд идет сверху-вниз по основным элементам и контроллам. Второстепенные функции скрыла в иконки с 3-мя точками. Убрала из хэдера кнопку переключения режима просмотра на карту, где её не найдут. Сделала табы переключения разделов в виде слов, а не иконок, чтобы точно было понятно, чего ожидать от соседних разделов. Для цепляющего визуала добавила яркое фото города, флаг страны, а нумерацию достопримечательностей сделала в виде воздушных шаров: получилась отличная “перекличка” с логотипом.

📈 Повторное исследование анализа записей пользовательских сессий и обратной связи показало, что удержание пользователей в первые сессии выросло с ~10% до ~60%.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №5 — Интерфейсы на Dprofile




🔸 Использование mobile-first подхода

Так как согласно статистике больше 80% пользователей сервиса заходят в него с мобильных устройств, я предложила взять за основу mobile-first подход. Поэтому сначала я разработала все мобильные интерфейсы, которые потом отлично легли и на десктоп. Это решение ускорило верстку десктопной версии в 2,5 раза.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №6 — Интерфейсы на Dprofile





🔸 Детализированные вайрфреймы

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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №7 — Интерфейсы на Dprofile
Triplay: Дизайн для ИИ-планнера путешествий — Изображение №8 — Интерфейсы на Dprofile





🔸 Приложение

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


Раздел “Мои путешествия”

Фирменные 2д иллюстрации отлично сочетаются с 3д плашками: дизайн получился ярким и запоминающимся.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №9 — Интерфейсы на Dprofile





Стартовый экран с регистрацией и авторизацией

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №10 — Интерфейсы на Dprofile





Создание плана путешествий

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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №11 — Интерфейсы на Dprofile





Настройки профиля и подписки

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №12 — Интерфейсы на Dprofile





🔸 Дизайн новых разделов с нуля


Основные флоу:

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №13 — Интерфейсы на Dprofile





Флоу добавления в маршрут локации с карты

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №14 — Интерфейсы на Dprofile





Флоу оптимизации маршрута

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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №15 — Интерфейсы на Dprofile
Triplay: Дизайн для ИИ-планнера путешествий — Изображение №16 — Интерфейсы на Dprofile




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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №17 — Интерфейсы на Dprofile





Онбординг

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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №18 — Интерфейсы на Dprofile
Triplay: Дизайн для ИИ-планнера путешествий — Изображение №19 — Интерфейсы на Dprofile





🔸 Маркетинговые материалы


Вебсайт

Для сайта я создала несколько дизайн-концепций хиро-блока.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №20 — Интерфейсы на Dprofile





Соцсети

Для Инстаграма я разработала шаблоны обложек постов, которые подходят для разных тем и поддерживают фирменный брендинг.

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №21 — Интерфейсы на Dprofile





Рекламные баннеры

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

Triplay: Дизайн для ИИ-планнера путешествий — Изображение №22 — Интерфейсы на Dprofile

Оценить

Добавить в коллекции...

От автора