Перейти к содержимому

Lingua Teacher. Когда слово становится ходом

Карточка кейса Lingua Teacher
  • EdTech
  • Telegram Mini App
  • UX/UI-дизайн
  • Фирменный стиль

Lingua Teacher — концепт языкового тренажёра в формате Telegram Mini App. За 2–3 недели мы разработали фирменный стиль, иконку и интерфейс, в котором языковая практика ощущается не как очередной урок, а как короткая игровая сессия.

Один интерфейс — для очень разных людей

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

Дополнительное ограничение — сроки. За 2–3 недели нужно было пройти путь от чистого листа до цельной визуальной системы и основных пользовательских сценариев.

Фирменный стиль и иконка Lingua Teacher

Цель

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

Задача

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

Не урок. Следующий ход.

Настроиться

Знакомство с Lingua Teacher начинается не с длинной анкеты, а с нескольких коротких решений. Пользователь выбирает вариант шрифта, отвечает на вопрос о разговорном барьере и отмечает знакомые слова.

Мы распределили сценарий по отдельным экранам: один вопрос, несколько крупных вариантов ответа и понятный следующий шаг. В настройках также предусмотрели переключение между стандартным шрифтом и OpenDyslexic — как дополнительную опцию для чтения.

Онбординг: выбор варианта шрифта
Онбординг: вопрос о разговорном барьере
Онбординг: отметка знакомых слов

Сделать ход

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

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

Уровень, таймер и текущий прогресс всегда остаются перед глазами, но не перетягивают внимание с самого задания.

Закрыть уровень

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

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

Поле из гексагональных карточек тренажёра
Состояния ответа: выбор, успех и ошибка
Ежедневные задания и прогресс уровня

Фирменный стиль работает вместе с механикой

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

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

Нужен сервис со сложной логикой?

Расскажите о задаче. Спроектируем пользовательские сценарии, соберём интерфейс и разработаем продукт, которым удобно пользоваться и управлять.

Результат

За 2–3 недели мы подготовили дизайн-концепцию Telegram Mini App: фирменный стиль, иконку, онбординг, основные экраны тренажёра и UI-систему с игровыми состояниями.

Проект не перешёл к публичному запуску, поэтому продуктовых показателей и пользовательских метрик у кейса нет.

Экраны Lingua Teacher и фирменная графика

Что важно знать о проекте

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

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

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

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

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