HKT Education Whiteboard

HKTE Whiteboard is one of the Flipped learning apps from HKT Education. It helps teachers to create tutorials from drawings, write quiz questions and share with students.

In Aug 2015, after developing the HKTE Flipped app, we started to work on her companion, HKTE Whiteboard. We wanted to improve the creation and uploading experience through the intuitive interface. I have learned to put myself in the user’s shoes throughout the project instead of just applying common app patterns seen in big-name apps.

User Goals

Prepare and share your tutorial
Prepare and share your tutorial

Our end-users are mainly teachers and teaching assistants in local secondary schools. We wished the app can help to create more reusable, customizable, interactive instructional content, but not an extra burden. The app is not only designed for young teaching staffs but also users in low-tech profile.

  • Create and upload content intuitively with few clicks
  • Complete specific goals on each page
  • Accessible to low-tech profile users

Canvas: How users select tools?

The canvas allows users to prepare video tutorials by recording drawings and voiceover. We wanted to create a natural, intuitive experience for users that matches their practice of using apps.

Proposed Design: Sidebar Approach

At the wireframing stage, I suggested having a toolbar on the left, like many general applications, i.e.,  Photoshop, Bamboo Paper and Paper by FiftyThree:

  • More extensive drawing space on a landscape screen;
  • Convenient for right-handed users: draw with the right hand and switch the tool with the left hand.
Final Design: Top Bar Approach

We took the top bar approach at last after a long discussion with the client. It now implemented more features and suited users better:

  • More functions on the top bar;
  • Users mostly used to top bar than the sidebar;
  • Make direct action buttons (record and mic switch) more prominent by centring them.

Pen panel: intuitiveness and familiarity

Concerning usability, we grouped brush size and colour pickers, as they are both attributes of the pen tool. Users don’t have to modify in different panels.

We came across pop-ups, grouped buttons (like Pinterest) and collapsible side panel, and finally, have a pop-up (Solution D below) with more colour choices and a more direct presentation on brush size.

Uploads: set clear objectives

Once users have finished the recording, they have to select the upload destination, enter questions and configure settings before upload. We separated them into three parts with breadcrumb on top so that users can input less, focus more on each objective and recognize how much further to the end.

Uploads tray: delightful transition

Significant transitions and animation make any waiting process looks shorter and smoother.

The uploads tray displays items which have not (or failing to) uploaded. However, the situation is rare, so we implemented a simple transition on showing once the user triggers, without occupying any space persistently on the page.

The prototype is animated with Form.

Product shots

IMG_4883_ipadmini_white_landscape
Welcome screen
IMG_4884_ipadmini_white_landscape
Record
IMG_4890_ipadmini_white_landscape
Pen tool
IMG_4891_ipadmini_white_landscape
Prepare and share your tutorial

App icon design

The product doesn’t have a branding guideline so far, but my client wanted three elements: recording, learning (or education), and the tablet. I put “record” as the most needed to be emphasized and tablet as the least (although I know it’s a bit silly to put tablet graphic in a tablet app), so I came up with these variants:

ftcwhiteboard_appicon.jpg

We further developed with the Design A afterwards, changing the ambiguous “red dot” to a camcorder and replacing dummy text to something mathematical, so that people will recognise what the app does from the graphics.

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