Стояла задача разработать интерфейс сервиса по планированию путешествий и маршрутов. В проект входит как поиск и рекомендации интересных мест, так и планировщик маршрута с картой, возможностью добавлять свои места, вычитывать километраж поездки, делиться впечатлениями. На сайте есть блог со статьями о путешествиях, рекомендации объектов и их описаний, а также подборка туров и экскурсионных программ.
О проекте
У заказчика уже была подготовлена структура и частичная верстка. Нужно было разработать стилистику и привести все к красивому виду
Что сделано
Исследования и подготовка Дизайн-концепции Дизайн всего интерфейса Адаптивные версии
более 50 часов
время разработки
Концепции
У заказчика был готовый логотип, поэтому цвет и стилистика должен был отталкиваться от него. Я подготовила несколько вариантов концепций первого экрана, чтобы определиться с основной идеей.
Главная
Главный экран служит для того, чтобы направлять пользователя на нужные ему страницы и услуги. Поэтому здесь много различного типа навигации, ссылок, карточки с призывами к действия и тд. По главной странице понятно чем занимается компания, какие есть услуги и материалы.
Карта
Карта - это основной функционал сервиса. Здесь представлены все объекты, которые есть на сайте. В них входят различного рода достопримечательности, отели, топовые места, курорты, апартаменты. Здесь можно быстро посмотреть карточку объекта и добавить ее в избранное или к маршруту
Создание маршрута
Интерфейс карты должен был быть интуитивно понятным и не сильно отличаться от уже привычных сервисов. Тем более, что у заказчика уже были готовые API и он хотел их оставить, чтобы упростить разработку.
Я ориентировалась на Гугл и Яндекс карты, оставила привычные паттерны и постаралась сделать интерфейс похожим. Здесь пользователь может составить маршрут из разных локаций. Распределить маршруты по дням, увидеть продолжительность по времени и расстояние всего маршрута. Эти данные сохраняются в ЛК. Также пользователь может поделиться маршрутом и рассказать о своих впечатлениях.
Решение
Решение
Нам важно, чтобы пользователь воспользовался услугами партнером. Поэтому на странице разместили блок с другими похожими товарами, если этот не подойдет. На первом экране большие качественные фотографии, возможность добавить в избранное и поделиться, а также большая форма с контактами для связи.
Карточка товара
Это партнерская страница. Здесь будут располагаться предложения партнеров по турам, экскурсиям, отелям. Идея в получении процентов с привлеченного клиента.
Карточка объекта
В карте можно посмотреть короткую информацию об объекте, а здесь более детальная и полная. Отсюда можно добавить объект к маршруту, открыть его на карте.
Курорты
Здесь подборка всех мест с большим количеством фильтров. мы сделали 3 таких страницы с курортами, событиями и местами
Истории
Ни один сайт о путешествиях не обходится без блога. Сделали это в формате историй, которыми вы можете поделиться. Для удобства разделила их по категориям.
Личный кабинет
В личном кабинете собрана вся информация, которая может понадобится при планирований путешествий - какие места и страны посетил, какие только планирует, список и редактирование маршрутов, избранные товары, информация о пользователе.
Адаптивные версии
Я разработала планшетную и мобильную версию. Мобильной уделили особое внимание, так как с него планируется наибольший трафик.
UI kit
На таких проектов не обходится без подготовки макетов к верстке. Я подготовила UI kit, показала стилистику, анимации и интерактивные прототипы, чтобы у верстальщиков не возникало вопросов.
Более 80 макетов и более 50 часов
Мы получили в итоге. Со всеми состояниями, модальными окнами, адаптивом под планшетную и мобильную версию. Ждем запуска первой версии, чтобы полюбоваться и протестировать)