HKT Education appointed us in March 2015 to create a flipped classroom learning platform to promote active online learning. One of the deliverables is Flipped Classroom, which provides students with video lectures, interactive quizzes, and performance reports.
The Objective
Our users, local high school kids, are digital natives. Due to the intense workload of homework, exams and tutorial classes, many find it difficult to squeeze time to study paper notes. The Flipped Classroom app aims to collect and digitise all school teaching resources in one location, allowing students to learn independently and easily outside of the classroom.
Constraints
Before developing the app, the client prototyped the platform website at the start of the project. It was double-edged, for it demonstrated essential features while limiting the design and technology that might be used. The situation was challenging. I reorganised the information, flows and wireframes five times with all stakeholders to figure out design workarounds:
Listing Quizzes
In the app, there are quizzes on different subjects and topics to evaluate student’s learning outcomes.
Topic cards: rather than arranging items vertically, a scrollable grid list with topic cards shows an overview of the topic. Users can rapidly locate a topic by scanning the titles. When compared to a text-based list, the large image on the cards makes students feel less bored.
Corner tag: reflects the completion status. A “late” assignment is highlighted in red to draw the user’s attention; a “completed” task is translucent. I think it is less significant to users.
Answering Questions
There were five question types down to the quiz section: multiple-choice, true or false, fill in the blanks, matching and ordering. The best solution for the latter two is to drag to do the action, which is the most intuitive, in my opinion. Unfortunately, due to time and budget constraints, we turned to tap-and-go to switch between targets. It takes more steps to perform. On the other hand, it performs better on low-end school devices.
All essential actions like options and submit buttons are placed on the right – right-handed, considering the clickings and postures when answering questions. Tapping the navigational arrows will take you to the next or previous question. Supplementary information, such as the timer or question number, is combined with topics and presented in a timeline to demonstrate the learning sequence.
Designing App Icon
It is difficult to translate “Flipped Classroom” into visuals. At that time, few people had heard of “flipped teaching”. If it has to be a symbol, the icon should be easily recognisable by students and teachers. I experimented with stationeries, ticks, and chalkboard textures to relate the product with online learning.
Finally, the client settled on the upside-down F-mark. The implication is straightforward – “flipped”.
Afterword
The most challenging part is to find compromise solutions within limitations. I definitely understand the value of a gamified education product. However, if this isn’t possible, what alternatives can we offer? We explored patterns that students were familiar with and translated them into a digital experience while 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 disputed mine, and I always tried to persuade them with references or articles to demonstrate grounds and professional views rather than random, subjective decisions.
Some may believe “design” is subjective, but it is based on habit, patterns and cognition about a subject.
| Client | HKT Education |
| Role | Design Lead (Zensis): wireframing, UX & UI, prototyping, app icon design |
| Platform | iOS & Android tablet app |
Constance Tang 