Дизайн-система Фламинго

Заказчик:

Сбер

Руководитель проекта со стороны заказчика

Алевтина Чугунова

Владелец продукта

Поставщик

Сбер

Год завершения проекта

2024

Сроки выполнения проекта

январь, 2024 — ноябрь, 2024

Масштаб проекта

3240 человеко-часов

Цели

1. Ускорить разработку интерфейсов цифровых продуктов начиная от дизайна и заканчивая разработкой.

2. Сократить кол-во дефектов UI, которые возникают из-за большого количества продуктовых команд разработки.

3. Сделать продукты консистентными и удобными на разных платформах (веб-приложения или мобильные приложения)

4. Сделать удобные инструменты для работы с UI, которые упростят проведение интерфейсного тестирования и демо продуктов

Результаты

1. За год разработано 22 новых компонента, которые позволии упростить и ускоритьразработку продуктов.

2. На дизайн-систему Фламинго за 2024 год подключилось 19 новых продуктов с пользовательской аудиторий 250000+.

3. Наша дизайн-система позволила сократить T2M продуктов, которые используют нашу дизайн-систему на 40%

4. Разработана библиотека Театр для генерации видеороликов прямо из кода

5. Все компоненты дизайн-системы соответствует ключевым критериям доступности.

6. CSI дизайн-системы за год не падал ниже 90%

Уникальность проекта

1. Единая дизайн-система для всех платформ: Наш продукт предоставляет единую дизайн-систему, доступную в виде библиотеки в Pixso и в коде для трех платформ: web, iOS и Android. Это позволяет всем ключевым звеньям создания продукта работать с одной и той же системой, содержащей одинаковые наборы компонентов.

2. Гибкая настройка темы и компонентов: Мы предлагаем гибкую настройку темы и компонентов, позволяющую адаптировать свой продукт под его уникальные особенности. У нас доступны две темы по-умолчанию: светлая и темная. Через JSON можно передать свою кастомную тему без дополнительных доработок.

3. Уникальные инструменты для тестирования и аналитики: В дизайн-системе есть уникальный инструмент "debug overlay", который автоматически размечает экраны приложения в формате используемых компонентов и всех отступов в интерфейсе, что позволяет находить кастом и проводить интерфейсное тестирование.

4. Библиотека "Театр" для создания демо-роликов: превращает код в красивые и эффектные видеоролики

Использованное ПО

Pixso, React JS, TypeScript, Storybook, Xcode, SnapKit, Kotlin, Jetpack Compose, Bitbucket

Сложность реализации

1. Размер. В дизайн-системе доступно для использования порядка 74 готовых UI-компонентов разных уровней сложности, 4 пользовательских паттерна. Все эти компоненты и паттерны требуют обновления и поддержки. Важно следить за соблюдением всех подходов UI/UX, а также поддерживать соответствие компонентов в макетах и коде.

2. Гибкость и доступность. Мы стараемся сделать все сущности дизайн-системы гибкими и переиспользуемыми, при этом сохраняя в себе айдентику бренда. Предоставляем удобные способы взаимодействия с дизайн-системой в Pixso для дизайнеров и гибкое API для разработчиков. Прорабатываем ключевые критерии доступности нашей дизайн-системы: цвета, адаптив и масштабируемость, работа с screen reader (voice over).

3. Уникальные инструменты и база знаний. Развиваем демо-приложения для 3-х платформ. Демо-приложение – это приложение, которое содержит в себе базу знаний по работе с дизайн-системой, а так же песочницы, в которых можно в режиме реального времени изменять состояния компонента.

Описание проекта

Дизайн-система является неотъемлемой частью современных приложений. Она обеспечивает визуальную целостность и является ДНК приложения. Без дизайн-системы команды разработки тратили много времени на проектирование интерфейса и создание элементов дизайна, что замедляло разработку и увеличивало затраты. Кроме того, недостаток консистентности дизайна вел к низкому качеству приложений и дополнительным затратам на контроль качества, как следствие ниодин продукт не отражал бренд Сбера.

Мы пришли к понимаю необходимости создания своей дизайн-системы и выделения под это отдельной команды, чтобы закрыть боли, которые у нас возникли. В результате проведенного исследования, мы выделили ключевые причины, почему дизайн-система необходима для наших приложений и должна стать неотъемлемым компонентом процесса разработки. Выработали для себя процесс работы с нашей командой, сформировали шаблон технических требований к UI-компонентам, на основе которых разработка компонентов стала проще и быстрее.

Для своих внутренних продуктов мы разработали свою дизайн-систему «Фламинго», которая помогает командам разработки и дизайна быстро справляться с трудностями создания интерфейсов, обеспечивает единообразный стиль приложений и понятную структуру компонентов и элементов дизайна.

Дизайн-система Фламинго – это набор готовых бибилиотек для дизайнеров, frontend-разработчиков, ios-разработчиков и android-разработчиков, которая содержит в себе UI-компоненты, стили, наборы иконок и иллюстраций. Наша библиотека подключена во внутренние продукты для сотрудников Сбера, например, корпоративный месседжер, корпоративную почту или приложения для получения доступов в автоматизированные системы Банка.

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

За 2024 год основная библиотека дизайн-системы «Фламинго» значительно расширилась, появилось 22 компонента, дополнительно была разработана группа компонентов для визуализации данных. За 2024 год разработали свой инструмент для удобного тестирования интерфейсов на Android-приложений – «debug overlay». Помимо полноценной документации и демо-приложений в нашей дизайн-системе появились полноценные шаблоны с пользовательскими паттернами, например, виджет обратной связи или функционал для онбординга в продукте.

Дизайн-система активно развивается и используется во внутренних продуктах нашей компании. В планах – сделать более доступными все компоненты внутри дизайн-системы, чтобы любой продукт при подключении нашей библиотеки мог прямо из коробки получить ключевые критерии цифровой доступности продукта: озвучка интерфейса, масштабируемость, работа с разными темами и другое.

География проекта

Все регионы присутствия «Сбербанк», подрядчики, создающие продукты для «Сбербанк».

Дополнительные презентации:

ДС Фламинго SU.pdf