Как UI-библиотеки ускоряют разработку и делают пользовательский интерфейс лучше. Кейс: Вектор Внимания

Клиент: Вектор

В цифровом мире интерфейс — это первое, что видит пользователь. Именно он формирует первое впечатление о продукте, влияет на удержание клиентов, конверсию и даже на репутацию бренда.

Когда бизнесу нужно быстро запустить новый продукт или обновить существующий, встаёт вопрос: строить всё с нуля или использовать готовые UI-шаблоны?

С таким выбором мы столкнулись в AHead, когда клиенту потребовалась срочная «перезагрузка» пользовательского опыта. Задача была проста по формулировке, но сложна по сути — дать команде и пользователям более удобную систему, не затянув сроки.

Практический кейс: как мы улучшили UI бизнес-платформы «Вектор Внимания», которой ежедневно пользуются более 1 тыс. человек

Один из ярких примеров, где готовая UI-библиотека стала ключевым решением, — это проект «Вектор Внимания» — комплексная платформа для управления сетью автошкол.

На бумаге идея «сделаем всё сами» выглядела довольно привлекательно: полный контроль, уникальный дизайн, полная свобода в логике. Но на практике это бы превратилось в марафон траты бюджета и времени.

Основные проблемы разработки UI с нуля:

1. Архитектуру компонентов пришлось бы проектировать вручную
   Каждая кнопка, форма или модалка — это отдельная реализация с продуманными взаимодействиями, адаптацией под разные экраны и возможностью переиспользования.
2. Несогласованность между дизайнерами и разработчиками
   Даже при наличии макетов в Figma возникают расхождения — часть элементов сложно реализовать быстро, не все дизайнеры учитывают технические ограничения.
3. Чем больше кода — тем больше багов
   Ручная реализация повышает риск ошибок, сложностей с тестированием и адаптацией под разные устройства.
4. Рост сроков и бюджета
   Разработка и дизайн интерфейса с нуля — это сотни часов работы и огромные бюджеты. Итог: дольше до первого релиза, выше расходы, сложнее прогнозировать доработки. А заказчику нужна реализация как можно быстрее.

О проекте

Платформа «Вектор Внимания» обслуживает более 30 филиалов франшизы «Вектор» по всей России и закрывает полный цикл управления бизнесом:

• Управление задачами сотрудников через kanban-доску,
• Построение функциональной схемы компании и её отделов,
• Создание и исполнение регламентов,
• Управление структурой франшизы и взаимодействием с филиалами.

Ранее мы реализовали систему на базе Kanboard (Fullstack фреймворк) в качестве MVP. Вообще, мы часто берем готовые решения — библиотеки, модули или плагины. Обычно это здорово экономит время и ресурсы и ускоряет разработку.
Однако с ростом бизнеса и его потребностей готового решения становится все меньше. Бэкенд был переписан под кастомные задачи, а вот фронтенд всё ещё работал на старом фреймворке и страдал от:

• низкой скорости работы,
• отсутствия единого дизайна,
• частых багов,
• и плохого UX.

Вызов: много интерфейсов, нет дизайна, нужны быстрые результаты

Одна из ключевых особенностей платформы — сложная ролевая модель. Всего в «Векторе Внимания» 3 основные роли — Администратор, Менеджер и Пользователь. Однако каждый модуль системы предполагает свои вложенные роли, причем у юзера их может быть несколько, и все они — в рамках одного аккаунта. Возможности пользователя, функции и интерфейс также зависят от ролей, что еще больше усложняет создание единого интерфейса, для каждой из них.

На момент начала редизайна и миграции фронтенда на React(Next.js) не было готового UI-дизайна. 

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

После обсуждений с заказчиком мы предложили использовать headless UI-библиотеку shadcn/ui. Вот почему:

• Библиотека не навязывает готовый внешний вид, что идеально подходило для ситуации, когда дизайн-процесс шел параллельно разработке
• Компоненты shadcn легко кастомизируются, что позволило постепенно внедрять фирменный стиль бренда
• Мы уже имели успешный опыт использования shadcn/ui в других продуктах, поэтому внедрение прошло быстро и безболезненно

Сотрудничество с дизайн-командой клиента

Работать предстояло в тесной связке с командой автошколы: продуктовым менеджером, дизайнерами, коммуникаторами и владельцами продукта.

Каждый спринт проводили до двух дизайн ревью в Figm’е и составили полностью готовый UI-Kit системы, продумали пользовательские сценарии и улучшили процесс взаимодействия с платформой.

“Первое время разрабатывать приходилось совсем без дизайна, мы сами принимали некоторые решения и становились отправной точкой для дальнейшей работы дизайнера Вектора. В этом нам помог опыт, приобретенный на предыдущих проектах и общая насмотренность команды”, — говорит наш разработчик.

Часть UI-Kit’а из Figma

Примеры карточек, дропдаунов, форм и модалок

Один из ключевых модулей платформы «Вектор Внимания» — доска задач. 

По сути это Kanban доска, состоящая из нескольких поддосок: Мои, Контролирую, Участвую и Сегодня. Каждая доска содержит набор колонок, отображающих статус задач и количество заторов по этим самым задачам.

Этот модуль был одним из самых проблемных, так как у некоторых пользователей количество задач в одной доске могло доходить до нескольких сотен. Старый фреймворк из коробки не поддерживал механизмы пагинации, система отображала все задачи на доске разом, что занимало время и тормозило интерфейс.

Пример доски старой версии приложения

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

Новый интерфейс «Вектор Внимания»

Не забыли и про доску Сегодня, интерфейс которой также претерпел изменения.

Доска Сегодня в новой версии

Кстати говоря, каждая задача на доске — это отдельный экран со своими разделами и модулями. 

Управление задачей, ее участниками, доказательствами и чек листом совместно с полноценным мессенджером для коммуникации внутри задачи.

Карточка задачи в новой версии

С регламентами все тоже было непросто 

Далее предстояло заняться редизайном раздела “Регламенты”. Их особенностью также является количество ролей и самих регламентов. Однако если копнуть глубже, то выяснится, что все на самом деле еще сложнее.

На главной странице регламентов можно увидеть кнопку фильтра, в которой можно настраивать доступ по типам и функциям администраторов и исполнителей. Однако общее число таких ролей в системе составляет 840. Из них 21 уровень администраторов, 42 типа исполнителей и 777 функций. 

И как не сойти с ума, проектируя интерфейс с таким количеством ролей? 

Ответ лежал прямо перед нами: UI-библиотека shadcn/ui обладает всем необходимым набором сценариев использования одних и тех же компонент-форм, а проблему рендера большого количества данных мы уже решали ранее.

Раздел “Регламенты” в старой версии

Фильтр раздела “Регламенты” в новой версии

А вот так выглядит редактор регламента и страница просмотра:

Редактор регламента

Страница регламента

Регламенты создаются с целью формирования собственной базы знаний и изучения ее сотрудниками компании. Некоторые регламенты можно изучить, просто ознакомившись с ними, но с более сложными и объемными регламентами подтвердить изучение можно лишь пройдя тест на знание регламента. 

Чтобы создавать и изучать регламенты было проще, мы создали полноценный конструктор тестов внутри редактора регламентов. А чтобы изучать их было комфортнее, добавили красивый дизайн и плавные анимации. 

Конструктор тестов в новой версии

Прохождение теста в старой версии

Прохождение теста в новой версии: https://ibb.co/M53n23sq

Что с проектом сейчас 

Часть платформы уже в релизе, за несколько спринтов мы выпустили для команды Вектора разделы: “Главная”, “Задачи” и “Регламенты”. Но на этом наша работа не прекращается! Вот, что мы делаем сейчас: 

• продолжаем улучшать платформу: ежедневно платформой пользуется более тысячи человек, количество задач и регламентов растет, и для быстрой работы мы снижаем нагрузку на фронтенд-часть и постоянно улучшаем код;
• поддерживаем созданные модули: регулярно собираем обратную связь и работаем совместно с командой Вектора над улучшением продукта и фиксим возникающие проблемы и баги;
• разрабатываем новые модули: разрабатываем модуль “функциональная схема” — самый проблемный модуль старой версии и пишем API для следующих модулей системы.