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

Контекст
Тетрика: онлайн-школа с собственной платформой для занятий, чистый B2C. Платформу школа делала сама: личные кабинеты ученика и преподавателя, расписание, домашние задания, библиотека, оплата
Я пришёл тимлидом отдела дизайна. За год компания выросла на 900%, а команда дизайна с 2 до 8 человек. Работал в связке с CEO и CTO
Проблема
Компания росла на 900% за год, а дизайн-команда начинала с двух человек. Масштабировать нужно было сразу три вещи
- Платформу: кабинеты ученика и преподавателя на любых экранах
- Маркетинг: десятки посадочных страниц и визуальных материалов
- Саму команду: найм и рост людей без потери качества
Подход
Сначала стратегия и процесс, потом экраны. С CEO и CTO я выстраивал дизайн-стратегию, роадмап, найм и процесс от дизайна до разработки. Задачи приоритизировали по данным
- Исследования и CJM: путь клиента от первого касания до занятий, с картой e-mail-коммуникации
- A/B-тесты
- Дизайн-система: кит, наработки для кодовой базы, гайды
Исследование
Интервью
Начали с разговоров с теми, кто сидит в платформе каждый день: с преподавателями и учениками. Ответы разложили на отдельные доски по двум ролям. Из интервью с преподавателями
- Отправленное домашнее задание потом нельзя посмотреть, приходится просить ученика прислать ссылку
- Материалы для вводных уроков нужны по уровням, классам и целям, а для взрослых отдельно
- Подбирать материалы внутри платформы удобно, но хочется маленькими блоками по темам, а не целым уроком
И из интервью с родителем ученика
- Домашку присылают фото в чат, и это никого не напрягает: менять ничего не нужно
- Прогресс ученика в личном кабинете и рейтинги родителю не нужны: это лишняя нагрузка
- Хочется сохранять доску урока, чтобы потом перепроверить записи
- Отмена урока с выбором причины или «свяжитесь со мной» устраивает
Карта пути клиента
Customer Journey Map в Miro для двух персон: родитель школьника и сам ученик. Путь разбит на 9 стадий. На каждой стадии карта описывает действия клиента, точки контакта и нотификации, клиентский опыт, решения и точки роста, обратную связь и скриншоты экранов
- Игнорирование
- Поиск и выбор школы
- Первое посещение
- Вводный урок
- Покупка
- Начало использования продукта
- Взаимодействие с продуктом
- Ретеншн
- Уход пользователя и обратная связь
Карта показала, где школа теряет клиента: от записи на вводный урок до покупки и первых занятий. Туда и пошли приоритетные задачи платформы и маркетинга
Гипотезы роста
В строке «Решения, точки роста» каждая идея записана как гипотеза в формате «если мы сделаем это, получим то». Под ней лежат вопросы для проверки в интервью. Вот часть этих гипотез
- Привлечение
Если мы сделаем реферальную программу для учеников и для преподавателей, получим больше клиентов, а ещё замотивированных преподавателей и меньше расходов на рекрутинг
- Привлечение
Если попадём в первую десятку выдачи поиска и контекста, у нас будет много бесплатного трафика
- Привлечение
Если будем настраивать таргет только на родителей, трафик станет качественнее
- Выбор школы
Если в рейтингах будет актуальная информация о школе и промокод, мы лучше выглядим в глазах клиентов и поднимем конверсию
- Выбор школы
Если будем просить лояльных клиентов оставлять отзывы на конкретных платформах и разделим отзывы преподавателей и учеников, рейтинг вырастет
- Вводный урок
Если сразу давать выбор даты и времени при записи на вводный урок, вырастет конверсия в запись
К карте подключены и короткие опросы прямо в продукте: «Как вы о нас узнали?», оценка сайта смайликом или звёздочками, удобство формы регистрации. На негативный ответ открывается поле для комментария, на положительный предлагаем поделиться в соцсетях
Система
Платформа
Сначала нарисовал карту продукта: из каких частей он состоит
- Логгер
- Новый ЛК
- Мобильный ЛК
- Лента контента
- Разделение пакетов по предметам
- Подписочная модель
- Корзина
- Корпоративный сайт
- Конструктор программы
Личные кабинеты ученика и преподавателя спроектированы как единая система экранов, а не набор страниц. Экраны делала команда под моим руководством. В Figma у каждого экрана есть версии под 1920, 768 и 320 px и отдельные состояния. Кабинет ученика: цели, расписание, домашние задания, библиотека, оплата, реферальный блок «Пригласи друга»
Дизайн-система
Я делал и вёл дизайн-систему: UI-кит компонентов личного кабинета в Figma, наработки для кодовой базы и гайды. Ей пользовались все команды
Бренд
Ребрендинг и брендбук делали подрядчики. Я принимал работу со стороны заказчика и общался с подрядчиками
Структура посадочных
Для главного лендинга и предметных страниц собрал карту связей между направлениями и страницами предметов. Мини-группы в первой версии на сайт не выносили
Маркетинг в одной системе
Около 40 посадочных страниц в год и больше 100 визуальных работ и видео, в том числе шаблоны для соцсетей. Всё это делала команда под моим руководством
Эксперимент
Одна из форм заявки спрашивала сначала e-mail, потом телефон. Я поменял поля местами и проверил A/B-тестом. Заявок стало больше на 35%

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