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

526

Заявлено проектов
405

Опубликовано проектов
30

Оставлено комментариев
343

Количество голосов
53

Дней до окончания голосования

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

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

ПАО Сбербанк

Владелец продукта
Категория

Лучшее отраслевое решение
Номинация

Другое
Цели

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

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

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

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

январь, 2024 — ноябрь, 2024
Год завершения проекта

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

3240 человеко-часов
Результаты

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
Решение из каталога Global CIO

В проекте не используются решения из каталога Global CIO
Сложность реализации

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