HKT Flipped Classroom

In Mar 2015, we were appointed by HKT Education to build a flipped classroom learning platform to promote active online learning. Flipped Classroom is one of the deliverables, which provides video tutorials, interactive quizzes, and performance report to students.

The Objective

Our users – local secondary school students, are digital natives. Due to the heavy load of homework, exams and tutorial classes, squeezing time to study paper notes seems impossible for them. We hope the Flipped Classroom app gathers and digitalises all school teaching materials into one place so that students can learn independently and conveniently outside the classroom.


At the beginning of the project, the client prototyped the platform website before the app development. It was double-edged, for it demonstrated essential features and limited both design and technologies to be used. The situation was challenging. I reorganised the information, flows and wireframe with all stakeholders around five times to figure out design workarounds:

Listing Quizzes

In the app, there are quizzes on different subjects and topics to evaluate student’s learning outcome.

Initial wireframe: quiz list

Topic cards: Instead of putting things vertically, a scrollable grid list with topic cards shows a summary of the topic. Users can scan the titles and locate a topic quickly. The big image on the cards also makes students feel less bored compared to a text-based list.

Corner tag: represents the status of completion. A “late” assignment is in red to catch the user’s attention; a “completed” one is translucent. I think it is less important to users.

Answering Questions

Down to the quiz section, there were 5 question types: multiple-choicetrue or falsefill in the blanksmatching and ordering. The best solution for the last two is by dragging to do the action, which I believe is the most intuitive. Unfortunately, due to limited time and budget, we turned to tap-and-go to switch between targets. It takes more step to perform. On the other hand, it serves better on low-end devices in schools.

Matching and ordering
Matching and ordering

Considering the clickings and postures while answering questions, all critical actions like options and submit buttons are put on most users’ right – right-handed. Tapping the navigational arrows will go to the next or previous question. Supplementary info like the timer or question number is put with topics and presented in a timeline to show the learning sequence.

Designing App Icon

Translating “Flipped Classroom” into visual is not easy. At that time, not many people have heard of “flipped teaching”. If it has to be a symbol, the icon should be recognisable by students and teachers. I tried stationeries, ticks or applying blackboard textures to associate the product with online learning.

Finally, the client decided to go with the upside-down F-mark. The implication is straightforward – “flipped”.

HKTE Flipped Icon Concept
Up-straight F Design
HKTE Flipped Icon Final Design
Final Design


The most challenging part is to find compromise solutions under limitations. I truly know how good is a gamified education product. However, if we could not have this, what alternatives we can provide? We explored patterns that students familiar with and brought them into a digital experience, meanwhile keeping the app user-friendly and technically feasible to ship it on time.

Clients also contributed and addressed their needs from time to time. Some comments contradicted my ones, and I always tried to convince them with references or articles to show reasons, professional thoughts rather than just random, subjective decisions.

Some may think “design” is subjective, but it is built on habit, patterns, and cognition on a matter.

ClientHKT Education
RoleDesign Lead (Zensis): wireframing, UX & UI, prototyping, app icon design
PlatformiOS & Android tablet app