Оформление личного кабинета на GetCourse

Привет! Меня зовут Даниил Постнов. Я один из основателей продукта Remake — готового шаблона для оформления школ на GetCourse.

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

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

1. Отстройка от конкурентов, которые выглядят одинаково

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

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

Каждый раз, когда я соприкасаюсь с брендом, я запоминаю его.

Еще пример

Взгляните на картинку:

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

Я тоже посмотрел на него. Это старый трюк с акцентным элементом.

То же самое происходит и с визуальным восприятием школ на GetCourse.

Вот так будет выделяться школа, когда у нее есть индивидуальное оформление:

Но не думайте, что оформление — это просто красивая картинка.

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

Если мне будут показывать интерфейс 5-ти стандартных неоформленных школ — я не запомню и одну. Это будут абсолютно одинаковые сине-белые скриншоты GetCourse.

Но когда я вижу кастомное оформление — каждая создаёт свой образ, свое впечатление, своё узнавание.

2. Формирование образа лидера рынка

Когда предприниматели видят, как выглядит их школа, а потом смотрят, например, на Reskill или YesToday, они начинают стремиться к ТОПам рынка, хотят быть похожими на них и расти.

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

3. Создание другой атмосферы

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

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

4. Экономия времени

В ноябре 2022 мы устанавливали оформление Remake для школы Reskill. Необходимо было выполнить всю работу в короткие сроки, не потеряв при этом в качестве.

Прошлый подрядчик ставил им оформление 2 месяца. С Ремейком мы уложились в 3 недели, с учетом индивидуальных доработок по дизайну и коду.

5. Снижение нагрузки на тех.поддержку

В одном из проектов пользователи очень плохо ориентировались на платформе и не могли найти уроки, они постоянно спрашивали: «А где искать уроки? Куда нажимать?» Это сильно нагружало тех.поддержку, увеличивало расходы школы и снижало уровень лояльности и вовлеченности учеников.

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

6. Целостность бренда

Часто владельцы онлайн-проектов говорят что-то вроде: «Я сделал крутой сайт, красиво оформил инсту и группу в ВК. Но когда мне нужно показать что-то из геткурса, меня начинает бесить его стандартное оформление. В итоге я не хочу ничего выкладывать, потому что это ломает всю красоту, которую мы построили».

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

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

7. Забота об учениках

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

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

8. Оптимизация процесса оформления

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

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

А если проект крупный и таких тренингов под сотню? Не очень удобно и требует больших затрат времени и постоянного обращения к специалисту по оформлению.

Такие процессы можно и нужно оптимизировать.

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

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

Расскажу про один интересный кейс.

Ко мне обратился клиент с просьбой оформить GetCourse: «Даня, привет! У меня есть классный сайт. Там тематика по инвестициям в стиле „Алиса в стране чудес“ Мне нужен улетный дизайн GetCourse. Надо, чтобы было волшебно».

Это был Александр Фирсов BlaBlaInvest. Полное описание кейса можно увидеть здесь.

Работа на дизайном

Разработку дизайна я начал с просмотра мультфильма. Кому-то это покажется странным, но это принесло свои плоды.

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

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

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

Клиент делал то же самое для своей аудитории и делал это не зря.

Вы, возможно, подумаете: «Дань, а при чем тут твой рассказ? Я пришел статью про оформление GetCourse прочитать».

Сейчас всё объясню.

Когда вы прочитали описание работы над проектом — вы прожили со мной небольшую историю. Конечно, в моей инсте и инстаграме* клиента она была куда длиннее и подробнее. Она вовлекала.

В чем профит

Когда вы проживаете историю становления проекта: проблемы, решения, откат назад, продвижение вперед — вам этот проект становится интересен. Хочется узнать, а что получилось в итоге. Хочется и дальше быть причастным к этому.

До сторителлинга про новое оформление число заявок в предзапись было примерно 600.

После и с новым оформлением — 1200 заявок. Это в два раза больше.

Доходимость до конца курса тоже увеличилась на 13% — до 82%.

Почему так произошло

Причина первая — клиент заказал индивидуальное оформление. Выше целых 8 объяснений, как и почему это оказывает влияние на количество заявок и доходимость до конца курса.

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

Немного внутрянки, для лучшего понимания процесса работы над индивидуальным оформлением проекта.

1. Созвон и обсуждение задачи

   • определяем точку А

   • причину редизайна,

   • фирменный стиль,

   • дедлайн,

   • пожелания к дизайну,

   • бюджет,

   • структуру.

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

2. Выбираем инструмент реализации

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

   Сейчас у нас на выбор есть три варианта.

   Уникальный дизайн определенных страниц, срок исполнения ~3-4 недели:

   

   
   Remake + индивидуальные доработки под бренд школы, срок исполнения ~2-3 недели:

   

   
   Только Remake, срок исполнения ~2 дня:

   
   

3. Разработка прототипа

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

   Набросок списка тренингов «широкими мазками» и прототип стиля списка тренингов школы BlaBlaInvest:

   

   

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

4. Этап поиска концепции

   Если у проекта есть свой фирменный стиль — при разработке дизайна использую его.

   Если нет — работаю по предоставленным клиентом материалам или на основании выбранной им тематики.

   Делаю на выбор несколько вариантов дизайна одной и той же страницы. Этап концепций позволяет найти нужный стиль.

   Варианты дизайна списка тренингов:

   

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

5. Утверждение концепции

   После разработки нескольких вариантов дизайна мы с клиентом созваниваемся и обсуждаем выбор одной общей концепции.

   Если у клиента есть правки — обсуждаем и вносим их.

6. Разработка дизайна и утверждение дизайна

   После утверждения общей концепции остается разработать дизайн для всех остальных страниц.

   Дизайн проекта BlaBlaInvest:

   

7. Отдаю макеты разрабам

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

   UI-кит проекта Remake (прим.ред.: UI-кит — набор готовых решений пользовательского интерфейса):

   

8. Утверждение разработки

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

   Если баги есть — записываем и идем править.

9. Очищаем стили школы перед установкой

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

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

10. Тестовая установка оформления — для администраторов

    Чтобы протестировать оформление «в бою», нужно установить его в школу. Но что, если там учатся десятки тысяч учеников и при установке что-то не будет работать?

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

    Мы всё проверяем на админских аккаунтах, если находим баги — идем править.

11. Обновление оформления для учеников

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

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

12. Ловим баги

    Мы понимаем, что всё предусмотреть невозможно. Где-то прокралась лишняя строка стороннего кода, где-то потерялся кусочек нужного. Бывает всякое.

    Поэтому еще в течение недели мы пересматриваем все страницы личного кабинета и ищем ошибки или элементы для улучшения.

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

Конечный результат всегда индивидуален, пусть и на базе шаблонных наработок.

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

А если вам нужно качественное оформление на GetCourse — обращайтесь, мы работаем с лучшими.