UI/UX дизайн приложения аудиогидов по городам с упором на самостоятельные путешествия и погружение в атмосферу города через маршрут и аудио-истории
Создать продукт, в котором пользователь может начать тур без регистрации, сложных действий и скачивания приложения - прямо из браузера. Продукт - мобильное приложение с аудиогидами по городам, позволяющее пользователю проходить маршруты в своем темпе. На момент начала работы отсутствовала проработанная UX-логика и единая структура экранов
Сделать понятную и быструю структуру выбора и покупки тура, чтобы пользователь принимал решение без лишних шагов и сомнений
Разработать интерфейсную систему, которую можно легко расширять под новые города, маршруты и контент без переработки дизайна
Продумать, как пользователь взаимодействует с приложением во время прогулки: карта, аудио, переключение между точками и “историями по дороге”. В продукте присутствует несколько сценариев потребления контента (просмотр точек, переход между ними, прослушивание “истории по дороге”). Важно было объединить их в единую логическую модель без дублирования состояний
Не просто нарисовать экраны, а описать поведение: загрузка, ошибки, оффлайн, воспроизведение аудио, возврат из оплаты
Сделать интерфейс, который легко реализуется через Tailwind CSS и shadcn/ui без сложных кастомных решений
Интерфейс построен на базовых компонентах (карточки, кнопки, поля), без визуальной перегрузки. Это ускоряет разработку и делает продукт понятным. Чтобы сократить сложность разработки и повысить консистентность, ключевые экраны построены на одних и тех же паттернах (hero + контент + sticky action / overlay состояния), что упрощает масштабирование продукта
Ключевые сценарии (авторизация, покупка, прохождение тура) спроектированы как система состояний, а не отдельные экраны. Перед переходом к визуальному дизайну была полностью проработана UX-логика продукта: построен user flow с основными сценариями, описаны состояния экранов (loading, error, empty), учтены edge cases (offline, ошибки оплаты, возврат в тур). Это позволило избежать противоречий на этапе UI и упростило дальнейшую разработку
Дизайн не конкурирует с контентом - акцент на маршруте, аудио и атмосфере города. Визуал поддерживает, но не отвлекает
Люди, которые хотят исследовать город самостоятельно, без гида, но с интересным контентом и структурой маршрута
Пользователи, которым важно быстро выбрать маршрут и сразу начать, без долгой подготовки
Люди, привыкшие к мобильным сервисам, картам и аудиоформатам, которым важно удобство и скорость
Работа над проектом началась с погружения в материалы клиента и понимания логики продукта. Задача заключалась не просто в отрисовке экранов, а в выстраивании целостного пользовательского опыта
На первом этапе были изучены пользовательские сценарии, структура экранов и логика продукта, предоставленные клиентом. Важно было понять контекст использования, прохождение маршрута в реальном городе, взаимодействие с контентом “на ходу” и ограничения внимания пользователя. Это позволило выявить слабые места в текущей структуре и определить ключевые UX-задачи
Был собран полный user flow, от входа в приложение до прохождения тура и возврата к маршруту. В процессе удалось упростить навигацию, объединить дублирующиеся сценарии и зафиксировать единую логику поведения интерфейса, особенно в части переходов между картой, медиа и списком точек
Особое внимание было уделено состояниям интерфейса: загрузка, ошибки, отсутствие интернета, различные состояния маршрута и воспроизведения аудио. Были также проработаны edge-cases, такие как возврат в приложение, прерывание сценария или частично прослушанный контент. Это позволило сделать поведение приложения предсказуемым и снизить потенциальные UX-риски
После согласования UX-концепции была разработана визуальная система интерфейса: определено стилевое направление, собраны ключевые экраны и состояния. На основе этого был создан интерактивный прототип, демонстрирующий основные пользовательские сценарии и логику взаимодействия
Финальный этап включал сборку дизайн-системы и структурирование Figma-файла с учетом передачи в разработку. Интерфейс был выстроен через компоненты и variants, с учетом дальнейшей реализации на Tailwind CSS и shadcn/ui, что обеспечило удобство и прозрачность для команды разработки
Готовы начать?
Даже если пока нет четкого ТЗ. Разберемся вместе, что лучше сделать, как упростить и где усилить. Без лишнего и по делу
Я не начинаю с визуала. Сначала разбираюсь, как человек будет пользоваться продуктом, где он может запутаться и что можно упростить
