Puzzle Brain — обучающая онлайн-платформа доступного ценового сегмента. На сайте собраны небольшие курсы на разные тематики, направленные на проработку отдельных навыков и умений. По формату позиционируют себя как интернет-магазин, при этом важное место в продажах занимает подписочная система и апсейл на покупку дополнительных курсов.
Изначально клиент пришел с задачей проработать внутреннюю LMS сайта (система управления обучением) — личный кабинет пользователя. В процессе аналитики выяснили, что для корректной работы LMS требуется панель администратора (админ-панель), в которой менеджер будет осуществлять управление контентом: добавлять новые курсы, пользователей, авторов, а также настраивать отправку уведомлений и осуществлять проморассылки.
В среднем на платформе выходит 50−60 курсов в месяц (максимальное значение достигало 73). Публикацией обучающих материалов занимаются контент-менеджеры Puzzle Brain, и задача админ-панели — предоставить удобный инструмент для оперативной работы менеджеров.
Перед стартом проектирования собрали требования к интерфейсу будущей системы.
Клиент рассказал о работе администраторов сайта, задачах, которые они решают, и функционале, который им требуется. Полученную информацию сверили с информационной архитектурой LMS, чтобы учесть структуру личного кабинета в проектировании панели администратора. Это важный этап с функциональной точки зрения. Все блоки и информация, которая присутствовала в личном кабинете, должна была добавляться и корректироваться через админ-панель. Кроме того, нужно было учесть возможность редактирования всех разделов сайта и добавления новых.
Завершили этап информационной архитектурой с перечнем базового контента для каждого раздела и страницы.
Информационная архитектура админ-панели
На проектировании проработали каждый элемент будущего интерфейса, чтобы он обеспечивал оптимальный рабочий процесс как при мониторинге системы, так и при активном изменении элементов баз данных.
Параллельно велись работы по проектированию внешней LMS, структура которой постоянно совершенствовалась. В работе над админ-панелью учитывали все изменения, чтобы отразить в ней новый функционал.
Прототипы админ-панели
Основные разделы админ-панели представляют собой таблицы, с помощью которых можно управлять свойствами и статусами элементов, редактировать их и создавать новые. Мы постарались расширить функционал таблиц таким образом, чтобы для выполнения рутинных задач администратору требовалось пройти максимально короткий путь.
Главная особенность таблиц — возможность быстрого перехода в режим редактирования: при наведении на ячейку, в которой необходимо отредактировать данные, появляется соответствующий элемент управления, который подсказывает пользователю, как внести изменения. А некоторые функции, например «Сменить статус», «Добавить тег», сразу доступны в таблице.
Таким образом, нет необходимости совершать лишний шаг — переходить на подробную страницу элемента, а потом в режим редактирования.
Быстрый переход в режим редактирования данных
Страница редактирования курса — одна из самых часто используемых: ежемесячно на платформе создается 50−60 новых курсов. Новые курсы администратор создает вручную, а существующие может редактировать или исправлять ошибки авторов.
В первую очередь мы определили приоритет блоков с различными деталями курса и расположили в зависимости от того, насколько часто они используются. В результате основная информация доступна в пределах одного экрана, а более детальная располагается ниже.
Изначально клиент хотел использовать прототипы как готовые дизайн-макеты, но на общем созвоне нам удалось убедить его, что дизайн важен. Он сделает интерфейс приятнее, админ-панель не будет выглядеть как что-то инородное, а кроме того, сотрудникам будет проще им пользоваться. Ведь дизайн интерфейсов — это не красивые картинки, а грамотно расставленные акценты, управление вниманием и помощь пользователям в выполнении их задач.
Итоговые дизайн-макеты наследуют элементы и цветовую гамму дизайн-концепции основного сайта, чтобы сохранить визуальную целостность продукта.
В работе над админ-панелью использовали подход атомарного дизайна: разложили интерфейс на компоненты из пяти уровней — атомы, молекулы, организмы, шаблоны и страницы. Обусловлено это тем, что для будущего масштабирования важно быстро собирать страницы для новых сценариев взаимодействия. Для этого требуется не только подробный UI-Kit, но и описание того, как организмы, шаблоны, атомы и молекулы работают в связке.
В результате работ:
- с нуля спроектировали интерфейс админ-панели с учетом юзабилити и основных сценариев взаимодействия;
- разработали компактную дизайн-систему для легкого масштабирования.
По завершении работ клиент получил мощный кастомный инструмент для администрирования образовательной платформы, который не только закрывает все текущие нужды администраторов, но и легко масштабируется под новые запросы.
От лица проекта Puzzle Brain выражаю огромную признательность за выполненную работу. Особенно хочу отметить:
1. Пунктуальность. Это всегда редкость, и ребята здесь прям сильно порадовали.
2. Отзывчивость. Мы просили временами пойти посмотреть что-то — как оно у других, и всегда на это был позитивный отклик. Благодаря этому переделали часть интерфейса, и он стал удобнее, чем первая версия.
3. Дружелюбность. Такое ощущение, что я работал со своей командой. Очень тесный и теплый контакт. Безумно ценно быть на одной волне.
4. Проактивность. Столько предложений, сколько поступало от ребят, я не получал даже от внутренней команды.
5. Экономичность. Очень порадовало, что можно было не делать что-то, что было ранее заявлено, если в этом терялась необходимость. Например, на дизайне админки мы сэкономили почти 300 к и кучу времени — ребята сами придумали, как оптимизировать эту часть работы.
