Кейс 2 · Продукт и дизайн-система
Иннополис Клуб
Программа лояльности для жителей города и её дизайн-система на пять продуктов
Единственный продуктовый дизайнер проекта с первого дня до закрытия программы: фирменный стиль, дизайн-система, приложения iOS и Android, кабинет вендора, админ-панель города и промо-сайт. Пять тысяч активных пользователей, полторы сотни вендоров-партнёров и 240 000 операций в год на одной библиотеке компонентов.
- Пользователи
- 5 000+
- Операций в год
- 240 000
- Продуктов
- 5
- Мастер-компонентов
- 3 188
- Роль
- Единственный Product Designer, end-to-end: продукт, дизайн-система, менторство
- Период
- 2021 — 2026 (последние 1,5 года — постановка задач и менторство)
- Команда
- ~10 человек: аналитика, разработка, PM; дизайн — за мной
- Платформы
- iOS, Android, кабинет вендора (web), админ-панель города, сайт
- Заказчик
- ООО «Развитие Иннополиса» · социально мотивированный, убыточный по природе проект
Контекст и задача
Иннополис — молодой город, где малый бизнес живёт за счёт местных жителей, а удержать их от поездок в Казань — отдельная задача. Заказчик запускал программу лояльности с балльной системой, которая должна была:
- стимулировать жителей пользоваться локальными услугами — кафе, спорт, быт, аренда;
- дать бизнесу-партнёрам канал привлечения и удержания клиентов;
- дать городу реальную картину экономической активности.
Проект по своей природе социальный и убыточный — его цель поддерживать малый бизнес города, а не зарабатывать. Это определило приоритеты: быстрый запуск, дешёвая поддержка и единая система для всех сторон — пользователя, вендора и города.
Задача разрослась вместе с продуктом: стартовав как одно мобильное приложение, программа дошла до пяти продуктов — приложения iOS и Android, кабинет вендора для 150+ партнёров, админ-панель города и промо-сайт. Проектировать их разрозненно было невозможно, поэтому продукт и дизайн-система росли вместе.
Что сделано в продукте
- Приложения iOS и Android — онбординг и авторизация (телефон, SMS-код, пароль, PIN, Face ID и Touch ID), баланс баллов, поиск вендоров, QR-сканирование и моментальное списание в точке, история операций, семейный доступ, лимиты, витрины и подписки.
- Кабинет вендора — приём заказов, подтверждение списаний, работа с QR, статистика по клиентам и транзакциям, торговые точки, рассылки.
- Админ-панель города — заявки на подключение вендоров и их апрув, модерация, лимиты и витрины, подписки, бухгалтерия, пользователи, чаты и аналитика по активности города.
- Фирменный стиль — логотип за 2 итерации, весь фирменный стиль собран за неделю, брендовый шрифт Lack и авторская палитра.
Продуктовые решения принимались по данным: объём операций и число партнёров росли год к году, а MVP вышел за 4 месяца — часть фич осознанно допиливали после релиза.
Экраны приложения
Главные сценарии в двух темах: баланс и клубная карта, оплата по QR, профиль и семейный доступ. Один и тот же интерфейс на iOS и Android — на одних и тех же токенах, поэтому тёмная тема собирается переключением переменных, а не отдельным макетом.
Админ-панель города
Плотные таблицы на 1280×1024: заявки и выплаты, реестр вендоров, модерация точек, пользователи и бухгалтерия. Компоненты системы рассчитаны на 216 вариантов одного поля ввода — именно под такие экраны.
Кабинет вендора
Рабочее место партнёра: транзакции и вознаграждения, документы, приём онлайн-заказов и проверка чеков. Тот же интерфейс адаптирован под мобильные браузеры.
Промо-сайт программы
Публичная часть: витрина программы для жителей и вендоров, собранная из тех же компонентов и токенов, что и продукты.
Дизайн-система: состав и масштаб
Библиотека собрана с нуля и держит все пять продуктов: компоненты с вариантами, семантические токены и две темы. Цифры получены прямым подсчётом по файлам Figma.
| Продукт | Групп компонентов | Вариантов | Мастер-компонентов | Токенов и стилей |
|---|---|---|---|---|
| Приложение iOS | 67 | 835 | 957 | 44 |
| Приложение Android | 63 | 715 | 799 | 46 |
| Админ-панель города | 48 | 704 | 916 | 55 |
| Кабинет вендора | 28 | 479 | 512 | 45 |
| Промо-сайт | 2 | 4 | 4 | — |
| Итого | 208 | 2 737 | 3 188 | 193 |
Токены и стили: 138 цветовых, 52 текстовых и 3 эффекта. «Мастер-компоненты» — суммарно варианты внутри групп и отдельные атомарные компоненты: иконки, логотипы, системные контролы.
Токены и темы. Цвета описаны семантическими ролями,
а не значениями: System,
Surface,
Background,
Border — включая градиентные
обводки для клубных карт. Каждая роль существует в светлой и тёмной теме, поэтому
переключение темы не ломает интерфейс ни в одном продукте.
Типографика под задачу платформы. Мобильные продукты держатся на брендовом Lack (заголовки 25/20 px, текст 16/14 px) и вспомогательном Gilroy Light — подписи и крупные цифры баланса до 56 px. Веб-кабинеты построены на Montserrat: там нужна плотная табличная типографика с восемью уровнями, от заголовка 36 px до подписей 12 px.
Глубина вариантов вместо размножения компонентов. Один компонент закрывает все состояния продукта. Самый крупный набор — поле ввода в админ-панели: 216 вариантов; мобильное поле с подсказкой и подписью — 60; мобильная клавиатура — 70; выпадающие списки — до 36.
Клубные паттерны. Отдельно описано то, чего нет в стандартных UI-kit'ах: клубная и подарочная карта с балансом в баллах и кэшбэком, QR-модуль для списания у вендора, виджеты лимитов с кольцевым прогрессом, семейный доступ и витрины с подписками.
Design-ops внутри Figma. Страницы UI-kit с навигацией по разделам служат документацией: разработчик или новый дизайнер находит нужный компонент без вопросов. Плюс авторский надзор — разбор макетов и контроль использования компонентов в новых разделах.
Страницы UI-kit
Цвета, типографика и компоненты описаны отдельными страницами по каждой платформе — это и документация, и точка входа для разработки.
Процесс
- Исследования — коридорные и когортные, с жителями и вендорами: что удобно, что нет, какие барьеры мешают пользоваться программой.
- MVP за 4 месяца с осознанным срезанием углов: часть фич допиливали после релиза. Например, в первой итерации пополнение было только через банк — это отсекло часть пользователей, карты добавили позже.
- Продукт и система вместе — каждый новый раздел (витрины, подписки, промо, чаты) собирался из уже готовых компонентов, а не проектировался заново; так система оставалась рабочей, а не архивной.
- Менторство — последние 1,5 года, после найма junior/middle-дизайнера, отвечал за постановку задач и передачу работы по системе.
- Самое сложное — работа с некомпетентным руководителем проекта: из-за его хотелок интерфейс приходилось усложнять без пользы для продукта.
Результат
- Активные пользователи
- 5 000+
- пик — 1 500+ одновременно
- Вендоры-партнёры
- 150+
- на пике программы
- Операций в год
- 240 000
- у топ-вендора — 14 000 в год
- Средний чек
- 1 400
- баллов за операцию
- Мастер-компонентов и состояний
- 3 188
- в 208 группах компонентов
- Токенов и стилей
- 193
- 138 цветовых, 52 текстовых, 3 эффекта
- Программа стала частью повседневной жизни города — работала с 2021 по 2026 год, объём операций стабильно рос год к году.
- Дизайн-система выдержала масштаб — пять продуктов и 99 страниц макетов на одной библиотеке, без «почти таких же» кнопок в каждом файле.
- Скорость сборки и передаваемость — новые разделы собирались из готовых блоков, а библиотека с документацией позволила подключить второго дизайнера без долгого онбординга.
Компания-оператор закрылась — проект был социальным и убыточным по своей природе, но свою задачу поддержки малого бизнеса города выполнил.
Что бы сделал иначе
- Кликабельные прототипы и микроанимации с самого начала — сейчас проектировал бы именно так, чтобы заранее показывать работу интерфейса, а не статичные макеты.
- Пополнение картами в первой итерации — изначально только через банк, что отсекло часть пользователей.
- Дизайн-систему — сразу на переменных Figma. Система выросла на локальных стилях: это было нормой, когда она начиналась. Сейчас собрал бы всё на переменных с режимами — темы переключаются одним переключателем, а токены нельзя случайно «разъехать» между платформами.
- Опубликованная библиотека вместо копий файлов. Пять файлов жили каждый своей жизнью; общая библиотека сняла бы ручную синхронизацию изменений между платформами.
- Единый словарь имён с первого дня — за годы накопились разночтения в написании ролей и статусов между платформами.
- Жёстче защищал бы продуктовые решения от хотелок руководителя проекта, которые усложняли интерфейс без пользы.
AI в проекте
На момент работы над проектом ИИ применялся только для генерации картинок и заставок для сайта и Telegram-канала — измеримого эффекта это не дало, и приписывать системе заслуги я не буду.
Сегодня применил бы ИИ к конкретным участкам работы: LLM для синтеза интервью и ресёрча, генерацию UX-текстов и микрокопирайта, автоматический аудит доступности и контраста в обеих темах, вариации экранов для A/B-тестов — и отдельно рутину дизайн-системы: поиск «самопальных» компонентов в макетах, черновики документации по каждому компоненту и автоподготовку changelog'ов библиотеки.
Инструменты
Figma: компоненты и варианты, дизайн-токены и стили, авто-лейаут, страницы-документация UI-kit, авторский надзор. Прототипирование, коридорные и когортные исследования, продуктовая аналитика.
Коротко для скрининга
- Продуктовый дизайнер end-to-end: продукт, дизайн-система, менторство — 2021–2026.
- Дизайн-система с нуля: 208 групп компонентов, 3 188 мастер-компонентов, 193 токена, 2 темы.
- Кросс-платформенность: iOS, Android, web-кабинет, админ-панель, сайт — 5 продуктов.
- Продуктовые метрики: 5 000+ активных пользователей, 1 500+ одновременных, 150+ вендоров, 240 000 операций в год, средний чек 1 400 баллов, MVP за 4 месяца.
- Менторство: постановка задач и передача работы junior/middle-дизайнеру.
- Исследования: коридорные и когортные интервью с жителями и вендорами.