Очередь
«Пора повторить» важнее красивой полки курсов — материал зовёт в нужный момент.
Сессия 01 · Задача
Не генератор квизов,
а тренажер закрепления знаний
Продукт принимает любой текст, генерирует вопросы и ведёт по адаптивным повторениям. Интерфейсу нужно было сделать этот цикл осязаемым: где мои материалы, что пора повторить, как проходит короткая сессия и виден ли прогресс.
Риск продукта: выглядеть как «ещё один AI-чат с кнопками». Мы собрали рабочий контур учёбы — список, статус повторения, фокус-режим вопроса и честная статистика с ошибками.
Фокус
Экран учёбы почти пустой: вопрос, варианты, клавиатура. Ничто не спорит с ответом.
Обратная связь
Дашборд показывает точность и ошибки мягким coral — без тревожного красного «провала».
Архитектура продукта
Три станции одной сессии
Навигация приложения — не дерево разделов, а маршрут повторения: понять состояние → выбрать материал → ответить.
- I Главная Прогресс, точность, «Учить все»
- II Материалы Библиотека и статусы повторения
- III Учёба Вопрос → ответ → следующий шаг
Визуальная система
Спокойная среда
для регулярной учёбы
Белые карточки, тонкие иконки, один зелёный жест CTA и мягкий coral для ошибок создают ясную рабочую среду. Интерфейс остаётся лёгким даже на экранах со статистикой и длинными списками.
#2a6b45PrimaryCTA · верные ответы
#3d8c5cLeafактивная навигация
#e8a0a0Coralошибки на графиках
#1a211dInkвопросы · цифры
#f6f8f7Paperфон рабочей зоны
- Мантра в интерфейсе — «учись, повторяй, помни» сопровождает пользователя в шапке и футере.
- Один primary-жест на экране: «Учить все» / «Добавить материал».
- Ошибки без стыда — coral вместо алого; ошибки часть тренировки, не авария.
- Маскот дозирован — появляется у библиотеки материалов, не на каждом квизе.
Станция I · Главная
Сначала состояние,
потом действие
Дашборд отвечает на вопрос «как я учусь?» до того, как зовёт в сессию. Периоды, donut точности, KPI и активность по дням — одна карта прогресса.
- 1 Мягкий оффер сессии: «короткая сессия поможет закрепить»
- 2 Primary CTA «Учить все» — один вход в очередь повторений
- 3 Donut 74% точности: прогресс читается за секунду
- 4 Coral на ошибках — видно, но не пугает
- 5 Активность по дням держит привычку без геймификации
Станция II · Материалы
Библиотека, которая зовёт повторить
Карточки материалов — не «прочитано», а рабочий статус: сколько вопросов и пора ли возвращаться. Вкладки «Все / По темам / Объяснения» держат порядок без лишних экранов.
- Лимит 19 / 20 рядом с CTA — прозрачные правила freemium без модалок
- Теги тем помогают сканировать длинный список
- Хамелеон на стопке книг — характер бренда в рабочей зоне
Станция III · Учёба
Тишина вокруг вопроса
Режим учёбы сознательно «пустой»: контекст материала мелкой строкой, крупный вопрос, варианты карточками, подсказка клавиатуры. Никаких боковых панелей и конкурирующих CTA.
UX
Первый проход
Метка «первый проход» объясняет, зачем вопрос появился сейчас — без отдельной инструкции.
Копирайт
Варианты как мысль
Формулировки ответа — законченные фразы, не обрывки. Легче проверять понимание, а не угадывание.
Ритм
Короткие сессии
Один вопрос на экран. Прогресс ощущается шагами, а не бесконечной лентой карточек.
Адаптив
Тот же контур в кармане
На мобиле станции складываются в нижнюю навигацию из пяти пунктов. Дашборд, библиотека и квиз сохраняют иерархию — меняется только плотность.
Стратегия релиза
Не ждать публикации в магазинах
Для Android выбрали прямую установку APK, для iOS — web-app/PWA в Safari. Так продукт вышел сразу на двух мобильных платформах без отдельного store-релиза, сохранил единый интерфейс и получил быстрый цикл обновлений.
- Frontend
- Vue 3 · TypeScript · Vite
- Состояние
- Pinia · компонентный UI
- Android
- Capacitor · прямая установка APK
- iOS
- Web-app / PWA в Safari
- Backend
- NestJS · REST API
- Данные
- PostgreSQL · Redis
- Каналы
- Web · Android · Telegram
- Обучение
- AI-генерация · spaced repetition
Продуктовые решения
Что сознательно не делали
Сила интерфейса — в чистоте. Ниже то, что вычеркнули, чтобы сессия оставалась короткой и понятной.
Чат как главный экран
Обычный чат решает задачу здесь и сейчас, но не возвращает к пройденному. Cognimora выстраивает очередь повторений и показывает вопрос в нужный момент.
Ручной конструктор карточек
Приложение само создаёт вопросы из загруженного текста. Пользователь сосредоточен на обучении, а не на ручной подготовке карточек.
Честные ошибки
Ошибки показаны спокойно и без давления. Они помогают системе определить слабые места и скорректировать следующие повторения.
Один продукт — несколько входов
Веб-приложение, Android APK и Telegram дают доступ к одному сценарию учёбы: материалы, вопросы и прогресс остаются привычными на любом устройстве.
Другой кейс Cognimora
Сайт продукта
Отдельный разбор продуктового лендинга Cognimora.
Результат
Приложение со своим ритмом повторения
Цельный продуктовый контур: главная показывает состояние, материалы зовут в нужный момент, а режим учёбы оставляет тишину для ответа. Зелёная палитра, спокойная обратная связь и единая навигация связывают все точки входа.
Приложение: app.cognimora.com Сайт продукта: cognimora.com
Нужен продуктовый интерфейс, который ведёт пользователя по сложному сценарию?
Обсудить проект