Дизайн-система
Связной Дизайн-система и цифровые продукты ритейл-экосистемы
Проект был направлен Связной Дизайн-система и цифровые продукты ритейл-экосистемы
на систематизацию
и масштабирование существующей библиотеки компонентов после перехода команды в Figma.
В рамках развития цифровой экосистемы (mobile, web, cStore)
UI-kit был структурирован
и преобразован в рабочую дизайн-систему с документацией, процессом ревью и синхронизацией с разработкой.
Моя роль:
Продуктовый дизайнер. Развитие
и поддержка дизайн-системы, проектирование компонентов для mobile и web, унификация стилей, подготовка документации, участие
в ревью и выстраивание процессов взаимодействия с продуктовой
и dev-командами.
Домены:
Design System · E-commerce · B2C · Retail · Web & Mobile
Понимание задачи
Ситуация
Связной — крупная ритейл-экосистема с несколькими цифровыми продуктами:
и собственным визуальным стилем.
После перехода команды в Figma
со Sketch была создана базовая библиотека компонентов, однако система не имела единой архитектуры, стилей для всех продуктов и формализованной документации.
С ростом экосистемы стало необходимо выстроить масштабируемую дизайн-систему, синхронизированную с кодом
и подходящую для разных продуктовых направлений.
- мобильное приложение,
- основной eCommerce-сайт,
- cStore — отдельный субпродукт
и собственным визуальным стилем.
После перехода команды в Figma
со Sketch была создана базовая библиотека компонентов, однако система не имела единой архитектуры, стилей для всех продуктов и формализованной документации.
С ростом экосистемы стало необходимо выстроить масштабируемую дизайн-систему, синхронизированную с кодом
и подходящую для разных продуктовых направлений.
Задача
Систематизировать существующую библиотеку в Figma и развить её в полноценную
дизайн-систему:
дизайн-систему:
- унифицировать компоненты,
- стандартизировать стили,
- создать документацию,
- обеспечить синхронизацию с кодом,
- поддержать разные продуктовые направления (включая брендовый стиль cStore).
Проблемы
Бизнеса:
- Разрозненные UI-паттерны между mobile, web и cStore.
- Увеличение времени разработки новых функций.
- Повышенная стоимость поддержки интерфейсов.
- Отсутствие единого стандарта для разных брендовых направлений.
- Компоненты создавались ситуативно.
- Не было единой структурированной библиотеки.
- Стили использовались непоследовательно.
- Документация отсутствовала или была фрагментарной.
- Синхронизация с кодовой базой требовала дополнительных согласований.
Аудитория
- Продуктовые дизайнеры
- Mobile и frontend-разработчики
- Продакт-менеджеры
- Аналитики
- Новые участники команды
Моя роль
- Развитие и поддержка дизайн-системы
- Унификация компонентов
- Адаптация системы под отдельный брендовый стиль cStore
- Создание и систематизация цветовых
- Настройка библиотеки компонентов в Figma
- Подготовка документации
- Синхронизация с кодовой реализацией
- Проектирование интерфейсов мобильного приложения и сайта
Цели
Бизнес-цели:
- Построить масштабируемую дизайн-систему для всей цифровой экосистемы.
- Обеспечить единый стандарт
для mobile, web и cStore. - Упростить проектирование
и разработку. - Повысить консистентность пользовательского опыта.
- Наладить связку дизайн → код → документация.
Критерии успешности
Рост использования компонентов (Adoption).
Снижение дублирования и форков.
Сокращение времени сборки новых экранов.
Снижение UI-ошибок в релизах.
Положительная обратная связь продуктовых команд.
Стабильная связка дизайн ↔ код.
Снижение дублирования и форков.
Сокращение времени сборки новых экранов.
Снижение UI-ошибок в релизах.
Положительная обратная связь продуктовых команд.
Стабильная связка дизайн ↔ код.
Логотипы
Мобильная версия
в разработке Пожалуйста, откройте проект
с компьютера для полного
просмотра кейса
в разработке Пожалуйста, откройте проект
с компьютера для полного
просмотра кейса