LifePoint Design System
Автор дизайн-системы / Frontend Lead
О проекте
В LifePoint не было штатного продуктового дизайнера, поэтому я самостоятельно провёл аудит действующего портала для разных категорий пользователей и спроектировал единую дизайн-систему. Она охватила интерфейсы менеджеров банков, коучей и региональных директоров: их дашборды, рабочие сценарии, обучение, сделки, аналитику, календари и формы. Я определил визуальные основы и правила использования компонентов, а затем участвовал в создании React-библиотеки вместе с командой из двух разработчиков. Система осталась внутри LifePoint, но кратно ускорила проектирование и разработку новых интерфейсов.
Продукт рос без штатного дизайнера
LifePoint объединял продажи, обслуживание клиентов, обучение и управление командами, но в компании не было штатного продуктового дизайнера. По мере развития портала интерфейсы становились сложнее, а разрозненные решения замедляли проектирование и frontend-разработку.
Я взял на себя дизайн-направление: начал с анализа действующего продукта, затем сформировал визуальную основу, библиотеку компонентов и правила, которые связывали макеты в Figma с реализацией на React.
- Самостоятельное проектирование системы
- Работа внутри развивающегося продукта
- Связь UX/UI и frontend-разработки
- Единый подход вместо разрозненных экранов
Три роли — три разных рабочих пространства
Перед проектированием компонентов я провёл аудит портала для менеджеров банков, коучей и региональных директоров. У каждой роли были собственные задачи, дашборды, наборы данных и последовательности действий.
Менеджеры работали со сделками, клиентами, продуктами и обучением. Коучи планировали визиты и взаимодействие с подразделениями. Региональным директорам требовались агрегированные показатели и инструменты контроля. Дизайн-система должна была объединить продукт визуально, не стирая различия между этими сценариями.
- Аудит интерфейсов по пользовательским ролям
- Сценарии менеджеров банков
- Рабочее пространство коучей
- Дашборды региональных директоров
От визуальных правил к общему языку продукта
Я определил палитру, типографику, сетку, систему отступов, состояния элементов и правила использования компонентов. В Figma появилась библиотека, из которой можно было собирать новые экраны без повторного проектирования базовых паттернов.
Система учитывала обычные, активные, disabled-, loading- и error-состояния, работу с длинными данными и разные комбинации контента. Это позволило проектировать не только идеальные макеты, но и реальные состояния продукта.
- Цвета и типографика
- Сетка и система отступов
- Состояния и варианты компонентов
- Правила сборки новых интерфейсов
Сложные продуктовые сценарии, а не только кнопки и поля
Библиотека охватила базовые элементы и сложные составные компоненты: медиаплееры, управление учебными курсами и тестированием, графики, карточки сделок, календари, загрузку документов, многошаговые формы, опросы и уведомления.
Каждый паттерн проектировался с учётом реального пользовательского потока. Например, курс объединял прогресс, материалы, тестирование и документы, а календарь коуча — события, повторения, согласование и привязку к банку, городу и отделению.
- Плееры и управление курсами
- Графики и аналитические виджеты
- Сделки и действия с договорами
- Календари, формы и модальные окна
Продажи, сделки и обучение в одном интерфейсе
Для менеджеров банков система объединяла операционную работу и развитие: оформление продуктов, сделки и сервисы, показатели продаж, мотивацию, новости и учебные курсы.
Общие компоненты помогли сохранить единый язык в очень разных разделах — от аналитического дашборда и таблицы договоров до полноформатного учебного курса с материалами, плеером и тестированием.
Календарь визитов как отдельный рабочий flow
Для коучей был спроектирован календарь визитов с месячным представлением, статусами, повторяющимися событиями и согласованием встреч. Интерфейс позволял планировать работу с банками и подразделениями в контексте конкретного города и отделения.
Форма нового события стала примером сложного компонента дизайн-системы: дата, время, повторение, организация, тип обращения, тема и комментарий собирались в последовательный сценарий внутри модального окна.
Из Figma в переиспользуемые React-компоненты
После проектирования UI Kit я участвовал в переносе системы в код. Вместе с командой из двух разработчиков мы создавали переиспользуемые React-компоненты и встраивали их в реальные пользовательские сценарии LifePoint.
Связка дизайн-библиотеки и компонентной реализации сокращала разрыв между макетами и продуктом. Новые экраны собирались из проверенных элементов, а изменения можно было распространять последовательно по всему порталу.
- React-библиотека компонентов
- Команда из двух разработчиков
- Единые состояния в дизайне и коде
- Переиспользование между разделами
Дизайн-система, которая кратно ускорила разработку
LifePoint Design System осталась внутренней системой одного продукта и не была распространена на другие приложения компании, как планировалось изначально.
При этом внутри LifePoint она решила главную задачу: дала продукту единый визуальный и инженерный язык, охватила разные роли и сложные сценарии и кратно ускорила проектирование и frontend-разработку новых интерфейсов.