Дизайн LMS системы в Ed-tech
Дизайн LMS системы для школы с разбивкой на 3 роли в системе. Спроектировала архитектуру системы, написала ТЗ, сформировала дизайн-систему и отрисовала все экраны и флоу.
Key poins
Обзор проекта
В этом проекте я выступала единственным продуктовым дизайнером и создавал с нуля централизованную LMS-платформу (Learning Management System) для образовательной школы Maqsad. Система должна была заменить хаотичный процесс управления учениками через разрозненные таблицы.
Результатом стала автоматизированная система управления финансами и данными учеников, которая по итогам тестирования с конечными пользователями показала значительный рост операционной эффективности и устранила риск дорогостоящих ошибок, связанных с потерей данных.
До
12 мин.
чтобы добавить студента
После
3 мин.
чтобы добавить студента
Результат
70%
ускорение процесса
Моя роль
Как единственный продуктовый дизайнер, я отвечал за весь сквозной процесс: от первичных исследований и интервью со стейкхолдерами до проектирования информационной архитектуры, UX/UI-дизайна, прототипирования, проведения юзабилити-тестирований и написания ТЗ для разработчиков.
Для того, чтобы лучше понять проблемы текущей версии и в какие болевые точки имеют больше веса, я провела исследование. Исследование заключалось в глубинном интервью, а также в исследовании реальных условий текущего процесса. Мне было важно понять, где и как пользователи будут работать с нашим будущим приложением — я посетила их офис в Ташкенте (Узбекистан) и провела с ними в офисе несколько дней. Я увидела, что менеджеры работают вместе в опенспейсе и одновременно выполняют множество действий с большим количеством открытых приложений, а также шум, который стоял от параллельных звонков и общения в офисе в целом для меня был явным фактором перегрузки.
Главный инсайт: нужно создать приложение, в котором пользователи не смогут случайно совершить ошибку, даже если их отвлекут. Интерфейс должен быть помощником и вести диалог с пользователем.
Много программ
CEO работает с большим количеством приложений для управления школой: платформа с уроками, приложения для финансовых операций, звонков, контроля учеников, таблицы и т.д.
Потеря информации
Поскольку используется множество таблиц, информация об учениках часто теряется из-за ошибок при переносе между ними. Также сотрудники могут случайно удалить часть данных.
Проблема контроля
CEO хочет контролировать продажи продуктов и финансы в целом. Ему нужно отслеживать показатели по периодам. С таблицами это сложно или вообще невозможно.
User Journey Map наглядно показала этапы — например, добавление ученика или обработка платежа, — на которых CEO испытывал больше всего стресса, замешательства и страха потерять данные в старом процессе.
Информационная архитектура
Система должна была вместить около 50 различных функций для трёх ролей пользователей. Чтобы создать интуитивно понятную навигацию, я провела сессию карточной сортировки с клиентом. Этот метод помог мне сгруппировать все функции в логические разделы.
Создание понятной и масштабируемой информационной архитектуры было одним из ключевых этапов, которым я особенно горжусь. Информационная архитектура состоит из 3 карт для 3 ключевых ролей в системе. На каждой карте описана функциональность с разбивкой по MVP.
От идеи к прототипу
Я начала процесс дизайна с бумажных вайрфреймов, чтобы быстро набросать структуру ключевых экранов и проверить базовые гипотезы без затрат времени на детальную отрисовку.
После того как общая концепция была согласована, я перешла к созданию цифровых прототипов в Figma. Это позволило детализировать пользовательские сценарии и проработать логику взаимодействия элементов до перехода к визуальному дизайну.
После отрисовки прототипов, я провела серию согласований со стейкхолдерами. Мы прошли весь путь, внесли корректировки, а разработчики смогли лучше понять, какие инструменты и методы им необходимо использовать. После согласования я пошла в этап отрисовки детализированных макетов, а разработчики благодаря готовой архитектуре ролей и прототипам пошли в этап подготовки структуры всего окружения. Благодаря этому мы смогли ускорить процесс разработи.
Дизайн-макеты
На финальном этапе я разработала чистый и функциональный UI, соответствующий брендингу Maqsad. Особое внимание было уделено созданию консистентной дизайн-системы.
Я разработала UI-кит с набором компонентов (кнопки, поля ввода, цвета, типографика), который не только ускорил процесс дизайна, но и обеспечил единообразие интерфейса и упростил дальнейшую разработку и масштабирование продукта.
Результаты
  • Ключевая метрика. Мы замерили время, необходимое для добавления нового ученика в старой системе (Google-таблицы) и в новом интерфейсе. Результат показал сокращение времени с 12 до ~3 минут — улучшение более чем на 70%.
  • Качественная обратная связь. Реакция CEO лучше всего отражает результат. Он отметил, что решение превратило «источник ежедневного стресса в простую двухминутную задачу» и впервые дало ему чёткое и прозрачное представление о финансовом состоянии бизнеса.
Мои работы
Редизайн ЛК брокера в B2B
Редизайн B2B-app для платежей
Редизайн Ed-tech приложения
Made on
Tilda