В рамках работы над проектом, разработана новая дизайн-система для туристического сервиса Инна Тур
Она включала в себя создание макетов всех ключевых экранов для различных пользовательских сценариев, составление UI-кита, а также адаптивный дизайн для разных видов устройств. Проект был реализован в Figma и передан в разработку
Кейс Инна Тур
Редизайн многостраничного сайта компании с последующей передачей в разработку. Важно было сохранить фирменный стиль компании, при этом значительно улучшив удобство взаимодействия пользователей с сайтом
Цель проекта
Что было сделано:
Реализация
Дизайн-макеты переданы в команду разработчиков для дальнейшей реализации
4
Дизайн
Создан визуальный стиль, с упором на функциональность. Разработаны дизайн-макеты, включая адаптивы для различных устройств
3
Прототипы
На основе анализа, были проработаны пользовательские сценарии и созданы прототипы всех страниц в Figma
2
Аналитика
Проведен анализ текущего сайта и пользовательских сценариев, выявлены ключевые болевые точки в интерфейсе
1
Главная страница
На главной странице важно было обеспечить быстрое и удобное взаимодействие с пользователем, помогая ему сразу приступить к поиску тура
Верхняя часть экрана включает поисковый блок с фильтрами, ниже — популярные направления и календарь низких цен, дополненные отзывами клиентов и несколькими CTA кнопками с призывом к действию
Верхняя часть экрана включает поисковый блок с фильтрами, ниже — популярные направления и календарь низких цен, дополненные отзывами клиентов и несколькими CTA кнопками с призывом к действию
Поисковая строка – важный элемент главного экрана. Она позволяет пользователям быстро и удобно задавать параметры поездки. Включены поля для выбора места прибытия, дат заезда и выезда, а также количества гостей и комнат
Поисковая строка
Страницы выдачи
Представлены страницы выдачи. При заполнении поисковой строки, выводится информация о доступных турах. Пользователи видят список релевантных предложений с ключевой информацией (цена, рейтинг, краткое описание)
В верхней части экрана располагается информация о количестве найденных туров с возможностью быстрой сортировки по рейтингу или цене. Также можно воспользоваться элементом расширенной фильтрации, расположенном в левой части интерфейса
В верхней части экрана располагается информация о количестве найденных туров с возможностью быстрой сортировки по рейтингу или цене. Также можно воспользоваться элементом расширенной фильтрации, расположенном в левой части интерфейса
Проработана карточка тура. Важно было донести всю важную информацию (звездность отеля, особенности тура, отзывы). простой и наглядной инфографикой, избегая перегруза
Карточка тура
Элемент фильтрации, позволяющий пользователям настраивать параметры поиска по звёздности отеля, типу питания, рейтингу, особенностям путешествия и другим критериям. Также с помощью фильтров можно выбрать режим просмотра выдачи с картой. Это позволяет пользователю визуально оценить и сравнить расположение предложений
Фильтрация
Страница тура
Из поисковой выдачи, мы переходим к странице конкретного тура
На ней представлена полная информация предложения – стоимость, расположение, описание отеля и его преимуществ. Также пользователь может ознакомиться с отзывами других туристов и выбрать подходящий номер и перелет
На ней представлена полная информация предложения – стоимость, расположение, описание отеля и его преимуществ. Также пользователь может ознакомиться с отзывами других туристов и выбрать подходящий номер и перелет
При необходимости, пользователь может изменить предложение по перелету, нажав на соответствующую кнопку и открыв дополнительные варианты, которые можно отфильтровать по разным параметрам (аэропорт, авиакомпания, пересадки и прочее)
Изменение перелета
Вход и регистрация
Были разработаны элементы входа в личный аккаунт в формате pop-up окон. Дизайн ориентирован на простоту и удобство, поля для ввода данных интуитивно понятны
Также разработаны формы регистрации со всеми необходимыми взаимодействиями (от неверного ввода до подбора пароля) для удобства передачи макета в разработку. Дизайн интерфейса учитывает все варианты действий пользователя
Также разработаны формы регистрации со всеми необходимыми взаимодействиями (от неверного ввода до подбора пароля) для удобства передачи макета в разработку. Дизайн интерфейса учитывает все варианты действий пользователя
Для входа и регистрации, пользователю необходимо ввести номер телефона. Спроектировано несколько сценариев входа по коду, учитывая промежуточные, удачные и неудачные попытки пользователя
Вход и регистрация
Настройки
личного кабинета
личного кабинета
Настройки личного кабинета
Дизайн настроек личного кабинета включает в себя возможность изменения пароля и редактирования пользовательской информации
В разделе также отображена информация о цели сбора контактных данных с акцентом на их полной защите и конфиденциальности
В разделе также отображена информация о цели сбора контактных данных с акцентом на их полной защите и конфиденциальности
Пользователь может изменить имя, фамилию, email, номер телефона и пароль в личном кабинете
Редактирование профиля
Заказы пользователя
Разработан раздел заказов с отображением информации о поездках: название тура, даты, статус оплаты и детали размещения. Пользователь может просматривать и управлять текущими и прошлыми заказами, а также загружать данные туристов для каждого заказа
Интерфейс позволяет быстро найти нужный заказ, проверить его статус и перейти к редактированию или оплате при необходимости
Интерфейс позволяет быстро найти нужный заказ, проверить его статус и перейти к редактированию или оплате при необходимости
Карточка для быстрого и удобного ввода паспортных данных при бронировании тура. Простая структура, удобное переключение между туристами
Паспортные данные
