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