Mosaiq

Контекст

Mosaiq был экспериментом креативной команды: маркетологи, контент-отдел, разработчик и я как продуктовый дизайнер. Мы проверяли, сможет ли команда с хорошей насмотренностью сделать продукт, который хорошо продаётся.

Что было не так

1. 01Командный прототип не учитывал часть сценариев и пограничных случаев.
2. 02У команды не было общей структуры продукта, от которой можно оттолкнуться.
3. 03pen.dev плохо подходил для совместной работы и после 80 экранов начал сильно тормозить.

Задача

Быстро превратить командный прототип в продуманный продукт и проверить, насколько AI может ускорить работу всей команды: на макеты опираются и моушн-дизайнеры, и разработка, поэтому от скорости дизайна зависит скорость всех.

Что сделала

1. 01Проанализировала конкурентов и оформила для команды документ: что у них работает, что взять и что улучшить, чтобы продукт с первой версии опирался на проверенные решения.
2. 02Провела аудит командного прототипа и предложила доработки, чтобы закрыть пропущенные сценарии до разработки.
3. 03Сформировала структуру продукта, от которой отталкивалась вся команда.
4. 04Выстроила работу с Claude Code: правила, окружение и систему ревью. Нейросеть взяла на себя сборку экранов и файлов, а я отвечала за решения и качество.
5. 05Собрала визуальный дизайн всех экранов чуть больше чем за неделю, параллельно с разработкой.
6. 06Перенесла проект в Figma и собрала дизайн-систему из 130+ компонентов с токенами для тёмной и светлой темы, чтобы команда и разработка работали с одним источником правды.
7. 07Оформила каждый раздел бордом с user flow, состояниями экранов и ссылками на компоненты, чтобы разработка собирала экраны без лишних вопросов.
8. 08Провела UI-аудит собранного приложения: сравнила 16 экранов с макетами и составила 36 правок для разработки.

Дизайн-система

Разделила систему на основу, базовые компоненты и компоненты приложения. Цвета собраны из примитивов в семантические токены для тёмной и светлой темы, а типографика, отступы и скругления заданы единой шкалой, поэтому любой экран собирается из готовых частей и выглядит единообразно.

User flow

Каждый раздел оформила бордом со схемой переходов и всеми состояниями экрана, чтобы разработка видела полную картину и собирала экраны без лишних вопросов. Экраны в user flow собраны из компонентов, поэтому любая правка в макетах сразу подтягивается во все схемы.