In-app Flipped Learning

In Mar 2015, we were appointed by the HKT Education to build a flipped classroom learning platform to promote online active learning. The app, 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.

Constraints

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.

In this difficult situation, I re-organized the information, flows and revised the wireframe with all stakeholders for around 5 times to figure out some design workarounds:

Listing Quizzes

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

Topic cards: Instead of putting things vertically, a scrollable grid list with topic cards shows a summary of the topic, so that users can scan the titles and locate a topic easily. 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 user’s attention; a “completed” one is translucent, as I think it is less important to users.

Answering Questions

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

Considering the clickings and postures while answering questions, all critical actions like options and submit button are put on the right for most users – right-handed. Tapping the navigational arrows, it 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 sequence of learning.

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 recognizable 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”.

Afterword

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 were quite 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 in fact, it is built on habit, patterns and cognition on a matter.

Client	HKT Education
Role	Design Lead (Zensis): wireframing, UX & UI, prototyping, app icon design
Platform	iOS & Android tablet app