Barger Headless CMS
Как я участвовал в проектировании B2B-системы для создания и управления структурированным контентом.
Превью проекта
О формате проекта
Barger создавался командой дизайнеров и разработчиков для реального заказчика: с требованиями со стороны заказчика, распределением зон внутри команды, итерациями и передачей решений в разработку. В кейсе я фокусируюсь на задачах и сценариях, в проектировании которых участвовал непосредственно.
Проблема и решение
О продукте
Barger — Headless CMS для создания, хранения и управления структурированным контентом. Пользователь формирует структуру данных в админ-панели, наполняет её контентом, а разработка использует эти данные независимо от конечного интерфейса.
Проблема
В Headless CMS пользователю приходится работать сразу с несколькими уровнями системы: структурой данных, самим контентом, медиа, пользователями и доступами. Если эти сущности организованы непоследовательно, продукт быстро становится сложным даже для базовых операций.
Решение
Мы выстроили интерфейс вокруг основных сущностей CMS и разделили работу со структурой и самим контентом. Это позволило сделать сложную внутреннюю модель продукта более предсказуемой для разных пользовательских ролей.
Что я делал
Я участвовал в проектировании структуры Barger и ключевых пользовательских сценариев: от информационной архитектуры и wireframes до high-fidelity интерфейсов и передачи решений разработчикам.
Зона ответственности
- IA и key flows
- сценарии Collections и Content
- состояния интерфейса
- high-fidelity UI
- дизайн-ревью внутри команды
- взаимодействие с разработкой и handoff
Ограничения
Проект создавался в ограниченный срок несколькими дизайнерами параллельно, поэтому интерфейс должен был оставаться единым между разными зонами продукта. При этом решения нужно было учитывать с точки зрения дальнейшей реализации и масштабирования CMS.
Информационная архитектура
На верхнем уровне мы разделили продукт по основным сущностям: Collections отвечают за структуру данных, Content — за сами записи, Media — за файлы, а Settings — за роли и пользователей.
Такое разделение помогло отделить настройку модели данных от ежедневной работы с контентом и сделать навигацию более предсказуемой.
Структура контента / Collections
Один из ключевых сценариев Barger — создание коллекции. Пользователь сначала задаёт сущность, а затем собирает её структуру из полей разных типов.
Ключевое решение
Сценарий создания поля мы разделили на последовательные шаги: выбор типа данных → настройка параметров → добавление в коллекцию. Так сложная конфигурация не превращается в одну перегруженную форму.
От структуры к контенту
После того как структура коллекции определена, контент-менеджеру уже не нужно работать с технической моделью данных. В разделе Content она превращается в привычную форму с нужными полями.
Таким образом мы развели два разных сценария: настройку структуры и ежедневное наполнение контентом, сохранив между ними единую логику.
Роли и права доступа
Administrator
Управляет системой и доступами.
Content manager
Создаёт и обновляет контент.
Developer
Работает со структурой и использованием данных.
Для B2B-продукта было важно контролировать не только доступ к системе, но и конкретные действия внутри неё. Поэтому роли строились через permissions: создание, публикацию, обновление, чтение и удаление контента.
Администратор мог собрать набор прав под конкретную задачу и назначить его нужному пользователю.
UI и системность
Над разными частями Barger параллельно работало несколько дизайнеров, поэтому системность интерфейса была важна не только визуально, но и для командной работы.
Из-за ограниченных сроков мы опирались на Radix UI и единый набор паттернов, состояний и компонентов. Это позволило меньше времени тратить на базовые UI-решения и больше — на сценарии и внутреннюю логику продукта.
Адаптация интерфейса
Дополнительно мы исследовали, как основные сценарии могут адаптироваться под мобильный экран. Навигация сворачивается в отдельную панель, а основная иерархия разделов и действий сохраняется.
Barger как единая система
В итоговой концепции сценарии работы со структурой данных, контентом, медиа, ролями и настройками объединились в одну интерфейсную систему.
Итог
Результат
За время проекта команда проработала основную структуру Barger и ключевые сценарии работы с коллекциями, контентом, пользователями и настройками.
Для меня
Barger стал одним из первых опытов работы над сложным B2B web-продуктом в команде дизайнеров и разработчиков — с взаимосвязанными сценариями, техническими ограничениями и необходимостью поддерживать системность между разными частями интерфейса.
Главный вывод
Этот проект научил меня смотреть на интерфейс не как на набор отдельных экранов, а как на систему связанных сущностей, сценариев и состояний.