Multi-device experience for interactive classroom presentation

Avanti is a company that runs tutoring centers that provide Math and Science education to 11th and 12th graders in India. In 2015, they decided to introduce tablets for all students in their classrooms in an effort to make their already interactive classrooms more interactive and efficiently collect student data.

Design Brief

To modify the existing presentation template so that it can be used both by teachers to teach students from the projector and by students to record their responses to in-class quizzes when it is played on their tablets.

3 member team: Product Manager, Developer, and me
Design phase duration: 2 weeks

My Role

  • Planned the features for the Student and Teacher interfaces and how they would interaction with each other
  • Brainstormed design ideas for features and navigation
  • Create prototypes in Keynote

Understanding the Existing Format

To understand the format of the classroom and the presentation, I looked at class presentations, talked to Avanti’s teachers, and watched video recordings of classroom sessions. Then I visualised it for my own understanding.

Planning the New Experience

In the existing version, there was only one interface, the projector, and only one version of the presentation. Now there could be three interfaces: the projector, the student’s tablet, and the teacher’s computer. I planned the content and features that would go on each slide using a table as follows:

Design Ideas for Navigation and Slide Interactions

Then I brainstormed different ideas for representing content and interacting with features on each slide and navigating between slides. The screens were designed taking into the account the form factor of the tablet first.

Once I was confident I had explored enough, I discussed the plan table and these design ideas with the team and got their feedback.

Final Prototypes in Keynote

After few round of changes, we decided on the following designs for the teacher’s interface and the student’s interface. I prototyped these in Keynote.

Teacher’s Presentation
Student’s Presentation

We decided to make the final tweaks for the type sizes, colors, and spacing directly in the code after testing it on the tablet and the projector together in the actual classroom setting.