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.
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. 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.
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-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. 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.
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”.
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 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.
| Client | HKT Education |
| Role | Design Lead (Zensis): wireframing, UX & UI, prototyping, app icon design |
| Platform | iOS & Android tablet app |
