На главную

Barger Headless CMS

Как я участвовал в проектировании B2B-системы для создания и управления структурированным контентом.

Роль UX/UI дизайнер Платформа Web Тип B2B web app · Headless CMS
Barger Headless CMS: интерфейс продукта

Превью проекта

Проект Barger Headless CMS Формат Клиентский продуктовый проект Команда Заказчик, дизайнеры, разработка Фокус IA, Collections, Content Management, Roles & Permissions, UI-система Период Сентябрь — декабрь 2024

О формате проекта

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 — за роли и пользователей.

Такое разделение помогло отделить настройку модели данных от ежедневной работы с контентом и сделать навигацию более предсказуемой.

Информационная архитектура Barger

Структура контента / Collections

Один из ключевых сценариев Barger — создание коллекции. Пользователь сначала задаёт сущность, а затем собирает её структуру из полей разных типов.

Collection Field type Field settings Structure

Ключевое решение

Сценарий создания поля мы разделили на последовательные шаги: выбор типа данных → настройка параметров → добавление в коллекцию. Так сложная конфигурация не превращается в одну перегруженную форму.

От структуры к контенту

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

Таким образом мы развели два разных сценария: настройку структуры и ежедневное наполнение контентом, сохранив между ними единую логику.

Роли и права доступа

Administrator

Управляет системой и доступами.

Content manager

Создаёт и обновляет контент.

Developer

Работает со структурой и использованием данных.

Для B2B-продукта было важно контролировать не только доступ к системе, но и конкретные действия внутри неё. Поэтому роли строились через permissions: создание, публикацию, обновление, чтение и удаление контента.

Администратор мог собрать набор прав под конкретную задачу и назначить его нужному пользователю.

UI и системность

Над разными частями Barger параллельно работало несколько дизайнеров, поэтому системность интерфейса была важна не только визуально, но и для командной работы.

Из-за ограниченных сроков мы опирались на Radix UI и единый набор паттернов, состояний и компонентов. Это позволило меньше времени тратить на базовые UI-решения и больше — на сценарии и внутреннюю логику продукта.

UI-система Barger: поля, состояния и типографика

Адаптация интерфейса

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

Barger как единая система

В итоговой концепции сценарии работы со структурой данных, контентом, медиа, ролями и настройками объединились в одну интерфейсную систему.

Интерфейсы Barger на разных устройствах и в разных сценариях

Итог

Результат

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

Для меня

Barger стал одним из первых опытов работы над сложным B2B web-продуктом в команде дизайнеров и разработчиков — с взаимосвязанными сценариями, техническими ограничениями и необходимостью поддерживать системность между разными частями интерфейса.

Главный вывод

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