GfE Interactive Demos — Kisha Bertrand

Our goal: To help customers experience the capabilities and ease of product features in the Google Workspace for Education tool.

During recent interviews, users were asked what kind of resources they expected to find on the Google for Education site. Their list included:

Tutorial videos
Ideas & examples of how the apps can be integrated into the classroom
Tips on how the apps work best
Ideas for how to integrate the app right away

We had an opportunity to create an engaging experience that educates prospective customers, drives adoption, and encourages possible upgrades with a simple step-by-step highlighting key product features.

We recommended building a demo experience that integrates animation and interaction which:

Allows users to experience the full interface
Lets the user watch how easy it is to use more advanced features through animation
Causes users to notice key moments and engage with the product through interaction

Storyboarding: Defining how users will engage with the interactive videos

During the first phase of the project, we defined screens, what the user will see, and what action the user will take through narrative flows and storyboarding. We started by logging into the Workspace for Education tool and taking screencaps of each step of the user flow. This was to develop a storyboard to give our stakeholders an idea of how the automatic interactions and user interactions will work within the video.

It was important that we not only outlined what action the user will take within each of these tasks, but also what automatic interaction occurs, what narration copy the user will see and when, and product staging moments to keep everything consistent and organized throughout the demo.

Below is the storyboard for the first task within the originality reports demo. This first task demonstrates how a person would turn on originality reports within the Workspace tool via desktop.

In this first screen, we used a magenta bubble to show how the cursor will automatically move on its own at the start of the demo. We also needed to showcase what narration the user will see at the beginning of this flow so they have an idea of what they’re looking at and what is happening on the screen.
I wrote this piece of narration copy to guide and educate the user on how they would begin the first steps of turning on the originality report feature.

A magenta bubble within the storyboard will always signal the cursor is moving on its own as the user watches how to navigate through the demo.

This is the first instance where we’re asking the user to interact with the video as indicated by the blue bubble. The accompanying narration also indicates an action for the user to take. In this case it’s creating a new assignment. We chose this moment as the first user action to hopefully familiarize them with the first steps taken to turn on originality reports.

Even though we’re asking the user to complete two separate actions, they are actions within the same task, which is to create a new assignment.

Once the user has created a new assignment, the automatic interactions continue as indicated by the magenta bubble. We also see a new narration point introduced here as wanted to ensure the user the user was aware of the crucial step of checking the Check plagiarism checkbox when creating a new assignment.

As the previous narration copy remains, the user is prompted to click the check plagiarism box to help further familiarize and educate them on the importance of checking this box. We’ve also provided the copy for the sample assignment for consistency and communication with the development. team.

The Google team stressed how important it was to have teachable moments throughout this demo. It was our goal to educate users about how the product worked as well as how these actions can benefit student learning. We see this in the narration copy as we reiterate the benefit of turning on originality reports.

And there you have it! Originality reports have now been turned on for this assignment.

We wanted to make sure the user had a way to ground themselves in the completed task as well as give them options on what to do next. This closing screen is meant to serve as a navigation point to explore other demos as well as a way to replay the task itself.
It was important to also give people a way to review all of the steps without having to watch the video again so we included an outline of steps that users can also access.

Check out the finished result on the Google for Education Website

Adapting a desktop first application to mobile

One of the challenges we faced when building these demos was how to adapt a desktop first application to mobile. We had to think about how to showcase the demos on a mobile interface incase users preferred to engage with the demos on a tablet or cellphone. This meant a reduced screen and less space for text to convey user interactions and narrative guidance.

Here’s a look at the mobile entry points for some of the originality report tasks. While we were intent on teaching users how to navigate through the Workspace for Education demo, we had to also consider our other goal which was to entice people to purchase these products and let them know about their options.

These annotations represent direction for our development team to incorporate while building the demos. You’ll also notice some of the same user actions in mobile as we showcased earlier in the desktop view.

Here you’ll see the closing screens for completing a task within a demo. as well as completing the demo itself. Notice the completed steps at the bottom, a quick way to reference how to complete the task.

What We Learned

Be aware of mobile limitations when it comes to building a desktop first experience
Write tiny words for a big impact—text blocks in a desktop view become much longer in mobile
Storyboards are guides for not only the creative team, but also stakeholders and the development team
Always be aware of what the user is doing and seeing while they are on their journey
Give users more credit when it comes to their experience
Embrace the mess and chaos

How we created interactive user demos for educators.