HKTE 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 the development of 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. Throughout the project, I have learned to put myself in user’s shoes, 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 a more reusable, customizable, interactive instructional content, but not an extra burden to them. 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 on using apps.

Proposed Design: Sidebar Approach

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

  • Wider drawing space on a landscape screen;
  • Convenient for right-handed users: draw with the right hand and switch 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 sidebar;
  • Make primary 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 together, as they are both attributes of the pen tool, users don’t have to modify in different panels indeed.

We came across with pop-ups, grouped buttons (like Pinterest) and collapsible side panel, and finally to 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 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 recognise how much further to the end.

Uploads tray: delightful transition

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

The uploads tray displays items which have not (of failing to) uploaded. However the situation is rare, so we implemented a simple transition on showing once user triggers it, 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 to have three elements in the design, which are recording, learning (or education) and the tablet. I put “record” as the most needed to be emphasised 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

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