08 /2026
Реальний проєктMy English Book — уроки англійської з одного посилання
Застосунок для вчительки англійської: вона збирає урок із готових блоків і надсилає класу одне посилання, а діти читають під диктора, виконують вправи й здають роботу без реєстрації.
- Product Design
- UX/UI
- Design System
- Frontend
Реальний проєкт: застосунком користується вчителька з учнями. Скриншоти зроблено в демо-режимі на вигаданих даних, без справжніх дітей і робіт.
- типів блоків уроку
- 18типів блоків уроку
- посилання на урок для всього класу
- 1посилання на урок для всього класу
- реєстрацій для дитини
- 0реєстрацій для дитини
- класи, для яких зроблено
- 1–7класи, для яких зроблено
01 /09
Домашнє завдання, яке перевіряється само
Вчителька англійської веде кілька класів у молодшій і середній школі. Домашні завдання вона збирала в Notion: текст, аудіо й вправи в одному документі, а дітям надсилала посилання.
Notion не перевіряє відповіді, не показує, хто зробив роботу, і не підсвічує текст під аудіо. Кожен наступний урок доводилося збирати з нуля. My English Book закриває саме ці чотири проблеми.
- Категорія
- EdTech · Школа · Конструктор уроків
- Продукт
- Редактор уроків, урок для учня, роботи й підсумки класу
- Статус
- Працює, my-english-book.vercel.app
- Моя роль
- Продукт, UX/UI, дизайн-система, розробка
02 /09
Дві аудиторії з різними обмеженнями
Вчителька користується компʼютером на звичайному рівні. Перша версія мала службовий синтаксис у формах (`слово | переклад`, `{{пропуск}}`), і це виявилось занадто складно. Його довелося прибрати повністю.
Учні — діти 1–7 класів. Частина ще погано читає, багато хто відкриває урок із телефона, а реєструвати дітей не можна і не потрібно.
- 01
Вчителька
хоче зібрати урок за вечір, надіслати одне посилання й отримати вже перевірені роботи.
- 02
Учень
відкриває посилання, підписується імʼям і проходить урок згори донизу, без входу й паролів.
- 03
Батьки
хочуть знати, що задано й до якого числа, не встановлюючи нічого.
03 /09
Хто що робить
- 01
Вчителька
Єдина людина з акаунтом.
- Створює класи й уроки
- Вмикає доступ за посиланням і термін
- Переглядає роботи, слухає записи голосу
- Бачить підсумок класу й завдання з найбільшою кількістю помилок
- 02
Учень
Без акаунта, лише імʼя.
- Відкриває урок за посиланням
- Слухає диктора й читає вголос
- Виконує вправи з перевіркою
- Здає роботу й бачить, що варто повторити
04 /09
Три рішення, які задали продукт
Головна педагогічна ідея — дитина читає разом із диктором: чує правильну вимову, бачить підсвічене речення й повторює вголос. Усе інше будується навколо цього.
- 01
01. Жодного службового синтаксису
Замість `слово | переклад` — два стовпчики полів. Замість `{{пропуск}}` — натиснути на слово в реченні, і воно стає пропуском. Вчителька бачить урок таким, яким його побачить дитина.
- 02
02. Без ігрових прикрас
Вчителька попросила, щоб ніщо не відволікало від мови: жодних балів, зірочок, таймерів і анімацій перемоги. Зворотний звʼязок — колір рамки (зелений, бурштиновий, червоний) і короткий підсумок.
- 03
03. Чесна перевірка замість обіцянки
Якийсь час біля речення стояла кнопка розпізнавання мовлення. Я її прибрав: вона потребувала Chrome, мікрофона й звʼязку з Google, гірше чула дитячий голос і не казала нічого про вимову. Запис голосу лишився — його слухає вчителька.
05 /09
Як проходить урок
- FLOW 01
Вчителька готує
- Обирає клас
- Створює урок з нуля, з копії або зі зразка
- Додає блоки й міняє їх порядок
- Вмикає доступ за посиланням і копіює його
- FLOW 02
Учень виконує
- Відкриває посилання
- Обирає себе зі списку класу
- Слухає, читає вголос, виконує вправи
- Здає роботу й бачить, що повторити
- FLOW 03
Вчителька перевіряє
- Роботи з фільтрами й експортом у CSV
- Підсумок класу: хто здав і середній бал
- Завдання з найбільшою кількістю помилок
- Записи голосу просто в списку робіт
06 /09
Урок із блоків
Урок — це послідовність блоків. У редакторі кожен блок згорнутий до номера, типу й першого рядка, тож структуру уроку видно цілком, а блок розкривається натисканням.
Подача матеріалу
- Заголовок
- Текст / інструкція
- Картинка
Слухання й вимова
- Читання під диктора
- Фонетична сітка
- Словник
- Говоріння
Вправи з перевіркою
- Пропуски
- Вибір варіанта
- Правда / неправда
- Диктант
- Зʼєднати пари
- Таблиця
- Картинки
- Розкласти по групах
- Вибір слова в реченні
- Скласти речення
Перевіряє вчителька
- Письмова відповідь
07 /09
Fieldnotes — спокійна навчальна система
Для застосунку я зібрав дизайн-систему Fieldnotes: теплий світлий фон, глибокий зелений для дій, теплий акцент для категорій.
- Знак — дві лінії: корінець розгорнутої книги й мала «b» з Book. Він лишається впізнаваним і в шапці на 28 px, і на іконці телефона.
- Ілюстрації тією самою мовою, що й знак: дві-три лінії, без персонажів і облич. Вони є в порожніх станах і на екрані «роботу надіслано», але не всередині уроку.
- Статус завжди має текст: «Опубліковано», «Чернетка», «Збережено». Зелена крапка сама по собі нічого не повідомляє.
- Читання під диктора — найважливіший екран: великі речення, помітне підсвічування, швидкість 0.7× / 0.85× / 1× і переклад під рукою.
- Усе працює на вузькому екрані: частина дітей робить уроки з телефона.
08 /09
Екрани
Демо-режим застосунку, вигадані дані.
![Фонетична сітка зі звуком [ɪ] і блок читання під диктора зі швидкістю й перекладом](/_next/image?url=%2Fcases%2Fmy-english-book%2Freading.webp&w=1920&q=75)
09 /09
Що далі
Зараз вчителька збирає уроки в застосунку замість Notion, а роботи учнів приходять уже перевіреними.
Чого ще немає: оцінки вимови, нагадувань поштою чи пушем і спільної бібліотеки уроків між учителями. Текст нагадування для чату батьків застосунок уже складає сам, а надсилає його вчителька.
Наступний кейс · 09 / 09
Облік — майно підрозділу з телефона
Розкажіть коротко про продукт і терміни — відповім протягом доби.