Skip to content
UAEN
All work

08 /2026

Real project

My English Book — English lessons from a single link

An app for an English teacher: she builds a lesson from ready-made blocks and sends the class one link, and the children read along with a narrator, do the exercises and hand in their work without signing up.

  • Product Design
  • UX/UI
  • Design System
  • Frontend

A real project: a teacher uses the app with her students. Screenshots were taken in demo mode on made-up data, without real children or their work.

Client
An English teacher
Role
Product Designer · design and development
Year
2026
The student's lesson: title, due date and picking your name from the class list
My English Book — English lessons from a single linkWork · 08 / 09
Open the live site
lesson block types
18lesson block types
lesson link for the whole class
1lesson link for the whole class
sign-ups for a child
0sign-ups for a child
school grades it is made for
1–7school grades it is made for

01 /09

Homework that checks itself

An English teacher works with several classes in primary and lower-secondary school. She used to build homework in Notion: a text, audio and exercises in one document, with a link sent to the children.

Notion does not check answers, does not show who has done the work and does not highlight the text along with the audio. Every next lesson started from scratch. My English Book solves exactly those four problems.

Category
EdTech · School · Lesson builder
Product
Lesson editor, the student's lesson, submissions and class summary
Status
Live, my-english-book.vercel.app
My role
Product, UX/UI, design system, development

02 /09

Two audiences with different limits

The teacher has ordinary computer skills. The first version had service syntax in its forms (`word | translation`, `{{gap}}`), and it proved too hard. It had to go completely.

The students are children in grades 1–7. Some still read poorly, many open the lesson on a phone, and children cannot and need not be registered.

  • 01

    Teacher

    wants to build a lesson in an evening, send one link and get the work back already checked.

  • 02

    Student

    opens the link, signs with a name and works through the lesson top to bottom, with no sign-in or password.

  • 03

    Parents

    want to know what is set and by when, without installing anything.

03 /09

Who does what

  1. 01

    Teacher

    The only person with an account.

    • Creates classes and lessons
    • Turns on access by link and a due date
    • Reviews work and listens to voice recordings
    • Sees the class summary and the tasks with the most mistakes
  2. 02

    Student

    No account, just a name.

    • Opens the lesson by link
    • Listens to the narrator and reads aloud
    • Does self-checking exercises
    • Hands in the work and sees what to review

04 /09

Three decisions that shaped the product

The core teaching idea is that the child reads along with a narrator: hears model pronunciation, sees the current sentence highlighted and repeats it aloud. Everything else is built around that.

  1. 01

    01. No service syntax

    Instead of `word | translation`, two columns of fields. Instead of `{{gap}}`, click a word in the sentence and it becomes a gap. The teacher sees the lesson the way the child will.

  2. 02

    02. No game decoration

    The teacher asked that nothing distract from the language: no points, stars, timers or victory animations. Feedback is a coloured border (green, amber, red) and a short summary.

  3. 03

    03. An honest check instead of a promise

    For a while each sentence had a speech-recognition button. I removed it: it needed Chrome, a microphone and a connection to Google, heard children's voices worse than adults' and said nothing about pronunciation. Voice recording stayed, and the teacher listens to it.

05 /09

How a lesson goes

  1. FLOW 01

    The teacher prepares

    1. Picks a class
    2. Creates a lesson from scratch, a copy or a sample
    3. Adds blocks and reorders them
    4. Turns on access by link and copies it
  2. FLOW 02

    The student works

    1. Opens the link
    2. Picks themselves from the class list
    3. Listens, reads aloud, does the exercises
    4. Hands in the work and sees what to review
  3. FLOW 03

    The teacher reviews

    1. Submissions with filters and CSV export
    2. Class summary: who handed in and the average score
    3. The tasks with the most mistakes
    4. Voice recordings right in the list

06 /09

A lesson made of blocks

A lesson is a sequence of blocks. In the editor each block is collapsed to its number, type and first line, so the whole structure is visible, and a block opens on click.

  • Presenting material

    • Heading
    • Text / instruction
    • Image

  • Listening and pronunciation

    • Read along with the narrator
    • Phonics grid
    • Vocabulary
    • Speaking

  • Self-checking exercises

    • Fill in the gaps
    • Multiple choice
    • True / false
    • Dictation
    • Match pairs
    • Table
    • Pictures
    • Sort into groups
    • Choose the word in the sentence
    • Build the sentence

  • Checked by the teacher

    • Written answer

07 /09

Fieldnotes, a calm learning system

For the app I built the Fieldnotes design system: a warm light background, a deep green for actions, a warm accent for categories.

  • The mark is two strokes: the spine of an open book and a lowercase «b» from Book. It stays itself in a 28 px header and on a phone icon.
  • Illustrations speak the mark's language: two or three lines, no characters or faces. They appear in empty states and on the «work sent» screen, but not inside a lesson.
  • A status always has text: «Published», «Draft», «Saved». A green dot alone says nothing.
  • Reading along with the narrator is the key screen: large sentences, an obvious highlight, speed 0.7× / 0.85× / 1× and the translation within reach.
  • Everything works on a narrow screen: some children do their lessons on a phone.

08 /09

Screens

The app's demo mode, made-up data. The interface is in Ukrainian.

A phonics grid for the [ɪ] sound and a read-along block with speed and translation
Phonics grid and reading along with the narrator
Reading along on a phone
The same lesson on a phone
The teacher's area: lessons, classes, student links
The teacher's area
The lesson editor: title, description, level and access by link
The lesson editor

09 /09

What is next

The teacher now builds lessons in the app instead of Notion, and the students' work arrives already checked.

Still missing: pronunciation scoring, email or push reminders and a shared lesson library between teachers. The app already writes the reminder text for the parents' chat; the teacher sends it.

Next case · 09 / 09

Oblik — a unit's equipment from a phone

Open case

Tell me briefly about the product and the timeline — I'll reply within a day.

Discuss a project