Break the course into approachable steps
Numbered units contain short, topic-based lessons. In the first lesson, learners connect a word with its meaning, then complete a sentence about where they are from.
LEARNING EXPERIENCE / MOBILE WEB
VnEnglish Pro
Small lessons.
A personal learning space.
An English-learning interface that brings short lessons, vocabulary notebooks and progress into a mobile-first experience. Recovered DMS5 source and process material reveal the thinking behind the screens.
- CONTRIBUTION
- Learning concept, UX/UI & front-end
- FORMAT
- Mobile-first learning prototype
- CRAFT
- Learning experience · HTML · CSS · JavaScript
01 / CONTEXT & INTENT
How can learners move between a lesson and the vocabulary they want to keep?
The DMS5 project explored six connected areas: lessons, a feed, vocabulary notebooks, a chatbot, profile preferences and progress. Instead of presenting English study as a single exercise screen, the interface proposes a personal learning environment. The restored preview uses the earlier A2 front-end so visitors can try its original two-question lesson without an account.
02 / DESIGN REASONING
The thinking behind the interface.
Give vocabulary somewhere to live
The notebook groups collections by everyday and professional topics. The process material includes survey questions and feedback about notebooks and personalization, offering directions for iteration rather than proof of learning effectiveness.
Keep returning routes within reach
The repeated bottom navigation links the main areas. A central home control gives lessons a consistent anchor, while progress and profile preferences acknowledge that learners have different goals.
The experience, step by step.
A walkthrough of the documented experience.
- 01
Choose
Browse a unit and open Lesson 1.
- 02
Practise
Connect meaning and complete a sentence.
- 03
Collect
Browse the vocabulary notebook layout.
- 04
Reflect
Look at the sample progress view.
03 / VISUAL EVIDENCE
A closer look at the work.
Original screens and process material. Select an image to inspect it at full size.
Making the learning space coherent
Original DMS5 process document, p. 8: interface iterations across the learning environment.
Questions for the next iteration
Original DMS5 process document, p. 13: the survey questions used to gather feedback. The case study does not infer a representative result from this material.
A lesson you can try
Capture of the original A2 front-end. The restored first lesson adds answer feedback, a working completion state and replay.
The broader design
Original presentation showing the feed, notebooks, course, profile and sign-in screens. Some account and connected features remain outside the guided preview.
04 / EXPLORE
From explanation to experience.
Choose Unit 1, Lesson 1 to try the two-question exercise. Then browse the original notebook and sample progress screens. Other lessons, chatbot, posting and account saving are outside this preview; no sign-in is needed.
EXPLORE THE ACTUAL PROJECT
What this work carries forward.
This earlier project made the connection between my teaching interests and interface design more concrete. It also exposes the difference between organizing features and creating a continuous learning experience—a question I carry into UNIO. DMS5 contains later iterations, while this portfolio deliberately uses the original A2 interface for the self-contained preview.