serbinov.com RUEN
frame/caseТетрика
← Работа

Платформа и команда дизайна для школы, которая росла в десять раз за год

КомпанияТетрика, проект VK
Годы2020–21
РольТимлид отдела дизайна
ПродуктПлатформа онлайн-обучения, B2C
Тетрика, онлайн-школа
2 → 8дизайнеров в команде за год
~40посадочных страниц в год
+35%заявок после смены порядка полей в форме

Контекст

Тетрика: онлайн-школа с собственной платформой для занятий, чистый B2C. Платформу школа делала сама: личные кабинеты ученика и преподавателя, расписание, домашние задания, библиотека, оплата

Я пришёл тимлидом отдела дизайна. За год компания выросла на 900%, а команда дизайна с 2 до 8 человек. Работал в связке с CEO и CTO

Проблема

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

  • Платформу: кабинеты ученика и преподавателя на любых экранах
  • Маркетинг: десятки посадочных страниц и визуальных материалов
  • Саму команду: найм и рост людей без потери качества

Подход

Сначала стратегия и процесс, потом экраны. С CEO и CTO я выстраивал дизайн-стратегию, роадмап, найм и процесс от дизайна до разработки. Задачи приоритизировали по данным

  • Исследования и CJM: путь клиента от первого касания до занятий, с картой e-mail-коммуникации
  • A/B-тесты
  • Дизайн-система: кит, наработки для кодовой базы, гайды
Команда дизайна: 2 в начале, 8 через год

Исследование

Интервью

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

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

И из интервью с родителем ученика

  • Домашку присылают фото в чат, и это никого не напрягает: менять ничего не нужно
  • Прогресс ученика в личном кабинете и рейтинги родителю не нужны: это лишняя нагрузка
  • Хочется сохранять доску урока, чтобы потом перепроверить записи
  • Отмена урока с выбором причины или «свяжитесь со мной» устраивает

Карта пути клиента

Customer Journey Map в Miro для двух персон: родитель школьника и сам ученик. Путь разбит на 9 стадий. На каждой стадии карта описывает действия клиента, точки контакта и нотификации, клиентский опыт, решения и точки роста, обратную связь и скриншоты экранов

  1. Игнорирование
  2. Поиск и выбор школы
  3. Первое посещение
  4. Вводный урок
  5. Покупка
  6. Начало использования продукта
  7. Взаимодействие с продуктом
  8. Ретеншн
  9. Уход пользователя и обратная связь

Карта показала, где школа теряет клиента: от записи на вводный урок до покупки и первых занятий. Туда и пошли приоритетные задачи платформы и маркетинга

Гипотезы роста

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

  1. Привлечение

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

  2. Привлечение

    Если попадём в первую десятку выдачи поиска и контекста, у нас будет много бесплатного трафика

  3. Привлечение

    Если будем настраивать таргет только на родителей, трафик станет качественнее

  4. Выбор школы

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

  5. Выбор школы

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

  6. Вводный урок

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

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

Система

Платформа

Сначала нарисовал карту продукта: из каких частей он состоит

Продукт
Платформа
  1. Логгер
  2. Новый ЛК
  3. Мобильный ЛК
  4. Лента контента
Оплата
  1. Разделение пакетов по предметам
  2. Подписочная модель
  3. Корзина
Сайт и программа
  1. Корпоративный сайт
  2. Конструктор программы

Личные кабинеты ученика и преподавателя спроектированы как единая система экранов, а не набор страниц. Экраны делала команда под моим руководством. В Figma у каждого экрана есть версии под 1920, 768 и 320 px и отдельные состояния. Кабинет ученика: цели, расписание, домашние задания, библиотека, оплата, реферальный блок «Пригласи друга»

Ширины1920, 768 и 320 px для каждого экрана
Ролиученик и преподаватель
Разделы ученикаобучение, расписание, домашние задания, библиотека, оплата
ФайлFigma, отдельные страницы под рабочие версии, адаптив и готовое к разработке

Дизайн-система

Я делал и вёл дизайн-систему: UI-кит компонентов личного кабинета в Figma, наработки для кодовой базы и гайды. Ей пользовались все команды

Бренд

Ребрендинг и брендбук делали подрядчики. Я принимал работу со стороны заказчика и общался с подрядчиками

Структура посадочных

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

Главный лендингЕГЭ, ОГЭ, средняя школа, начальная и дошкольная, иностранные языки, вебинары, курсы, занятия с преподавателем
Предметныерусский, английский, математика, физика, химия, биология, обществознание, литература, история, информатика

Маркетинг в одной системе

Около 40 посадочных страниц в год и больше 100 визуальных работ и видео, в том числе шаблоны для соцсетей. Всё это делала команда под моим руководством

Эксперимент

Одна из форм заявки спрашивала сначала e-mail, потом телефон. Я поменял поля местами и проверил A/B-тестом. Заявок стало больше на 35%

Было
E-mail
Телефон
Начать заниматься
Стало · +35%
Телефон
E-mail
Начать заниматься
Форма заявки на tetrika-school.ru: имя, телефон, e-mail, кнопка «Оставить заявку»
Форма сейчас на tetrika-school.ru: телефон перед e-mail

Это один из многих A/B-тестов, которые я могу показать: результаты до сих пор живут на проде

Результат

  • Своя платформа онлайн-обучения для учеников и преподавателей
  • Новый брендбук и дизайн-система, которой пользовались все команды
  • Команда дизайна выросла с 2 до 8 человек, пока компания росла на 900%
  • Почти все джуны за год выросли до мидлов, а затем получили повышения в других компаниях