05 Сентября 2022
Назад в блог

Разработка админ-панели для обучающей платформы Puzzle Brain

Проектирование и дизайн системы
О клиенте

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

Задача

Изначально клиент пришел с задачей проработать внутреннюю LMS сайта (система управления обучением) — личный кабинет пользователя. В процессе аналитики выяснили, что для корректной работы LMS требуется панель администратора (админ-панель), в которой менеджер будет осуществлять управление контентом: добавлять новые курсы, пользователей, авторов, а также настраивать отправку уведомлений и осуществлять проморассылки.

В среднем на платформе выходит 50−60 курсов в месяц (максимальное значение достигало 73). Публикацией обучающих материалов занимаются контент-менеджеры Puzzle Brain, и задача админ-панели — предоставить удобный инструмент для оперативной работы менеджеров.

Проектирование админ-панели
Сбор требований

Перед стартом проектирования собрали требования к интерфейсу будущей системы.

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

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

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

Информационная архитектура админ-панели

В процессе работы

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

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

Прототипы админ-панели

UX таблиц

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

Главная особенность таблиц — возможность быстрого перехода в режим редактирования: при наведении на ячейку, в которой необходимо отредактировать данные, появляется соответствующий элемент управления, который подсказывает пользователю, как внести изменения. А некоторые функции, например «Сменить статус», «Добавить тег», сразу доступны в таблице.

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

Быстрый переход в режим редактирования данных

UX страницы курса

Страница редактирования курса — одна из самых часто используемых: ежемесячно на платформе создается 50−60 новых курсов. Новые курсы администратор создает вручную, а существующие может редактировать или исправлять ошибки авторов.

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

Функциональные особенности
/
Настраиваемые таблицы. Возможность кастомизировать таблицу под актуальные задачи.
Гибкая фильтрация элементов. Сквозная фильтрация позволяет максимально детализировать выборки элементов.
WYSIWYG-редактор. Интегрированный визуальный редактор для сборки курсов и шаблонов для e-mail рассылок.
Дизайн интерфейса

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

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

Об атомарном подходе

В работе над админ-панелью использовали подход атомарного дизайна: разложили интерфейс на компоненты из пяти уровней — атомы, молекулы, организмы, шаблоны и страницы. Обусловлено это тем, что для будущего масштабирования важно быстро собирать страницы для новых сценариев взаимодействия. Для этого требуется не только подробный UI-Kit, но и описание того, как организмы, шаблоны, атомы и молекулы работают в связке.

Вместо итогов

В результате работ:

  • с нуля спроектировали интерфейс админ-панели с учетом юзабилити и основных сценариев взаимодействия;
  • разработали компактную дизайн-систему для легкого масштабирования.

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

Отзыв клиента

От лица проекта Puzzle Brain выражаю огромную признательность за выполненную работу. Особенно хочу отметить:

1. Пунктуальность. Это всегда редкость, и ребята здесь прям сильно порадовали.

2. Отзывчивость. Мы просили временами пойти посмотреть что-то — как оно у других, и всегда на это был позитивный отклик. Благодаря этому переделали часть интерфейса, и он стал удобнее, чем первая версия.

3. Дружелюбность. Такое ощущение, что я работал со своей командой. Очень тесный и теплый контакт. Безумно ценно быть на одной волне.

4. Проактивность. Столько предложений, сколько поступало от ребят, я не получал даже от внутренней команды.

5. Экономичность. Очень порадовало, что можно было не делать что-то, что было ранее заявлено, если в этом терялась необходимость. Например, на дизайне админки мы сэкономили почти 300 к и кучу времени — ребята сами придумали, как оптимизировать эту часть работы.

Артём Захаров, основатель Puzzle Brain
Контакты
Пишите
Звоните
Москва
Пресненская набережная, 8с1, башня «Москва», 58 этаж, офис 581
Тамбов
ул. Максима Горького, д. 17/129, этаж 12