Продуктовый дизайнер · Skyeng · 2021–2024
Skysmart

Skysmart

1

Три роли

Каждая фича проходила тест: работает для ученика, преподавателя и родителя?

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

Преподаватель — анкета и цели ученика до урока. Пуш-напоминания. Рекомендации по контенту на основе системы здоровья.

Родитель — PDF-отчёты о прогрессе за месяц. Данные для решения о продлении подписки.

Одна и та же сущность ведёт себя по-разному. Эл — восемь лет, когда общается с детьми. Двадцать восемь, когда с родителями. Кабинет, прогресс и отчёты — единая система, три точки входа.

Профиль целей ученика в кабинете преподавателя — анкета, уровень, мотивация
Цели ученика в кабинете преподавателя: анкета, уровень, мотивация — всё до начала урока
UX-тест прототипа To-do листа — 23 экрана, три итерации
Прототип To-do: 23 экрана, три итерации с реальными учениками
Бэклог гипотез — приоритизация и трекинг экспериментов
Бэклог гипотез: приоритизация и трекинг экспериментов

2

Личный кабинет ученика

Skysmart — детский продукт Skyeng. Три модели обучения: индивидуальные занятия, групповые сессии, самостоятельные тренажёры. Ученики — от 4 до 18 лет.

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

Спроектировать единый кабинет для всех форматов и предметов. Моя роль: UX-исследования, взаимодействие, визуал. В команде — PM, два разработчика, методист.

7
итераций кабинета
3
формата обучения в одном интерфейсе
4–18
лет, возраст учеников
2
платформы: десктоп + мобайл
Онбординг ученика — знакомство с Элом, первые шаги, навигация по кабинету
Онбординг ученика: знакомство с Элом, первые шаги в кабинете

Результат

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

Единый кабинет запущен для всех учеников Skysmart. Три формата обучения — в одном интерфейсе. Ученик видит задания, расписание и прогресс на одном экране.

v1 — хронологическая навигация v2 — сценарная навигация v3 — категории и домашка v4 — цели и прогресс v5 — карточки уроков v6 — компактная навигация v7 — финальная версия
1/7

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

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

«Раньше я начинал урок вслепую — не знал, зачем ученик учится» — преподаватель английского
0 → 1
система целеполагания с нуля
8
полей анкеты
2
входа в воронку
6
шагов диагностики

Система

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

Карта пути целеполагания — от демо-урока до синхронизации целей с преподавателем
Карта пути: от первого контакта до синхронизации целей между учеником и преподавателем

Первый урок

Отдельный дизайн-проект. Шесть вопросов (цель, подцель, уровень, сроки, позиция, сложности) превращаются в план первого урока. Преподаватель видит ответы до начала занятия и строит урок вокруг целей ученика. Если ученик не заполнил анкету — пуш в Telegram, SMS со ссылкой.

Анализ потребностей из шести шагов и план первого урока
Шесть шагов анализа потребностей формируют план первого урока

Диагностика по предметам

Для детского английского — игровые вопросы с иллюстрациями. Для математики — задачи на определение уровня. Для взрослого английского — самооценка с выбором из 40+ целей и 50+ интересов. Одна система, три разных опыта.

Диагностика для детского английского — игровые вопросы с иллюстрациями
Детский английский: игровые вопросы вместо тестов
Диагностика для математики — задачи на определение уровня
Математика: задачи на определение уровня, адаптированные под возраст
Диагностика для взрослого английского — самооценка, 40+ целей, 50+ интересов
Взрослый английский: самооценка с выбором из 40+ целей и 50+ интересов

Результат

До этой системы данные о целях не собирались — ноль. Преподаватели получили контекст до урока. Цели из заявки стали частью продукта.

Страница прогресса Skysmart — маскот Эл сообщает ученику о достижениях
Страница прогресса: Эл показывает ученику достижения по пяти навыкам
3

Прогресс и геймификация

Прогресс нигде не визуализировался. Ни ученик, ни преподаватель, ни родитель не видели динамику обучения. Единственная метрика — «прошёл 5 из 20 уроков».

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

8
концепций исследовано
5
навыков в системе
3
роли: ученик, препод, родитель
4
конкурента изучены

Восемь концепций

Каждая решала проблему по-своему. Ни одна не подходила всем трём ролям одновременно:

  • Процент выполнения — понятен, но не мотивирует на середине пути
  • Линейный прогресс — скучный при длинных курсах
  • Категории навыков — сложно для детей младше 10
  • Хронология — работает для взрослых, не для детей
  • Карта уровней — слишком игровая для родителей
  • Чеклисты — мотивируют закрывать задачи, но не показывают рост
  • Графики — информативно, но не эмоционально
  • Система здоровья — комплексная оценка. Подошла
«Люблю ставить галочки как в Sims» — из интервью с ученицей, 14 лет

Система здоровья

Финальная модель — комплексная оценка по пяти навыкам: чтение, аудирование, грамматика, говорение, письмо. Каждый навык — процент и динамика. Преподаватель видит ту же картину и получает рекомендации по контенту. Родитель получает PDF-отчёт.

Система здоровья — 7 состояний
Семь состояний здоровья — от «всё отлично» до «нужна помощь по всем навыкам»
Мобильная версия страницы прогресса
Мобильная версия: тот же прогресс по пяти навыкам, адаптированный под телефон
«Наконец-то вижу, чему ребёнок научился за месяц» — родитель ученика

Геймификация

Для детей — квесты с таймерами и наградами. Звёзды копятся на головоломки, раскраски, дипломы, доступ к играм. Исследовал Battle Pass, Spotify Wrapped, коллекционирование. Взял из каждого: ограниченное время (Battle Pass), ретроспективу успехов (Wrapped), визуальный прогресс (коллекции). Отбросил: соревнование между учениками — не подходит для образования. Конкуренты: Duolingo (ударный режим), LinguaLeo (сытость льва), Busuu (очки опыта), Foxford (ачивки). Их паттерны легли в основу собственной системы.

Дашборд с расписанием, тестами и ачивками
Квесты, таймеры и звёзды — геймификация для учеников 4–12 лет

Серии и XP

Параллельно с квестами спроектировал систему серий. Модель — Duolingo: счётчик дней подряд, заморозки, очки опыта. «24 дня подряд. 2 заморозки осталось. Можешь пропустить ещё 2 дня без потери серии». Онбординг — три тултипа: карта курса, флаг прогресса, молния XP. Каждый объясняет одну сущность. Решение: серии мотивируют, но без давления. Пропустил день — не наказание, а мягкое напоминание.

Виджет цели

Проходит через четыре состояния: цель не указана, анкета частично заполнена, цель выбрана, новые активности на карте. Каждое состояние — отдельный дизайн с CTA и обратной связью.

Состояния виджета цели
Виджет цели: четыре состояния с разным CTA и обратной связью
Анатомия карточки — структура, состояния, визуальная иерархия
Анатомия карточки: структура компонента, состояния и визуальная иерархия

Результат

Система здоровья запущена для всех учеников. Преподаватели получили рекомендации по контенту на основе данных. Родители — PDF-отчёты о прогрессе. Три роли видят один продукт, но каждая — свою версию правды.

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

Создать визуальный язык, который дети захотят коллекционировать: маскоты, бейджи, награды, стикеры. Моя роль: концепция, критерии, арт-дирекшн. 3D-моделирование — отдельный специалист.

3
3D-маскота
9
критериев для 3D
6
уровней A1 → C2
7+
метафор прогрессии

Маскоты

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

«Эл — 8 лет, когда с детьми; 28, когда с родителями»
Три 3D-маскота Skysmart
Три маскота: каждый с набором поз для успеха, ошибки, ожидания, поздравления

Личность Эла

Семь состояний рекомендаций, каждое с уникальным тоном:

  • «Нелегко, но не сдавайся!» — слабые результаты, поддержка
  • «Легкотня! Учишься отлично!» — всё хорошо, подкрепление
  • «Возвращайся после первого урока» — новый ученик
  • «Хорошо! Продолжай расти» — стабильный прогресс

Для родителей — другой регистр: «Макс молодец, этот месяц учился очень хорошо». Тот же персонаж, но взрослый тон, формальная лексика, фокус на данных. 200+ кадров покадровой анимации: радость, грусть, ожидание, поздравление. Каждая эмоция — отдельная секвенция.

Секвенции Эла — 8 состояний рекомендаций: от «нелегко» до онбординга» loading=
8 состояний Эла: «очень плохо», «плохо», «нормально», «хорошо», «отлично», «скучно», «нет уроков», онбординг — покадровая анимация

Девять критериев

Сформулировал требования для 3D-объектов, чтобы команда моделистов работала в единой системе:

  • Узнаваемость на маленьком размере
  • Читаемость без подписи
  • Один объект — одна эмоция
  • Совместимость с палитрой
  • Работа на белом и цветном фоне
  • Стилистическое единство с маскотами
  • Отсутствие мелких деталей
  • Печатопригодность
  • Масштабируемость серии

Референс для команды: «Представь, как это выглядело бы в Pixar или Animal Crossing».

Поиск метафоры

Прежде чем рисовать бейджи, исследовал семь направлений прогрессии:

  • Взросление — от младенца до мудреца. Понятно, но слишком буквально
  • Анимированный объект — от жалкого голубя до голубя-генерала. Смешно, но не серьёзно
  • Транспорт — от скутера до ракеты. Работает визуально, не связано с языком
  • Примитивные символы — звёзды, камни, элементы. Универсально, но безлико
  • Абстрактная геральдика — гербы и щиты. Красиво, но напоминает милитаризм
  • Артефактные кубки — трофеи и награды. Соревновательно, не подходит для образования
  • Цветок — от ростка до цветения. Органично, но сложно масштабировать на 6 уровней

Анти-паттерны: без милитаризма (мечи, щиты, погоны), без агрессивных коннотаций. Исследовал британскую символику: медведь, зонт, чайник, двухэтажный автобус. Итог: простые гексагональные бейджи с прогрессией через материал и декор.

Бейджи уровней

Карта курса визуализирует путь через 3D-бейджи. Уровни от A1 до C2. Стартовые — простые оранжевые гексагоны. Средние — с крыльями. Высшие — золотые с короной. Заблокированные — серые, как ориентир и мотивация.

«Хочу собрать все бейджи до золотого» — ученик, 11 лет
3D-бейджи уровней A2 → B2 → C1 → C2
Бейджи уровней: визуальная прогрессия от простых гексагонов до золотых с короной
3D-карта курса — навигация по уровням с бейджами в контексте интерфейса
Карта курса: бейджи уровней в контексте навигации по учебному маршруту
3D-объекты: торт, камера, колба, очки, книга, планета Стикерпак «Алиса в Стране чудес» — награды за квесты

Результат

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