Главный экран приложения с картой и дропдауном
Overview
Во время моей учебы в университете ко мне обратился мой преподаватель на студенческом акселераторе, на котором студенты показывают свои проекты. Он предложил идею мобильного приложения "СВЕТОФОР" — сервиса для планирования досуга, поиска мероприятий и компании.
На старте: базовый прототип в Figma, частичная front-end реализация и минималистичный UI без опоры на пользовательские сценарии, не учитывающий потребности целевой аудитории.
Экран «Друзья»
Экран карточки маршрутов, а также картой его
Проблема
Пользователи испытывали сложности с выбором мероприятий:
- нерелевантные фильтры
- перегрузка предложениями
- слабая социальная логика (поиск компании, совместные решения)
Задача
Переделать архитектуру и пользовательские пути, внедрить персонализацию и социальную навигацию, адаптировать интерфейс под разные группы пользователей и подготовить дизайн к разработке.
Процесс
Аудит
анализ структуры и логики прототипа
Исследование
опросы и интервью пользователей
Гипотеза
персонализация + карта
UX
перепроектирование сценариев
UI
визуальная система интерфейса
Тестирование
юзабилити и итерации
Hand-off
подготовка к разработке
01020304050607
Решение — ключевые элементы и их паттерны использования
Центральный экран и слои карты
Карта с местами и друзьями – на нем пользователь сразу видит мероприятия, друзей, интересные места поблизости, а также на нем можно сортировать события по категориям, тегам и интересам.
Основной паттерн
Интерактивная карта, напоминающая Zenly, где пользователи могут видеть места, своих друзей и их активность в реальном времени, а также в слоях есть список параметров и фильтров, где пользователи могут фильтровать отображения мест, чтобы им показывались только интересные.
Экран "Что будем делать?"
Экран меню – один из основных экранов приложения.
Кнопка перехода в поиск
Выход из меню на карту
Плитки с основным
функционалом приложения
Основной паттерн
Список Плиток с функциями приложения, через который пользователь взаимодействует с ним.
Сценарий поиска и фильтры
Обычный поиск
Поиск с помощью фильтров
Поиск с фильтрации по изображению (фотография или камера)
Основной паттерн
Пользователь заходит в поиск, вбивает в инпут то, что ему нужно найти и применяя гибкие фильтры находит. Поиск работает по ключевым словам, категориям и фильтрам.
Маршруты
Сервис не только строит маршрут, но и предлагает релевантные места по пути. Рекомендации формируются динамически с учётом предпочтений пользователя, времени суток и популярности локаций. В подборку могут интегрироваться рекламные точки, поддерживая монетизацию.
Основной паттерн
Список Плиток с функциями приложения, через который пользователь взаимодействует с ним.
Карточка мероприятия и места
Дизайн карточки мероприятия включает ключевые данные: название, время, описание, организаторов, список участников.
Профили пользователей
Все профили пользователей выстроены по одной структуре, отличающейся лишь по мелочам, не важно это твой профиль, друга или потенциального друга, они похожи, что упрощает жизнь пользователям.
Друзья и коммуникация
Пользователь может находить своих друзей, формировать круги друзей просматривать истории, общаться планировать мероприятия и многое что другое.
Рекомендации и подборки
Умная система рекомендаций предлагает события на основе предпочтений, геолокации и социальной активности.
Результат
- Переработана архитектура и пользовательские пути — упрощено принятие решения
- Концепция персонализированного поиска + карта дала дорожную карту для A/B-тестов
- Ожидаемые эффекты (гипотеза): сокращение времени поиска ~ 30%, рост вовлечённости ~ 25%
- Прототип готов к следующей итерации разработки (интеграция с back-end)
Инструменты
Figma
Интерактивные прототипы
Интервью/опросы
Стартовый front-end
