Оформление личного кабинета на Геткурс для онлайн-школы программирования CODIM.ONLINE
Заявка на услугу «дизайн личного кабинета Геткурс»
С таким коротким запросом пришла ко мне Нина Леонова - одна из основателей школы программирования для детей Codim.online.
В разговоре вышли с ней на более подробный запрос:
Запрос был весьма творческий, с эмоциональной окраской, без деталей, которые нам предстояло проработать совместно.
Моя задача на первоначальном этапе заключается в том, чтобы помочь Заказчику выделить ключевые моменты в запросе, определить что важно, что не очень, какие смыслы и действия Заказчик предполагает получить при добавлении в интерфейс того или иного элемента, и только после этого сделать предварительную оценку проекта.
Так выглядел личный кабинет ученика на Геткурсе до обновления дизайна
Сначала я выделила в запросе основное:
1. «Для самостоятельного изучения детьми».
Целевая аудитория — дети разного возраста с разными интересами и «героями».
2. «Дорожная карта ученика».
Для разных возрастов — разные курсы и разный порядок их прохождения и доступности. Соответственно, нужно создать матрицу «возраст ребенка / доступные курсы / последовательность прохождения».
3. «7 флагманских курсов».
Соответственно, нужно будет поддготовить и настроить 7 вариантов уникального дизайна, для каждого курса — в стиле той игры, на примере которой построено обучение.
И есть 15+ других курсов, которые должны иметь универсальный дизайн. Итого — 8 вариантов дизайна для объектов Список уроков и Урок.
4. Элементы геймификации — баллы, монеты, атрибуты.
Нет четкого понимания, какие награды за какие достижения.
С геймификацией была самая сложная проектная работа. Долго путали бонусные рубли и монеты, как они связаны с динамикой обучения, с бейджами, с призами из магазина и т.д.
При этом, вся геймификация не должна путать учеников: у них должно быть четкое понимание — «делаю это — получаю это».
Каждый элемент системы должен работать на общую мотивацию к прохождению курсов и к приобретению новых программ.
Если идея нравится - берем в реализацию, не смотря на сложности )
5. «Не захламлять пространство».
Сложновыполнимая задача, учитывая разнообразие дизайнерских решений для отдельных курсов и количество элементов геймификации.
Но, читайте дальше — мы справились с этой задачей на все 100%.
6. «Ученики не понимают, что 10 видео — это один урок и не понимают, куда прикреплять ДЗ.»
Соответственно, нужно поработать с визуальной структурой урока.
И, конечно же, навскидку сказать стоимость работ по такому ТЗ очень сложно. Поэтому следующим шагом обговорили примерный перечень работ, ооочень примерный бюджет и приступили к детализации ТЗ.
Что выяснилось уже в ходе детализации ТЗ
Интерфейс
1. Все «дорожные карты» для каждой возрастной категории должны располагаться на главной странице «Тренинги». Деление по возрастам, которое уже было сделано на основном сайте школы, немного отличалось от поставленной задачи.
2. Кроме полноценных курсов есть марафоны и мини-курсы, которые не включены в «дорожную карту».
3. Дополнительно к «Дорожной карте» на странице тренингов делаем раздел «Все курсы / Доступные мне курсы» с переключателем и фильтрацией по теме курса.
4. Внутри каждого курса есть блок допродажи следующего модуля курса для тех, кто приобретает курс частями.
5. Требуется реализовать блок Заморозка/Продление с возможностью самостоятельной заморозки курса пользователем с минимальным привлечением службы поддержки.
6. В текущем дизайне прописаны стили CSS в разных объектах, поэтому для корректной работы новых шаблонов требуется подчистить все стили в тренингах и уроках.
Геймификация
1. Будут и бонусные рубли, и монеты.
2. Бонусные рубли начисляются на определенное время и используются при оплате других курсов. Баланс бонусных рублей выводим в интерфейс ученика в тренинге с возможностью перейти к выбору нового курса.
3. Монеты:
- можно заработать за прохождение курса;
- есть общий рейтинг учеников по монетам;
- за монеты можно приобрести подарок в «магазине».
4. Магазин подарков.
В качестве товаров могут выступать как мини-курсы, отдельные уроки, так и другие материалы (файл с информацией, например).
Приобрести товары в магазине можно за монеты (и это не стоп-уроки).
Далее была согласована предварительная смета и подписан договор.
План работ был разбит на 3 этапа:
1. Разработка дизайн-макета.
2. Верстка по дизайн-макету на Геткурсе.
3. Настройка Геткурс для реализации механик, заложенных в интерфейс.
По каждому этапу было составлено подробное техническое задание, включая перечень страниц и объектов, которые предстояло проработать в дизайне, а так же список задач по настройке Геткурса.
В ходе согласования сметы выделили этапы работ и задачи, которые могли быть выполнены заказчиком самостоятельно (в целях экономии бюджета).
С «самостоятельной работой» всегда нужно быть начеку.
С одной стороны, это действительно, экономия и параллельное обучение сотрудников тому, как работать в новом дизайне (а в дальнейшем работа предстояла самостоятельная, без постоянного привлечения web-дизайнера). Но, с другой стороны, нужны четкие инструкции, чтобы заказчик ничего не мог необратимо «сломать», иначе на исправления уйдет больше времени, чем на настройку.
Этап 1. Дизайн
Дизайнер — Кира Ким — этим все сказано ❤️.
Макеты всех страниц и отдельные элементы были проработаны в Figma идеально.
Пошаговый режим позволил учесть особенности оформления каждого объекта и в спокойном режиме протестировать все, что было заложено в техническое задание.
Этап 2. Верстка
Верстку «выкатывали» поэтапно.
Первым шагом сделали общие страницы:
- страница входа/регистрации,
- страница оплаты,
- боковое меню.
Страница после успешной оплаты
Далее — внутреннее оформление тренингов.
7 «флагманов» были оформлены в стиле игры, на базе которой проходит обучение, с донастройкой механики выдачи призов, оформления заморозки и продления, апселов.
В последнюю очередь — дорожные карты по возрастам и общий список тренингов, приобретенных и доступных к покупке, с фильтром по направлениям.
Пошаговый режим позволил учесть особенности оформления каждого объекта и в спокойном режиме протестировать все, что было заложено в техническое задание.
Этап 3. Настройка
Дизайн и верстка были полностью на стороне Киры, но технические решения мы генерировали вместе, чтобы дизайн не упирался в технические ограничения платформы.
Далее настройка процессов на Геткурс — моя часть большой общей задачи. Поэтому остановлюсь подробнее именно на настройках.
Бейджи-достижения
За выполнение каждого из 4х модулей Ученик получает небольшой бейдж с цифрой пройденного модуля.
После получения прохождения всех модулей (завершение курса) Ученику выдается «награда».
Награды различаются:
- для курсов разной тематики — разные награды,
- для марафонов и мини-курсов — отдельные награды меньшего размера.
За прохождение нескольких курсов в одной тематике дополнительно для каждой награды отображается количество пройденных курсов.
Все награды собираются в единый блок «Твои награды» на главной странице личного кабинета.
Монеты «Левкоины»
Ученик может заработать монеты при прохождении курса за своевременное выполнение заданий.
По мере того, как ученик проходит курс и получает основную награду — он зарабатывает монеты.
По завершении курса он получает столько монет, сколько достаточно для открытия главного приза курса.
Для каждого курса — свой «сундук» с отметкой «получен», если приз уже выдан ученику.
Рейтинг по монетам мотивирует учеников проходить курс во время и проходить дополнительные курсы, чтобы заработать больше монет и, соответственно, получить больше призов.
Начисление бонусов
Бонусные рубли начисляются после прохождения курса и сгорают через заданный промежуток времени.
Направлены больше на внимание родителей, чтобы стимулировать приобретать следующий курс из «дорожной карты» сразу после завершения текущего.
Магазин подарков
Технические нюансы:
Изначально планировали, что подарки будут недоступны к выдаче, если для получения подарка недостаточно монет, или курс, на котором можно получить подарок - еще не куплен.
Но в дальнейшем решили, что все подарки в магазине доступны к просмотру всем зарегистрированным, однако оформить может только тот, кто приобрел конкретный курс, к которому "привязан" подарок и у кого достаточно монет на балансе.
Если монет недостаточно - ученик видит надпись, что нужно накопить ХХ монет.
Причем, некоторые подарки доступны только при прохождении определенного курса, поэтому если монет достаточно, но курс не пройден - ученик видит предложение приобрести нужный курс.
Отзыв заказчика
о работе по оформлению личного кабинета ученика на платформе Геткурс
Заказать оформление личного кабинета на Геткурс:
Дополнительные ссылки:
авторизуйтесь