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

Клиент пришёл с задачей проработать внутреннюю LMS сайта (система управления обучением), т. е. личный кабинет пользователя, в котором можно ознакомиться со всеми курсами платформы, оформить подписку, проходить уроки и отслеживать свой прогресс.

У компании на момент старта проекта уже была своя LMS, но без витрины со всеми курсами, что существенно уменьшало возможности для апсейла. К тому же её дизайн был устаревшим, а функционал, по мнению клиента, требовал доработки — в чём-то он был избыточен, а в чём-то, наоборот, не учитывал все потребности клиента и компании.

В процессе аналитики выяснили, что для корректной работы LMS нужно ещё спроектировать и разработать панель администратора, в которой менеджер будет осуществлять управление контентом. Так для одного клиента мы реализовали два проекта, и ниже подробно расскажем о каждом.

На старте проекта было проведено несколько интервью с клиентом. Общались напрямую с CEO компании, что существенно упростило работу, так как лицо, принимающее решение, и хранитель всех знаний о компании, маркетинге и продажах — один и тот же человек. Клиент максимально подробно рассказал о текущих бизнес-процессах, работе LMS, целевой аудитории, способах продаж и требованиях к личному кабинету.

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

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

В итоге построили информационную архитектуру, расписали функционал и наполнение страниц.

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

Так как большинство пользователей платформы Puzzle Brain обучаются с мобильных устройств, то проектирование и дизайн делали по принципу Mobile-first. Сроки по проекту были довольно сжаты, поэтому прототипы делали для ключевых и сложных страниц, а более простые (например, «Все курсы») или универсальные (страницы входа и регистрации), собирали непосредственно на этапе дизайна.

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

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

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

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

Вместе с клиентом остановились на следующих характеристиках:

• дружелюбный и лёгкий интерфейс;
• аккуратные карточки с легкими тенями;
• яркие и скруглённые кнопки;
• простые интерфейсные иконки.

В качестве акцентного цвета выбрали оттенки сиреневого и фиолетового.

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

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

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

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

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

После согласования дизайн-макетов мобильной версии собрали UI-кит, в котором учли состояния всех элементов, кнопок, иконок. Готовый исходник передали клиенту. UI-кит помог разработчикам оперативно приступить к их части работы и оптимизировать время на запуск проекта.

Так как основной упор делался на мобильную версию, в которой были учтены все требования клиента, — правок в десктопные макеты было минимальное количество. Проработав все адаптивные экраны, дополнили UI-кит новыми состояниями и элементами, а затем передали в разработку обновленный исходник.

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

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

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

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

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

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

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

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

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

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

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

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

1. Настраиваемые таблицы — есть возможность кастомизировать таблицу под актуальные задачи.
2. Гибкая фильтрация элементов — сквозная фильтрация позволяет максимально детализировать выборки элементов. 
3. WYSIWYG-редактор — интегрированный визуальный редактор для сборки курсов и шаблонов для e-mail рассылок.

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

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

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

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

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

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