Категория: Дизайн для Getcourse

Описание задачи

К нам обратилась школа BlaBla за оформлением личного кабинета Геткурс. Была необычная задача — сделать дизайн сказочным и в стиле мультфильма «Алиса в стране чудес». У клиента было изображений, шрифты, дизайн лендинга. Это хороший набор материалов для старта оформления.

Задача

Сделать новый дизайн для школы на Getcourse в волшебном стиле.

Зачем, цель

Клиент мечтал о новом дизайне геткурса. Это всегда была его боль. Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы связязываем все площадки клиента. .

Бизнес-требования к продукту

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

Отзыв клиента

Результат клиента — x2 в заявках

До оформления заявок в лист предзаписи было 500−600, после анонса оформления — 1200

Дизайн до упаковки

Процесс

Это необычная задача, потому что обычно надо в фирменном стиле оформить удобно в привычном стиле.

А здесь нужно было создать волшебство какое-то. ячфвафывфы

Обновленный дизайн

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

Страница курса, когда пользователь не оплатил курс

Когда пользователь еще не купил курс, ему доступен только первый модуль. Чтобы получить доступ к другим модулям — он должен купить их.

Мы показываем недоступность через создание ч/б эффекта на фото и отделением кнопокой «Провалится глубже в страну знаний»

Страница курса, когда пользователь оплатил курс

Когда пользователь оплатил курс, другие модули курса становятся доступыными. Мы показываем это через удаление ч/б эффекта с фото.

Страница модуля с уроками

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

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

Дизайн элементов страницы урока

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

Страница урока

После разработки всех элементов страницы урока я взял одну страницу из уроков клиента и стилизовал ее с новыми элементами.

Блог тестирование, дизайн разных состояний

Цель дизайна — повышать вовлечение. В блоке с заданием я повышал вовлечение с помощью изображения портала.

Я зазываю пользователя в красивый портал срелками. Кликая на него, пользователь начинает отвечать на вопросы.

Если он ответил неправильно, портал становится красноватым, показывая, что входа нет.

Когда пользователь ответил правильно, портал загорается ярке, показывая, что можно пройти.

Задизайнено на базе Remake

Описание задачи

К нам обратилась школа YesToday за оформлением личного кабинета Геткурс. Из фирменного стиля был логотип. Кроме логотипа клиент прислал несколько референсов, которые ему нравились визуально.

Задача

Оформить Геткурс школы, чтобыотличиться от конкурентов и приблизиться к к планке лидеров рынка. Если все удобно и понятно — лучше отзывы, меньше нагрузки на поддержку, лучше результаты.

Зачем, цель

Разработали уникальный дизайн Геткурса. Учли все пожелания клиента, разработали несколько дополнительных виджетов и страниц для удобства администрирования и пользователей.

Бизнес-требования к продукту

• пользователи должны иметь тот же функционал, но в новом дизайне
• найти моменты, который можно улучшить в стандартном дизайне Getcourse.

Предыдущий дизайн

Новый дизайн

Главная страница

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

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

Страница курса

Разработали страницу модулей или подтренингов. У каждого модуля есть визуальное отображение его статуса.

Страница модуля

Подкасты

Прямые эфиры

Библиотека

Библиотека это набор полезных материалов для учеников в разных форматах: ссылки, документы, книги.

Страница урока

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

Вход, регистрация и обратная связь

Мой профиль

Полностью переработали страницу «Мой профиль». Разделили данные на на обязательные и системные. В правой колонке находятся те поля, которые отвечают за доступ. Поля слева необязательны для заполнения.

Настройка уведомлений

Оплата

Благодарность за оплату

Покупки

Ожидание вебинара

Вход в вебинар

Вебинарная комната

В вебинарной комнате оставили то же размещение элементов, но поменяли их дизайн.

К нам обратилась школа интерьера Marso для оформления школы на Getcourse.

У них уже был фирменный стиль, нам нужно было разработать дизайн страниц для Getcourse.

Дизайн главной страницы

Вход, регистрация

Страница курса

Обратная связь, благодарность за оплату

Страница модуля

Оплата, рейтинг учеников

Страниц оплаты

Страница урока

Задизайнено на базе Remake

К нам обратилась компания Reskill с задачей оформления Getscourse. 10 декабря они планировали запустить новый поток с дизайном.

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

Задача

• Разработать дизайн 14 стандартных страниц Getcourse.
• Разработать дизайн страниц «Войс-чат» и «Прямые эфиры»
• Редизайн страницы «Библиотека»
• Интегрировать разработанный дизайн в Getcourse

Главная страница

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

Страница курса

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

Страница урока

Страница урока состоит из дизайна элементов, такая сборная солянка, из которой администраторы смогут собирать нужные им страницы.

Страница модуля

Библиотека

Ожидание вебинара

Прямые эфиры

Запись прямого эфира

Войс-чаты

На этой странице кураторы размещают записи аудио-созвонов с учениками. Ученики смогут еще раз прослушать аудио после созвона.

Страница оплаты

Мой профиль

Мобильная версия

Дизайн главной

Дизайн внутренних

Страница модуля

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

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

Страница урока

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

Ярослав Мирошник в составе компании Солнышко123 заказал у меня доработку дизайна геткурса школы «Город».

У школы уже был фирменный стиль и готова часть страниц кабинета. Мне нужно было разработать дизайн 11 страниц.

Страница курса

Страница урока

Подкасты

Страница подкаста

Оплата

Ожидание вебинара

Обратная связь

Запись вебинара

Страница отсутствия доступа

Вход на вебинар

Вебинарная комната

Мобильная версия

Ярослав Мирошник от лица компании Солнышко123 обратился ко мне по поводу дизайна школы Sensei. Планировался запуск и нужно было оформить геткурс в фирменном стиле.

Главная страница

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

Страница курса

Страница урока

Настройка уведомлений

Мой профиль

Страница оплаты

Вход, регистрация и обратная связь

Мои покупки

Благодарность за оплату

Чат

Мобильная версия

Компоненты и описание отношений элементов в дизайне

Задача

Cтудия Солнышко 123 обратилась с задачей редизайна текущего личного кабинета для курса по фотографии.

Старый кабинет

Дизайн

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

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

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

С его помощью удобно смотреть что осталось сделать для завершения урока.

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

Мобильная версия

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