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

Вводные данные

Немного вводных, чтобы понять масштаб проекта: больше 1 млн скачиваний, около [[ЧИСЛО]] активных учеников, 5 стран, 6 лет работы.

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

Впереди были полтора года работы, три похороненных концепта и одна авария. Расскажу по порядку.

Так это выглядело шесть лет

Что конкретно было не так, куда мы целились, и как поняли, если бы попали

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

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

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

Начало работы

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

Ценности, фич-листы и вайрфреймы

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

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

Продукт целиком на серых блоках — до единого визуального решения

Поиск образов через архетипы

К моему приходу у команды уже сложилось несколько архетипов бренда под Qalan. Я собрал драфты концепций на их основе.

Концепция Мудреца — Qalan как глобальная технология, способ достичь лучшего будущего. Маркеры: строгость, простота, акценты через градиент.

Концепция Героя — Qalan как наставник и помощник, дружелюбный и открытый. Маркеры: яркие цвета, персонажи, крупная типографика.

Концепция Исследователя — Qalan как способ выхода за рамки, освоения нового. Маркеры: диаграммы навыков, сменяющиеся фото-фоны.

Остановились на Герое

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

Ну и яркий визуал с акцентом на персонажах лучше подходил основной аудитории → четвероклассникам.

Клавиатура: анализ, проектирование и тестирование

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

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

Рефы, черновики и первые раскладки

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

Главный спор шёл о вложенностях. Я хотел минимум — чтобы нужный символ был доступен сразу, — поэтому разделил тренажёр на два типа: для младших классов (1–4) и старших (5–11). Для младших — упрощённая версия без свайпов и вложенностей, просто один экран со всеми символами. Для старших — три состояния: по умолчанию с цифрами, расширенная с доп. символами и буквенная.

Каждая правка — не про красоту, а про то, рабочий инструмент или нет

Арт-директорский козырь. Консультации с Людвигом Быстроновским

Ещё на старте Аза спросил, как я хочу организовать работу над продуктом. Помимо процессов и команды я сразу попросил заложить деньги на консультантов. Первым стал Людвиг.

Мы провели несколько встреч — все колоритные, но сильнее всего запомнились три вещи.

Первая — про макеты.

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

Вторая — про ценность: её надо чётче разделять. Ребёнку — немного подзаработать; учёба — аргумент для родителей. Звучит очевидно, но именно Людвиг подсветил, где мы это смешиваем.

И третья — вопрос, на который нам было нечего ответить: где связь редизайна с бизнес-целями? Что должно улучшиться, как поймёте, что проект успешен? У проекта не было ни бюджета, ни жёстких требований — «значит, бизнес его пока не одобрил». Помните «сделать хорошо» из начала статьи? Вот по нему и прилетело.

Ну и куда же без тестов

Прототип собрал Биба, наш геймдизайнер, — на Godot. APK кидали в телегу, детям выдавали простой андроид-телефон. Менторы подобрали под прототип реальные задачи — так, чтобы ребёнок в тесте обязательно ткнул и в дроби, и в степени, и посвайпал. Короче, все боевые сценарии.

18 апреля поехали к первым десяти четвероклассникам: пять с казахского класса, пять с русского, по 20–30 минут на ученика. Дальше были Өркен, авторская школа Аубакировой и под конец Fiztex — там тестировали уже семиклассников. Успели до конца учебного года.

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

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

20 марта → 14 апреля → тест 18 апреля → финал 19 мая

Несколько поколений концепций: бенто, швейцария, пиксели

На утверждённом тренажёре и концепции Героя мы собрали первое поколение интерфейса. Онбординг, главная, магазин. Утвердили с командой, пожили пару недель, пошли показывать Аскару — CEO и основателю.

Ему не очень понравилось. Аргументы он особо не слушал, сказал только — сделайте ещё круче. Спорить было бесполезно, пошли на ещё одну итерацию.

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

Выкрутил на максимум

Дальше успокоил его до более стандартной пары Cofo Sans и Cofo Sans Pixel.

Но и этот концепт не выжил — казался слишком холодным, не про нас. Я решил добавить дружелюбия и при этом академичности, через новый, как тогда думал, финальный (ахаха) концепт. Пиксельный шрифт обновился на Depicto, но стал декорацией. Основным сделал академичную Герберу.

Тем временем к проекту подключился второй консультант — Женя Арутюнов. Встречу организовал Аза, готовились к ней вместе. Контекст был горячий: на понедельник назначен показ пиксельного концепта Аскару.

Женю не интересовало «красиво или некрасиво» — он зашёл со стороны процесса. Главное, что он сказал: хватит спрашивать Аскара «как тебе?». Он плохо отвечает на вопросы — начнёшь прижимать к стенке, получишь рандом. Вместо этого заявлять: вот что я сделал, вот что собираюсь делать дальше — и точка. И рассказал, как в Додопицце ушли от согласований в прозрачность: разрешения никто не спрашивает — просто держат всех в курсе.

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

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

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

Анимация прогресс-бара «спидометр»

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

И тут случилась авария. Женя потом писал о ней в своём блоге.

Если вкратце: Аскар увидел новый дизайн на тесте — свёрстанный кое-как — и жёстко раскритиковал. Всё не то, делайте заново.

Убедить его снова не вышло. Расстроились, конечно. Но критика касалась в основном стиля главной и пиксельного шрифта — по его мнению, сломанного.

Как мы выбирались из этой ямы, каким вышел финальный образ и при чём тут теория образования — во второй части.