Let’s talk ↗
← Projects
Design + development / CASE STUDY

Just English

A learning platform with lessons, practice and a member area.

My roleDesign + development
TOOLS / PRACTICENext.js · React · TypeScript · Supabase
Case formatProduct · interface · implementation
DESIGN + ENGINEERING

Designed & developed

My contribution covers interface design and application development.

01DESIGN02CODE03PRODUCT
In this project
  • Lessons & practice
  • Vocabulary
  • Student account
Just English
Just English / Design + development

The challenge

Bring lessons, exercises and learner progress into one product.

01 / PRODUCT LOGIC

From first contact to independent expression

Learning follows a short cycle of explanation, application and review. The public page and free lesson let visitors experience it before registration. This case-study map summarizes the working product.

01Course introduction
02Video and questions
03Dialogue and practice
04Words and review
02 / FIRST CONTACT

Try the method before committing

The opening view pairs the course proposition with an actual exercise. The page then explains the method, four modules, two explanation languages and access conditions. A trial lesson provides a clear next step.

Course opening view
Complete public page+
Full public page
03 / LESSON STRUCTURE

Keep the lesson and its plan together

Lesson, practice and vocabulary tabs separate activity types. A supporting plan keeps video, questions and exercises in sequence. Learners can return to the material and try again.

Explanation and lesson plan
04 / SITUATED PRACTICE

Turn grammar into a conversation

The club meeting starts with Ali’s greeting. Learners receive a role, read the situation and choose an English response. The 0 / 12 counter shows the task length, while the character, prompt and choices share one working area.

Opening dialogue — actual practice
05 / ANSWER STATES

An error explains what to change

An incorrect choice highlights the selected row and explains that introducing yourself requires I’m. The dialogue remains visible, so the explanation can be applied immediately on another attempt.

Before checking
Incorrect answer and explanation
06 / INDEPENDENT RESPONSE

Move beyond choices into text or voice

Independent practice asks for a 3–5 sentence introduction using text or voice. Self-assessment criteria and a help-used option accompany the response. The interface explicitly states that accent and free text are not automatically graded.

Response form and self-assessment criteria
07 / VOCABULARY & REVIEW

Recall words in context

The vocabulary view pairs a word with its translation and a phrase from the situation. Examples include audio, with a separate review round. A note explains that vocabulary practice does not block the next lesson.

Words, examples and audio
08 / INTERFACE SYSTEM

Shared rules across learning activities

Shared tabs, navigation and the lesson plan connect activity types. Neutral surfaces support content, a burgundy accent marks actions, and a pale red surface marks corrections. Compare the working interface states below.

Task and feedback+
Default state
Correction state
Vocabulary and independent practice+
Vocabulary rows
Fields and criteria
09 / RESPONSIVE PRODUCT

The same learning journey on a phone

The mobile version preserves language selection and action order. The course view leads with its proposition; practice leads with the prompt and choices. These are fresh captures of the working product.

Mobile course page
Mobile dialogue
VISUAL LANGUAGE

The project’s character

A warm, calm interface: a light foundation gives content room, while the red accent highlights the next step.

TYPOGRAPHY / OnestStart speaking.Aa Бб Әә Ғғ Ққ Ңң Өө Ұұ Үү Һһ Іі
0123456789
#9D1F15
#2B2320
#FBF9F7
#F4E9E3

One typeface, several levels

Onest connects headlines, explanations and exercise controls. Size and weight establish hierarchy.

An interface that supports learning

Soft surfaces group dialogue, tasks and hints. Accent color is reserved for actions and important content.

IMPLEMENTATION TECHNOLOGIES
01Next.js02React03TypeScript04Supabase
DELIVERABLE

The outcome

Designed and built lessons, interactive exercises, a vocabulary tool, student accounts and content management.

Visit website ↗
Next projectFootyTracker ↗
LET’S TALK

Let’s discuss your idea.

Message me on WhatsApp about your project or a job opportunity.

Message on WhatsApp+7 708 903 43 49