BBE. Личный кабинет для онлайн-школы дизайна. Концепция
UX/Ui дизайнер, лидер команды
2021
Bang Bang Education — это школа креативных дисциплин
и сообщество для тех, кто хочет состояться в индустрии дизайна. Школа развивает систему междисциплинарных программ, которая позволяет углубить знания в выбранном направлении и выстроить гибкий образовательный путь.
и сообщество для тех, кто хочет состояться в индустрии дизайна. Школа развивает систему междисциплинарных программ, которая позволяет углубить знания в выбранном направлении и выстроить гибкий образовательный путь.
Бренд
Тестирование
Согласно концепции школы все курсы уникальны и не должны быть масштабированы на тысячи участников, продвигается эксклюзивный подход. Как следствие — каждый из курсов возникал стихийно и был организован в соотвествии
с представлениями и возможностями его ведущих. В итоге, вместо единой учебной среды получилось большое количество образовательных и коммуникативных пространств на различных ресурсах.
с представлениями и возможностями его ведущих. В итоге, вместо единой учебной среды получилось большое количество образовательных и коммуникативных пространств на различных ресурсах.
Проблема
Далее мы создали интерактивный прототип, где множество раз проходили всевозмжные сценарии обучения и использования. Также провели usability - тестирование протестировали прототип , понаблюдав за прохождением сценариев 50-ю людьми разного возраста и уровня диджитализации.
Ценность для бизнеса
Унификация и, соответственно, ускорение процесса сборки курсов, системная работа с метриками эффективности.
Цель
Перед нашей командой была поставлена задача — спроектировать сервис для студентов и преподавателей школы, в котором каждая из сторон может достигать своих целей.
Студенты — видеть состав курса, свой прогресс в нем,
в процессе отмечать непонятные моменты или хорошее объяснение темы, эффективно и без лишних действий заниматься на купленных курсах, отслеживать свой прогресс
и давать обратную связь для улучшения программы.
Преподаватели — публиковать курсы, взаимодействовать со студентами, контролировать динамику вовлечения студентов, собирать статистику по материалам и развивать школу.
Студенты — видеть состав курса, свой прогресс в нем,
в процессе отмечать непонятные моменты или хорошее объяснение темы, эффективно и без лишних действий заниматься на купленных курсах, отслеживать свой прогресс
и давать обратную связь для улучшения программы.
Преподаватели — публиковать курсы, взаимодействовать со студентами, контролировать динамику вовлечения студентов, собирать статистику по материалам и развивать школу.
Исследование
После составили гипотезы и провели 20 глубинных интервью с представителями этих групп, где получили много инсайтов, ключевыми для нас стали следующие:
- Конкуренция далеко не всегда мотиватор, а вот наглядно показанный прогресс прохождения курса помогает не опускать руки;
- Чтобы было комфортно находится в личном кабинете, он должен стабильно работать, быть простым и спокойным, оформлен в спокойных не раздражающих глаз цветах;
- Личный кабинет на сайте удобнее, чем приложение, так как не все хотят его устанавливать, может не быть памяти на телефоне;
- Для преподавателей и студентов важна возможность быстро перейти в программы совместной работы - Figma, InDesign.
- Обучались на 1 онлайн-курсе
- Обучались на нескольких онлайн-курсах
- Никогда не обучались онлайн
- Являются куратором/ведущим на онлайн курсе
Мы определили респондентов для исследования пользовательского опыта согласно следующим признакам: возраст, владение технологиями, сферы интересов, тип занятости, степень погруженности в онлайн-образование
и разделили их на 4 группы:
и разделили их на 4 группы:
Процесс
Для геймификации и персонализации была предложена интеграция с Memoji, где аватар каждого из учеников настраивался бы индивидуально, позволяя при этом
не размещать свою личную фотографию при желании.
не размещать свою личную фотографию при желании.
Сервис должен жить в экосистеме Bang Bang и сохранить признаки бренда, однако решение могло быть разработано
на любых интерфейсных компонентах по стилистике и быть спроектировано в нуля. Компромиссом в данном случае стало использование цветового решения школы — сочетания черного и белого цветов, шрифта для контента.
на любых интерфейсных компонентах по стилистике и быть спроектировано в нуля. Компромиссом в данном случае стало использование цветового решения школы — сочетания черного и белого цветов, шрифта для контента.
UI
Контроль курса
Публикация нового курса и аналитика
- Просмотр списка студентов с отслеживанием общих показателей активности на курсе и прогрессом по изучению материалов каждым участником.
- Просмотр детальной карточки студента с возможностью отметить его успехи.
- Сценарий оценки компетенций и работы студента в процессе обучения и формирование итоговых рекомендаций — Просмотр списка студентов с отслеживанием общих показателей активности на курсе и прогрессом по изучению материалов каждым участником.
- Просмотр детальной карточки студента с возможностью отметить его успехи.
- Сценарий оценки компетенций и работы студента в процессе обучения и формирование итоговых рекомендаций
- Понимание что именно в данный момент делает каждый отдельный студент курса
- Возможность делать пометки по студентам
- Отслеживать включённость ученика в процесс , что именно посмотрел/прочитал, где на видео остановился
- Понять кто тащит, кто отстает, кому дом внимание и дом мотивация
- Собирать информацию в начале : специализация студентов
- При проверке дз видеть сколько еще осталось
Публикация нового курса и аналитика
- Публикация курса на платформу
- Сравнение потоков по определенным показателям
- Выгрузка таблицы с данными по метрикам (дата последнего захода студента на платформу, сколько из скольки материалов посмотрел, отправил ли дз (сколько частей из скольки)
Отслеживание купленного курса
Прохождение курса
- Детальная информация о курсе и поиск необходимой информации в нем.
- Просмотр программы, своего статуса, доп. отметок и расписание занятий с возможность отмечать потенциальное отсутствие.
- Возможность дать обратную связь или перенести участие на следующий поток (на первой трети программы).
- Просмотр деталей модуля + демо-версии для открытого доступа.
Прохождение курса
- Открытие видео с возможностью оставлять реакции в процессе.
- Возможность делать заметки или оставлять комментарии о материалах.
- Просмотр деталей модуля + демо-версии для открытого доступа.
- Открытие видео с возможностью оставлять реакции в процессе.
- Возможность делать заметки или оставлять комментарии о материалах.
- Возможность видеть «где я по сравнению с другими».
Мы разработали унифицированный интерфейс для двух ролей согласно следующим сценариям использования:
Был проведен анализов конкурентов и выявлены сильные и слабые стороны организации личных кабинетов и онлайн пространств для обучения.
Далее мы составили user stories и определились с ключевыми компонентами и решениями в интерфейсе сервиса для всех сценариев использования.
Мы использовали полученные качественные исследования пользовательского опыта занятости для составления CJM.
Далее мы составили user stories и определились с ключевыми компонентами и решениями в интерфейсе сервиса для всех сценариев использования.
Мы использовали полученные качественные исследования пользовательского опыта занятости для составления CJM.
Эта техника помогла выявить наиболее проблемные этапы
и использования учебного интерфейса и болевые точки, такие как: волнение и большое количество вопросов сразу после оплаты курса; «не понимаю прошла оплата или нет», «Нет содержания курса под рукой», «соперничество демотивирует», «забыл о вебинаре», «устаю, теряю мотивацию», «сложно приступать к объемным заданиям», «нечеткие и непонятные формулировки обратной связи», «как найти работу
по специальности после окончания курса».
После подробного анализа мы составили карту сервиса
и таблицу всех его компонентов. Ключевой задачей на данном этапе стало связать CJM to be с бумажными прототипами сервиса, провести пользователя по основным сценариям.
и использования учебного интерфейса и болевые точки, такие как: волнение и большое количество вопросов сразу после оплаты курса; «не понимаю прошла оплата или нет», «Нет содержания курса под рукой», «соперничество демотивирует», «забыл о вебинаре», «устаю, теряю мотивацию», «сложно приступать к объемным заданиям», «нечеткие и непонятные формулировки обратной связи», «как найти работу
по специальности после окончания курса».
После подробного анализа мы составили карту сервиса
и таблицу всех его компонентов. Ключевой задачей на данном этапе стало связать CJM to be с бумажными прототипами сервиса, провести пользователя по основным сценариям.
Решение
