Данные и графики
48 компонентов для визуализации: линейные графики, тепловые карты, воронки и табличные виджеты. Каждый настраивается через пропсы, а не через переписывание стилей.
Кейс · B2B · Аналитика
UI-кит для SaaS-аналитики DataPulse
Как мы за 14 недель собрали гибкую дизайн-систему, которая сократила время на разработку экранов на 40% и объединила три продукта одной платформы.
О проекте
Задача, с которой к нам обратились
DataPulse — платформа аналитики для маркетинговых команд. Три продукта, четыре команды разработчиков и ни одного общего языка в интерфейсах.
Команда DataPulse вышла на стадию, когда скорость стала критичной: каждые две недели релизы, а дизайнеры тратили до 40% времени на согласование базовых элементов — кнопок, таблиц и графиков. Продукты выглядели по-разному, хотя принадлежали одной экосистеме.
Наша цель — собрать единый UI-кит на базе Glypha, который закроет 90% типовых сценариев и оставит место для кастомизации под каждый продукт. В работе — 6 дизайнеров, 4 фронтендера и 2 продуктовых аналитика. Сроки: 14 недель.
312
Компонентов в ките
-40%
Время на разработку экранов
14
Недель до запуска
Архитектура компонентов
Слои, которые держат систему
Навигация и фильтры
Сайдбары, хлебные крошки и 24 варианта фильтров по датам, сегментам и метрикам. Поддерживается сохранение пользовательских пресетов.
Система токенов
180 дизайн-токенов: 12 цветовых шкал, 8 уровней контраста, сетка 8px. Переопределяются на уровне продукта без раздувания кода.
Экономия времени команды
Цифры после внедрения
Через 6 месяцев после запуска кита мы замерили, что изменилось в ежедневной работе дизайнеров и разработчиков.
Среднее время прототипирования нового экрана сократилось с 3,5 часов до 2 часов. Дизайнеры перестали согласовывать базовые элементы — 87% задач теперь закрываются без встреч. Фронтенд-команда перестала дублировать CSS-классы: размер общего слоя снизился на 34%.
Количество багов, связанных с визуальными несоответствиями между продуктами, упало с 22 до 4 в спринт. Команда DataPulse оценивает экономию в 180 человеко-часов в месяц.
Экспертиза по кастомизации
Как мы адаптировали систему под бренд
Брендовая палитра
Пересобрали 12 цветовых шкал под фирменный фиолет DataPulse. Сохранили WCAG-контрастность AA во всех состояниях, включая hover и disabled.
Типографика
Внедрили Outfit для заголовков и Manrope для текста. Настроили 9 уровней кегля с интерлиньяжем под плотные табличные данные.
Тёмная тема
Разработали отдельный набор токенов для тёмного режима дашбордов. Графики и акцентные цвета пересчитаны под ночную работу аналитиков.
Хотите такой же результат для своего продукта?
Получите разбор кейса с исходниками и шаблонами токенов. Покажем, как собрать UI-кит под вашу задачу за 8–14 недель.
Вопросы по кейсу
Сколько дизайнеров и разработчиков работало над китом?
6 дизайнеров и 4 фронтендера от команды DataPulse плюс 2 консультанта Glypha на этапах аудита и код-ревью. Продуктовые аналитики участвовали в проверке сценариев.
Как долго занималась адаптация под тёмную тему?
3 недели. Мы пересчитали 12 цветовых шкал и 48 компонентов графиков под контрастность тёмного фона, затем провели 2 раунда тестирования с реальными аналитиками.
Можно ли использовать этот кит как основу для своего продукта?
Да. Архитектура на базе Glypha позволяет взять структуру и токены, а затем заменить брендовые элементы. В среднем на это уходит 2–3 недели при наличии нашей поддержки.