Мобильный интерфейс / Аналитика / Дизайн-система
Overlap
Знакомство по интересам, где причина совпадения видна сразу.
Рабочий проект · открытая версия · Figma
2022 · без публичных метрик запуска
Обзор
Рабочий проект про знакомство через общие интересы.
Гипотеза: знакомство проще начать, когда совпадение объяснено. В открытой версии показываю UX/UI-слой без внутренних данных: сценарий, экраны, аналитику и правила интерфейса.
Работа дизайнера
Собрала решение как цепочку артефактов: сценарий, прототип, аналитика, UI kit.
Вход, поиск и карточка строятся вокруг причины совпадения.
Мобильные состояния.
вход, выдача, профиль
Карта интересов отдельно.
категории, фильтры, распределение
Правила интерфейса.
сетка, кнопки, поля, чипы, состояния
Архитектура кейса
Развела продуктовую логику: сигнал, категория, причина, карточка.
- Queen
- фото
- сообщества
- город
- 01Собратьинтересы
- 02Разложитьпо категориям
- 03Сравнитьс выдачей
- 04Объяснитьв карточке
Причина подбора видна рядом с человеком, а не спрятана в алгоритме.
Путь пользователя
Сначала человек понимает причину совпадения, потом решает, смотреть ли профиль.
Этот блок показывает не ещё одну схему данных, а последовательность экранов и состояний для прототипа.
- 01Вход без анкетыVK даёт стартовые интересы.
- 02Первый подборПользователь видит людей и общий контекст.
- 03Фильтры поискаПол, город и возраст помогают сузить выдачу.
- 04Профиль с причинойКарточка объясняет, почему человек попал в подборку.
- Queen
- арт-жанры
- Simply Photo
- CHARM
Логика подбора
Данные не спрятаны: они объясняют совпадение в интерфейсе.
Ключевые решения
Как объяснить совпадение без лишней нагрузки на пользователя.
Вход через VK вместо длинного заполнения профиля.
Первый шаг короче. Для запуска нужно проверить согласие, доверие и сценарий отказа от VK.
Карточка человека объясняет, почему он попал в подборку.
Интересы и жанры видны как причины рекомендации.
Аналитика интересов вынесена в отдельный слой.
Карта и распределение не мешают знакомству.
Мобильный интерфейс
Мобильный интерфейс держится на трёх состояниях.
Три опоры: вход, карточка человека, поиск.
- фото как вход в профиль;
- интересы отдельными блоками;
- действие не перекрывает контент.
Аналитика интересов
Карта интересов вынесена в отдельный аналитический слой.
Атрибут, исполнитель, распределение, динамика.
Дизайн-система
После экранов я собрала UI kit: сетку, цвета, кнопки, поля и состояния.
Акцент: действия и ошибки.
Синий: экраны и карта.
Состояния вынесены отдельно.
Системная сборка
Систему можно передавать дальше: состояния, сетка и компоненты.
Selected / Error
Карта / формы / UI kit
Повторяемые элементы
Полные макеты
Полные макеты показывают, как собраны экраны, карта и UI kit.
Вывод
Я разложила идею знакомства по интересам на сценарий, экраны, аналитику и UI kit.
В кейсе видно, как устроены первый вход, карточка совпадения, карта интересов и правила компонентов.
