Skip to content
Photo of Sarah Henderson's face

iCase iPad User Interface Prototype

Create an interactive user interface prototype of a teaching case delivery tool. This was used to film a video that formed part of a funding application for development of the full system.

Created for Innovative Learning Technologies group at The University of Auckland Business School in 2012
Technologies: interface2, iPad

Requirements

The ILT group conceived the idea of an online system that would allow students to interact with teaching cases using iPads. Teaching cases are structured sets of multimedia resources related to a topic - video, images, text, documents & web pages. They also envisaged that students would be able to annotate and collaborate around the information and that instructors would have some way of seeing how the students were engaging with the material. They asked me to design and prototype a user interface for such a system that they could then use to pitch for funding to build the full system.

Solution

My first step was to create a paper prototype of the system, sketching out the main screens and demonstrating the flow through the system to the ILT group. Once we were satisfied with the basic structure, I begain to create a more interactive prototype that could run on an iPad.

After reviewing a number of tools for iPad UI prototyping, I opted to use interface2. I designed all the screens and configured all the screen navigation, transition effects and popups. At the end of the project, I had the assistance of a graphic designer to create the screen backgrounds and some of the images used in the demonstration teaching case.

One particular feature I included were a set of overlays over each of the topic tiles on the case home page. These provide an overview to the instructor showing how students are engaging with the material. The engagement icon shows red, orange or green to indicate what proportion of the class has looked at that topic, and an average engagement time is shown so the instructor can see how comprehensive is the engagement. The design for the full system included the ability to drill down on these metrics for more details.

The prototype also included the ability for students to annotate any location within a resource. These annotations are shown whenever they view the resource, along with annotations from their group members and from staff in the course. Display of each of these categories can be easily turned on or off with a simple filter on the page. As well as this asynchronous communication, I included a chat facility available for each resource allowing a student to chat in real time to their group members.

The student's own notes are also gathered together in a 'My Notes' section. From here, they can easily jump back to the relevant location in the resource itself (e.g.), that minute in the video, or that page in the PDF).

Screenshots

iCase home view

iCase video resource view

iCase My Notes view

iCase Chat popup

iCase Instructor view of topic with engagement overlays

Summary

The prototype was successfully used to create a video demonstrating how the iCase application would work. The video was submitted as part of the funding application, however the iCase project was not selected for funding that year. The ILT team are currently pursuing other avenues of funding.