e-learning · ui/ux

English OnBoard

English e-learning platform for flight attendants: tracks split into modules and units, EXP, a ranking and the Re-check for Cabin Crew, a timed mock test with audio, results and an answer key.

role
UI/UX: journey, flows and screens
status
journey and screens in Figma
disciplines
interface
Mockup of English OnBoard: a Re-check question in the browser, the home screen with the penguin mascot on a phone and an answer key card with 36 of 40 correct
Presentation mockup with the Figma screens; the answer key card was redesigned for the composition. The Figma screens, with avatar and email blurred, are in # interface.

# the product

English for people who work on board. Students move through sections, modules and units, like Module 1, Basic English Skills for Cabin Crew, split into tracks such as Aviation and Everyday life.

Each lesson earns EXP, achievements go on the profile and the ranking lists students by number of achievements. A flight attendant penguin shows up on the home screen and at the end of each lesson.

# the journey

Before the screens, the product map on three fronts. The landing page has a hero, proof of quality with feedback, the content offered, mission and FAQ, with calls to sign up.

The student dashboard brings together the progressive content, profile and achievements, the mixed quiz and the ranking. The admin dashboard handles content management, live classes, the wallet with automated payments and payouts, and tracking students and the companies that hire.

# re-check for cabin crew

The focus of this case. The signed-in home gets a new button, Recheck for Cabin Crew. Before the test comes billing: the Re-check is part of Premium or can be bought on its own, which unlocks only the test after payment.

Then come the rules (timed test, number of questions and audio), the questions, the result with time and accuracy, and the answer key. The flow was designed for mobile, with a top bar, and for desktop, with a side menu.

# interface decisions

Each option has its own listen button: the training is about listening comprehension, not just reading. Time and question number are always visible, and choosing an option highlights the whole card in the brand color.

In the answer key, questions are numbered, with right answers in green and wrong ones in orange, so the student finds what to review without reading the whole test again.

# about the screenshots

Exported from the project’s Figma file. The avatar photo and the sample email were blurred. The question that asks to describe an image uses a third-party photo and was left out, and the rules copy is still a placeholder in the file.

# demo

A slice of the Re-check with the first two questions from the Figma file. Listen to each option in English, pick an answer and check the result and the answer key.

english-onboard / re-checkPrototype · answer key set for the demo
Re-check for Cabin Crew

Re-check for Cabin Crew

Two job interview questions for cabin crew. Choose the most professional answer: that is the one the panel expects to hear.

  • Timed
  • 2 questions
  • Listen

Take the test all the way to the result. Then I’ll tell you what to notice.

# interface

Original screenshots and exports. Open one to see it at full size and browse the others without closing.

  • Desktop: question with an option selected
  • Desktop: plans, Re-check in Premium or on its own
  • Desktop: rules (placeholder copy in Figma)
  • Mobile: home, plans and rules
  • Mobile: question, result and answer key

Want something like this in your product?

Hit me up on LinkedIn and tell me what you’re building.

keyboard shortcuts
j k
next / previous project
enter
open the selected project
esc
back to the list (inside a case)
/
terminal on the home page, search on components
1–5 + enter
picks a reply in the terminal
i
inspect mode: boxes, grid and measurements
?
this list
single-key shortcuts