HKTE Education’s Whiteboard is one of its flipped learning apps. It helps teachers in creating tutorials from drawings, and writing quiz questions and sharing them with students.
After completing the HKTE Flipped app in August 2015, we began to work on her companion, Whiteboard. We intended to improve the creation and uploading experience through the intuitive interface. I learned to put myself of the user throughout the project, rather than simply applying common app patterns seen in well-known apps.
User Goals
Our end-users are mainly local secondary school teachers and teaching assistants. We wished the app could help create more reusable, adaptable, interactive instructional content while not becoming an extra responsibility. The app is not only designed for young teachers but also for users with low-tech backgrounds.
- 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?
Users can create video tutorials by recording drawings and voiceovers on the canvas. We wanted to give users a natural, intuitive experience that matched their app usage habits.
Proposed Design: Sidebar Approach
During the wireframing stage, I suggested having a toolbar on the left, similar to many general applications, such as 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
After much deliberation with the client, we finally decided on the top bar approach. It now has more features and is better suited to users:
- 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
In terms of usability, we put brush size and colour pickers together because they are both features of the pen tool. Users are not required to change in different panels.
We came across pop-ups, grouped buttons (similar to Pinterest) and collapsible side panels, and lastly, a pop-up (Solution D below) with more colour options and a more direct presentation on brush size.
Uploads: set clear objectives
After completing the recording, users must select the upload destination, enter questions and configure settings before uploading. We separated them into three parts with breadcrumb on top so that users could 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 that have not (or failed to) upload. However, because the situation is uncommon, we developed a simple transition showing once the user triggers, without taking any space persistently.
The prototype is animated with Form.
Product shots
App icon design
The product lacks a branding guideline so far, but my client requested three elements: recording, learning (or education), and the tablet. I determined that “record” was the most important to stress the tablet was the least important (although I realise it’s a bit silly to have a tablet graphic in a tablet app), so I created the following variants:
We continued to develop with Design A after that, converting the ambiguous “red dot” to a camcorder and replacing dummy text with something mathematical so that people can tell what the app does just by looking at it.
| Client | HKT Education |
|---|---|
| Role | Design Lead (Zensis): wireframing, prototyping, UX & UI, app icon design |
| Platform | iOS & Android tablet apps |
