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.
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
- 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.
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:
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.