Brings instructional video tutorials and active-learning quizzes online.

In Mar 2015, HKT Education appointed us to develop apps for a flipped classroom learning platform by turning traditional teaching into online active-learning. Flipped Classroom is one of them. It encourages self-learning by providing video tutorials, quizzes and performance report for students.

Define the Problem

Our end users are local secondary school students. They are used to mobile technologies, but always busy with homework, exams and tutorial classes, squeezing extra time to revise paper notes seems impossible.

Therefore we hoped Flipped Classroom could be an encouraging, systematic learning hub that concentrates teaching materials from the school and help students review on the topic so that they can learn more efficiently and have greater engagement on learning outside classroom.

Constraints

My client did a prototype for their website before committing app development. It was probably a double-edged sword: it demonstrated essential features, but it limits technologies used and design significantly. The project had a tight schedule and budget indeed. We had no choice but delivering the product on time with the existing code base.

Next, I re-organized information, flows and presented it on a wireframe. We revised it for about 5 times to figure out workarounds for all stakeholders. Many original, ideal solutions were given up due to different constraints:

Listing Quizzes

Grid list uses images to distinguish one from others and provides a summary of the full content. To build a clear hierarchy, we aligned topic name and used a horizontal, scrollable grid lists after instead of simply flowing content vertically, so that users can locate particular topic quickly without scanning the images.

The corner tag on a grid item represents the status of completion. A completed one does not matter to users, but a “late” one needs their attention, so we suggested to color the “late” flag in red and make the “completed” flag subtle.

In this section, the user can watch or read the tutorial first, then answer questions within the time limit. Sounds simple huh? However, we took a long way to tweak the details:

Matching and Ordering Question Types

There were 5 question types: multiple choice, true or false, fill in the blanks, matching and ordering. The best way to achieve the last two categories is using gestures to perform dragging and reordering. Unfortunately, we couldn’t implement any code libraries due to timeframe and budget. The alternative way were picking and replacing targets by tapping, which users probably need to perform more steps to achieve the goal.

Timer and Question Numbers

Building an easy-to-use interface for answering quizzes is the highest priority in this page, but there are more things around that need users’ attention. We expected users answer questions and submit them on the right, as most people are right-handed. After responding to a question, they can tap the “next” button just right on the top right and move on, which is the short distance according to Fitt’s Law.

Additional information like the timer and question number are put with topics, which are presented in a timeline to list the curriculum ordering explicitly.

Designing App Icon

The only design brief I got were the product name “Flipped Classroom” and the “HKTE Flipped” tag, unfortunately not many of us know what “flipped teaching” is or even never heard of it. In user’s perspective, the icon should be recognizable by students and teachers. I designed few variants with stationeries, ticks, blackboard textures to associate the product with online learning.

My client selected an up-side-down F logo mark as the final one, which originated from an up-straight F design, it has a closer association with the product name itself. Compared to the up-straight F, it has a lighter blue background to wash out the feeling of Facebook, and the tail is changed from pencil to a stylus as required.

Afterword

Some may think online learning should be entertaining or gamified, in fact, we took a different approach: we studied how things related to the reality and digital world by exploring patterns that students familiar with. Under limitations on schedule and technologies, developers and I had to think ways to make the product (especially the quiz page) usable and also shipped it on time. It would be a lot better if we could use gesture to do ordering and matching, or display the question natively instead on a WebView.

User testing is critical to examine an experimental concept like this. However, both vendor and client did not have real users to test it at last. We relied on comments from stakeholders and colleagues, who were not real users in honest. Obtain feedbacks as early as possible could definitely build a more successful product and avoid changing direction at the last minute.

From design to testing stage, I explained to my client for every little detail. Although they often held contrast views with mine, I tried hard to convince them with live references and excellent articles to show reasonable facts rather than subjective opinions. As many people have a preconception about design, they thought design is a subjective knowledge, but in fact, aesthetics and usability are somehow built on habit and cognition on a matter, especially for UX design, which can be examined through A/B testings and measured through user’s engagement.

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