С чего ты начинал: с дизайна или вёрстки? Как переключился с одного на другое?

Ещё лет в 14 лет мы с другом делали сайты. Ничего в этом не понимали, искали какие-то видео, что-то копировали, вставляли не разбираясь. Код казался еще одним иностранным языком, но нам было интересно и что-то получалось. Один из таких сайтов живёт до сих пор.

В 2018 году я занялся продажей китайских товаров и мне понадобился сайт для этого проекта, а бюджета на подряд не было. Решил сделать сам: начал уже осознанно и глубже изучать вопрос, смотрел уроки по вёрстке. Увлёкся темой, собрал портфолио, а потом устроился верстальщиком в компанию. И за время работы там очень устал от того, что постоянно приносят откровенно слабые макеты. Я понимал, что их можно сделать качественнее и удобнее, но почему-то не делают. Захотелось как-то повлиять на это, чтобы хорошего дизайна стало больше, и чтобы русскоязычный сегмент интернета стал выглядеть лучше, чем он был. Поэтому ушёл еще и в эту сферу.

Как попал в сферу онлайн-образование и GetCourse?

Поработав уже пару лет в дизайне, я получил запрос от одного заказчика на вёрстку: за три дня надо было сделать очень большой проект. Я готов был взяться, но мы не сошлись в цене. А через некоторое время он вернулся, но уже с задачей на дизайн личного кабинета в GetCourse. Так я и зашёл в нишу, через эту студию. Первый проект с ними сделали, а во втором подключился Дима Space, с которым позднее мы придумаем совместный проект — Remake.

Начал работать с Геткурсом и остался с ним. Что тебя заинтересовало в нём с точки зрения дизайна?

С самого начала это был азарт: мне нравилось «воевать» с ограничениями. Я придумывал какую-то фишку интерфейса, приходил к разработчикам и говорил: «Нужно сделать вот так». В ответ получал: «Это невозможно». Предлагаю варианты — всё равно «нельзя». И так до тех пор, пока мы не находили рабочее решение и не реализовывали мою задумку.

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

Эта война идёт всегда, когда разработчик говорит «нет, не получится». И тут зависит от дизайнера, сможет он как-то продавить своё решение или нет. Ведь часто это решение есть, но многие не хотят сильно запариваться, хотят идти коротким путем. А я считаю, что заморачиваться стоит.

Самое интересное — сделать так, чтобы мне не могли ставить рамки, чтобы мне не говорили «так нельзя, туда не ходи». Мне нравится ломать эти ограничения и слышать в ответ «круто, оказывается, так можно!».

Так было, например, с тем, чтобы стили автоматически применялись ко всем страницам GetCourse, и не надо было копировать код из тренинга в тренинг, со страницы на страницу. Дима Space вложил очень много сил в то, чтобы это работало. И всегда приятно слышать от клиентов: «Вау, почему вы сразу это не сказали?! Всё, я беру, остальное не важно».

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

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

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

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

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

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

Ты ведь регулярно пишешь команде GetCourse с предложениями по улучшению.

Да. Предлагал и взять меня на работу, и развернуть наш Ремейк массово на школы, которые у них размещаются. Ответ — «нет», считают, что всё это ерунда. При этом элементарную строку «Поиск» они до сих пор так и не вынесли в кабинет. Этот разрыв мы и закрываем своим решением.

Расскажи про Ремейк. Что это, простыми словами? Как он появился?

Если совсем просто — тема оформления GetCourse: новый дизайн и интерфейс, который ставится поверх платформы и делает ГК удобнее, доступнее и симпатичнее, без ломки логики обучения.

Его можно установить за 3 дня и, несмотря на свою универсальность, можно сделать полностью кастомным и уникальным под любой проект. Это наша совместная разработка с Дмитрием Space: я проектировал, а Дима верстал и программировал.

Идея родилась где-то через полгода после моего старта в дизайне личных кабинетов. Мы хотели добиться такого продуктового решения, которое не потребует четырёх месяцев «стыковки» клиента, верстальщика и дизайнера. Чтобы это не было долго и дорого. Так и появился Ремейк.

Что было самым трудным в первом прототипе?

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

Я даже консультировался с судебным экспертом, показывал ему референсы и наброски Remake, мы прошлись по всем блокам и страницам, чтобы исключить риски плагиата. Где-то сознательно упрощал и переделывал, чтобы итог был уникальным продуктом, а не просто «скопировал/вставил».

А еще на старте мы допустили ошибку — слишком большой объём сразу взяли в разработку. Мы сделали дизайн ВСЕХ ученических страниц — 23 шаблона — и предлагали к установке весь этот комплект. Через полгода стало ясно: большинству достаточно 4–8 страниц, остальной «длинный хвост» почти не нужен. Из 103 школ, которые на сегодняшний день установили Ремейк, дополнительные шаблоны взяли 8–9. Можно было не тратить на это месяцы.

Есть аналоги «поставил за 2–3 дня и готово»?

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

Это ключевое отличие от привлечения отдельного дизайнера и верстальщика — с нами проще и быстрее. Мы созваниваемся, вы присылаете данные и оплату — через три дня получаете красивый, структурный, логичный и продуманный Геткурс.

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

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

Ремейк — решение стандартное и универсальное для всех. А как быть с тем, что в разных проектах разная ЦА? Это же отличия и в восприятии информации, и в визуальной среде.

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

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

Например:

• Строка поиска в «шапке» тренингов и страниц. Чтобы можно было быстро найти нужный урок или модуль. Банальная, но важная вещь, которую почему-то до сих пор не реализовал у себя Геткурс.
• Последний посещённый урок. Виджет в правой панели: запоминает, где вы остановились; один клик — и вы внутри нужного урока, даже если он глубоко в структуре. На созвонах заказчики реагируют на него сильнее всего: «Вот это класс!»
• Блоки поддержки. Видимые и дублированные точки контакта с техподдержкой проекта. Именно проекта, а не самого Геткурса. Я прочитал порядка 1500 отзывов в Google Play/App Store по GetCourse: одна из самых распространенных жалоб — невозможно связаться со школой. Люди переходят по той кнопке, которая есть в меню, а это обратная связь с платформой. Поэтому мы даём «избыточность» таких точек контакта: когда есть вопрос — человек моментально находит, куда написать и как связаться с проектом.
• Тайм-коды для видео. Ускоряет навигацию по контенту.
• Кнопка «Следующий урок» прямо под заданием. Чтобы не надо было отматывать обратно наверх всё содержимое урока.

В Ремейке много разных фишек. Наша цель — сделать интерфейс максимально удобным.

Если Remake уже установлен, технический специалист или верстальщик клиента сможет что-то изменить самостоятельно или только через вас?

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

Мы заинтересованы в том, чтобы такие правки могли сделать без нас: если нам одновременно напишет о смене шрифта или баннера даже 15-20 школ из 103, в которых установлен Ремейк, нас просто разорвёт. Но если речь идет о каких-то более сложных вещах, то лучше обратиться к нам, конечно.

Почему Ремейк дороже обычных разработок от дизайнеров-верстальщиков?

Потому что это не просто «обложка», которую для красоты натянули на платформу, а целая связанная система: шаблоны, автоматизация, набор виджетов, поддержка, обновления, обратимая установка, сценарии отката и многое другое. А ставится при этом быстро и просто. Объяснить это даже на созвоне с клиентом за 20–60 минут сложно, поэтому я собрал подробный лонгрид — из чего состоит наш продукт, как упрощает обучение пользователям и как экономит время тем же админам. После этого вопрос «за что платим» обычно исчезает.

Расскажи про один-два интересных кейса, где Ремейк дал крутой измеримый результат. Есть такие?

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

Первый — Александр Фирсов, школа BlablaInvest, где мы сделали оформление в стиле «Алиса в стране чудес». Это был не просто стандартный Remake, дизайн-стиль был кастомизирован и докручен так, чтобы получилось в духе падения в кроличью нору. Я даже пересмотрел мультфильм и фильм, погрузился в них, сидел и рисовал каракули — было кайфово.

В итоге кейс получился не просто редким и крутым с точки зрения дизайна, но и ярким относительно результата: лист ожидания в предзапись на курс вырос в 2 раза относительно предыдущего запуска. Людям стало банально интересно заглянуть внутрь — что же мы там такого «наворотили». Здесь, конечно, и заслуга клиента: он грамотно подогревал интерес, показывал в соцсетях фрагменты, процесс оформления. До сих пор считаю этот кейс одним из самых прикольных. На его основе я, кстати, писал статью в блоге GetTechFamily.

Второй кейс — «Premier Academy» Сергея Харькова. Запрос был «Сделать дорого-богато», чтобы оформление соответствовало ценнику — продукт стоил 250.000₽. Представьте, что вы платите четверть миллиона и проваливаетесь в стандартный GetCourse — разочарование гарантировано. Работали командой из пяти человек: один делал прогресс-бары, другой — функциональные блоки, третий — дизайн, я всё это собирал, утверждал, чтобы отдельные части складывались в систему и не ломались. Итог — отличная обратная связь и хорошие продажи: клиенты попадали в кабинет и говорили «Вау, это реально столько стоит!». На встречах, когда показываю этот проект, реакция всегда одна и та же: «Это что, правда GetCourse? Он может быть таким?». И многие стали приходить с фразой: «Можно как у Сергея? Мне надо как у Сергея».

Повторюсь, посчитать влияние нового дизайна на продажи сложно, и зависит еще и от изначального запроса клиента. Часто, когда я спрашиваю «Зачем вам редизайн?», 80% заказчиков отвечают: «Меня бесит текущий вид Геткурса». И получается, я решаю задачу «чтобы владельца не бесил внешний вид платформы». Но измерить «бесит/не бесит» трудно. Если считать влияние, то надо копать в сторону недовольства пользователей, доходимости, сложной навигации, заботы о студентах, мотивации и так далее. Заказчики этого не делают. Поэтому в оценке результата своих кейсов я могу ориентироваться пока только на две метрики, которые у меня есть: 1) хорошие продажи дорогого продукта; 2) рост интереса к платформе и дизайну — x2 в листе ожидания на курс.

Оба кейса сделаны на базе Ремейка?

Да, это на базе Remake. Мы ставим его как фундамент и накидываем поверх дополнительные вещи.

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

Был такой проект, «Бизнес и налоги» — школа по налогам, входит в топ-1% на GetCourse. Это, наверное, получился самый сложный для меня кейс. Причем сложность была не техническая, а управленческая: много людей, много частей, которые приходилось согласовывать и стыковать между собой. Кроме того, на платформе было много уже установленного собственного оформления, которое местами нужно было сохранить. Часть — в одних цветах, часть — в других; где-то — оставить прежний стиль, где-то — навесить что-то сверху. Плюс виджеты, куча изменений. Нужно было так всё собрать в единую систему, чтобы шла чёткая обратная связь, дедлайны соблюдались, дизайн согласовывался, всё проверялось, не слетало и не ломалось.

Апогеем стала ситуация, когда за 20 минут до вебинара «отвалился» кусок кода, который оформлял примерно сотню страниц. Пришлось срочно созваниваться с разработчиками, Димой и Антоном, и втроём решать проблему, чтобы успеть к эфиру.

Это было трудно именно с точки большого командного менеджмента.

Всё успели, всё было сделано в срок. Но, пожалуй, это пока мой самый нервный кейс.

С какими запросами чаще всего приходят клиенты на оформление? Один ты уже подсветил: бесит стандартный шаблон. Что еще?

Главная причина, по которой приходят за установкой Ремейка, — привести в соответствие интерфейс и визуал GetCourse бренду проекта и цене продукта. Текущий вид платформы не соответствует ни уровню бренда, ни ценам. Формулировка «меня бесит» — неконструктивна, но за ней обычно стоит разрыв восприятия: суперский сайт, сильный лендинг, вылизанные соцсети и резкий провал при переходе в кабинет на Геткурсе. Клиент хочет современный дизайн, чтобы он не «ломался», чтобы человек понимал: деньги отданы не зря.

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

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

Как можно заказать установку Remake? Как сейчас устроен процесс его внедрения, сколько времени занимает, как происходит по шагам?

Заказать очень просто: переходите на сайт, оставляете заявку.

Или еще проще — связываетесь со мной.

Первый наш контакт — созвон. На нем я сам показываю, как всё работает, отвечаю на вопросы. Всегда делаю это лично: лучше всех знаю продукт и могу быстро объяснить нюансы.

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

После оплаты создаём общий чат в Telegram, знакомим с командой и запрашиваем материалы для макета: цвета, шрифты, логотип, брендбук. В случае, когда у проекта нет брендбука, можем подтянуть текущую айдентику с сайта или соцсетей, если клиенту это подходит. Если говорит «выберите сами», подбираем уместные цвета под тематику, а шрифты оставляем стандартные из Ремейка: они универсальные и отлично читаются.

В первый день делаем дизайн-макет: дублируем базовый и меняем в нём визуал под проект клиента. Показываем его: либо утверждают, либо просят внести правки (часто это нюансы по цветам) — правим сразу, утверждаем.

Второй день — установка: часть ставится автоматизированно, часть вручную.

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

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

Весь процесс занимает 3 дня.

А если на платформе уже есть какое-то своё оформление?

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

Если же в аккаунте школы есть код, который конфликтует с нашим, мы его временно отключаем или просим клиента удалить эти фрагменты.

Был случай: в проекте по психологии на 18.000 страниц стоял встроенный кастомный код, на каждой странице. Им техспец так сделал оформление. Мы заблокировали поле стилизации, чтобы этот код везде отключился, хотя рекомендовали его удалить. Позже они пожаловались на жуткие тормоза в работе платформы, что неудивительно при таком объёме лишнего кода. Я предложил сделать систему, которая пройдётся по школе и удалит его автоматически, но они решили чистить вручную. Что ж, их право. Тут только посочувствовать.