Wayfare
Travel Marketplace App
Подготовка к путешествию часто превращается в хаос: гаджеты покупаются в магазине электроники, чемоданы — в другом месте, а специальная одежда ищется по всему интернету.
О проекте
Wayfare — это нишевый маркетплейс, созданный специально для современных путешественников. Приложение объединяет все категории товаров (от дронов до аптечек) в единую экосистему, предлагая пользователю не просто товары, а готовые решения для поездок.
Обычные маркетплейсы перегружены информацией и не дают эстетического удовольствия, которое так важно для travel-аудитории. Пользователю сложно визуализировать, как экипировка будет выглядеть в реальных условиях.
Цели проекта
Создать интуитивный UX:
Сократить путь пользователя от поиска до покупки (Search-first approach).
Разработать "воздушный" UI:
Использовать стиль "Clean Minimalism", чтобы интерфейс не отвлекал от контента.
Внедрить эмоциональный контент:
Использовать высококачественные изображения, передающие атмосферу приключений (горы, туман, природа), чтобы вдохновлять на покупку.
Сократить путь пользователя от поиска до покупки (Search-first approach).
Разработать "воздушный" UI:
Использовать стиль "Clean Minimalism", чтобы интерфейс не отвлекал от контента.
Внедрить эмоциональный контент:
Использовать высококачественные изображения, передающие атмосферу приключений (горы, туман, природа), чтобы вдохновлять на покупку.
Задачи проекта:
Исследование
Перед началом проектирования я проанализировал основные решения, которыми пользуются путешественники для покупки экипировки.
Основная гипотеза заключалась в том, что существующие площадки либо слишком утилитарны и перегружены, либо не дают ощущения "путешествия".
Я выделил ключевых конкурентов и составил карту эмпатии, чтобы понять боли пользователей.
Основная гипотеза заключалась в том, что существующие площадки либо слишком утилитарны и перегружены, либо не дают ощущения "путешествия".
Я выделил ключевых конкурентов и составил карту эмпатии, чтобы понять боли пользователей.
Спортмастер
Сильный ассортимент, но интерфейс часто перегружен промо-слоями.
Понятность интерфейсасредняя
Уровень “шума” (баннеры/акции)высокий
- Огромный ассортимент и программа лояльности.
- Перегруженность баннерами и акциями усложняет навигацию.
- Больше “каталог”, чем помощник для путешественника.
Ozon
Быстро и доступно, но тревел-сценарии и премиум подборки не в приоритете.
Понятность интерфейсавыше среднего
Доверие к премиум-экипировкесреднее
- Быстрая доставка, низкие цены, широкий выбор.
- Сложно гарантировать качество “премиум” сегмента.
- Нет заточенных подборок для путешественников.
Wayfare App
Минимум отвлекающих элементов → максимум пользы для поездки и покупки.
86%
Чистый и вдохновляющий интерфейсочень высокий
Подборки экипировки под локациивысокий
Персонализация и умный поисквысокий
Плавный путь к покупкеочень высокий
- Чистый и “дорогой” UIФокус на контенте и выборе, без перегруза
- Готовые тревел-наборыПодборки под города/погоду/тип поездки
- ПерсонализацияРекомендации по стилю, бюджету и маршруту
- Понятный UXОт подбора до покупки — без лишних шагов
Путешественникам приходится выбирать между удобством доставки (Ozon) и наличием специализированной экипировки (Спортмастер), жертвуя эстетикой и эмоциями.
Решение Wayfare: Объединить функциональность маркетплейса с эстетикой travel-журнала. Мы продаем не просто чемодан, а предвкушение поездки.
Решение Wayfare: Объединить функциональность маркетплейса с эстетикой travel-журнала. Мы продаем не просто чемодан, а предвкушение поездки.
Проект и Структура
Прежде чем приступить к визуальному оформлению, я сосредоточился на логике и структуре приложения. Этап вайрфрейминга позволил проработать все ключевые пользовательские сценарии (User Flows) без отвлечения на цвета и графику.
Учитывая масштаб экосистемы Wayfare, охватывающей сотни товаров от гаджетов до аптечек, для презентации UI-концепции был выбран один репрезентативный раздел — «Багаж».
Была создана карта экранов высокой детализации, охватывающая весь путь пользователя — от онбординга и регистрации до навигации по каталогу, фильтрации и успешного оформления заказа. Это обеспечило интуитивно понятный и последовательный опыт взаимодействия.
Учитывая масштаб экосистемы Wayfare, охватывающей сотни товаров от гаджетов до аптечек, для презентации UI-концепции был выбран один репрезентативный раздел — «Багаж».
Была создана карта экранов высокой детализации, охватывающая весь путь пользователя — от онбординга и регистрации до навигации по каталогу, фильтрации и успешного оформления заказа. Это обеспечило интуитивно понятный и последовательный опыт взаимодействия.
Покупка чемодана — это технически сложный сценарий, включающий выбор вариаций (цвет, размер S/M/L), работу с фильтрами и визуальную оценку габаритов. Проработанная логика этого раздела масштабируется на все остальные категории приложения, обеспечивая единый паттерн взаимодействия для пользователя.
Визуальный стиль Wayfare построен на балансе между магией путешествий и строгой функциональностью. Мы отказались от стандартных «туристических» голубых оттенков в пользу более глубокого и эмоционального сочетания.
Визуальный стиль
Dark Graphite (Темный графит)
HEX: #1F1F1F / #333333
Роль: Текст и контраст (Typography).
Значение: Вместо чистого черного (True Black) мы используем глубокие оттенки графита. Это снижает нагрузку на глаза при чтении описаний товаров, сохраняя при этом высокую контрастность и строгий, современный вид интерфейса. Обеспечивает отличную читаемость на белом фоне.
HEX: #1F1F1F / #333333
Роль: Текст и контраст (Typography).
Значение: Вместо чистого черного (True Black) мы используем глубокие оттенки графита. Это снижает нагрузку на глаза при чтении описаний товаров, сохраняя при этом высокую контрастность и строгий, современный вид интерфейса. Обеспечивает отличную читаемость на белом фоне.
Accent Orange (Акцентный оранжевый)
HEX: #FF7043
Роль: Акцентный цвет (CTA & Highlights).
Значение: Энергичный и теплый цвет, напоминающий рассветное солнце на вершине горы. Он отвечает за действие: кнопки «Купить», уведомления и важные иконки. Оранжевый создает идеальный контраст с фиолетовым (комплиментарная пара), направляя внимание пользователя к целевому действию и вызывая эмоцию радости.
HEX: #FF7043
Роль: Акцентный цвет (CTA & Highlights).
Значение: Энергичный и теплый цвет, напоминающий рассветное солнце на вершине горы. Он отвечает за действие: кнопки «Купить», уведомления и важные иконки. Оранжевый создает идеальный контраст с фиолетовым (комплиментарная пара), направляя внимание пользователя к целевому действию и вызывая эмоцию радости.
Brand Purple (Фирменный фиолетовый)
HEX: #7F51DB
Роль: Основной цвет бренда (Primary Color).
Значение: Этот оттенок символизирует глубину, творчество и магию предвкушения поездки. Он ассоциируется с сумерками в горах и ночным небом, создавая премиальный и спокойный образ приложения. Используется в заголовках, градиентах и ключевых элементах брендинга, чтобы выделить Wayfare на фоне конкурентов.
HEX: #7F51DB
Роль: Основной цвет бренда (Primary Color).
Значение: Этот оттенок символизирует глубину, творчество и магию предвкушения поездки. Он ассоциируется с сумерками в горах и ночным небом, создавая премиальный и спокойный образ приложения. Используется в заголовках, градиентах и ключевых элементах брендинга, чтобы выделить Wayfare на фоне конкурентов.
Inter
Для интерфейса Wayfare был выбран шрифт Inter.
Это специально спроектированная гарнитура для компьютерных экранов.
Его главная особенность — высокая читаемость .
Благодаря высокому строчному знаку (x-height), текст остается четким даже в самом мелком размере — например, в подписях к иконкам или характеристиках товаров. Inter обладает нейтральным характером: он не перетягивает внимание на себя, позволяя пользователю сфокусироваться на главном — фотографиях путешествий и выборе экипировки.
Это специально спроектированная гарнитура для компьютерных экранов.
Его главная особенность — высокая читаемость .
Благодаря высокому строчному знаку (x-height), текст остается четким даже в самом мелком размере — например, в подписях к иконкам или характеристиках товаров. Inter обладает нейтральным характером: он не перетягивает внимание на себя, позволяя пользователю сфокусироваться на главном — фотографиях путешествий и выборе экипировки.
Главный экран
Решение: Использование Bento Grid. Вместо стандартного списка категорий, я использовал крупные, визуально привлекательные карточки.
Это позволяет пользователю мгновенно считывать разделы:
UX-акцент: На главном экране доминирует строка поиска. Мы понимаем, что опытный путешественник часто знает, что ищет. Убраны лишние заголовки, чтобы максимизировать полезное пространство.
Это позволяет пользователю мгновенно считывать разделы:
- Гаджеты: Технологичность и свобода.
- Багаж: Надежность и стиль.
- Здоровье: Безопасность и забота.
- Одежда: Комфорт в любых условиях.
UX-акцент: На главном экране доминирует строка поиска. Мы понимаем, что опытный путешественник часто знает, что ищет. Убраны лишние заголовки, чтобы максимизировать полезное пространство.
Карточка товара
Акцент на продукт. Карточка товара спроектирована так, чтобы товар был героем. Белый фон и минималистичная типографика позволяют оценить детали (например, фактуру алюминиевого чемодана). Кнопки целевого действия (CTA) расположены в зоне большого пальца для удобства использования одной рукой.
В результате работы над концептом Wayfare удалось создать интерфейс, который балансирует между функциональностью интернет-магазина и эстетикой travel-журнала.
- Чистота: Интерфейс не перегружен.
- Эмоция: Визуал вызывает желание отправиться в путешествие.
- Удобство: Логичная навигация и понятные паттерны взаимодействия.
Результат
Спасибо за просмотр!