Student Selector Google Classroom

Objective

How might we leverage technology to help make the classroom a more inclusive space through class participation?

Solution

An mobile Student Selector app on Google Classroom that helps teachers randomly call on students. This ensures all students have a fair chance of speaking and sharing answers. Furthermore, it helps teachers track who has and hasn't participated.

 

Duration: 
4 Months, Launched October 2018

Team: 
Google for Education

Tools: 
Sketch, Illustrator, InVision, Material Design

My Role: 
Research, Visual Design,
UI/UX Design, User Testing

 
 
Google_classroom_Student_selector_2.gif
 
 

Design Approach (End-to-End)

The Student Selector app was the first mobile classroom app tool launched from Google Classroom. I owned and led the end-to-end design process for the student selector app. My design process included:

Design Process.png

Project Team and My Role

My team was part of Google Classroom. Since launching in August 2014 Google Classroom has helped teachers easily distribute resources, collect work, and communicate with students and guardians.

I worked closely with PM, Engineering, and UX Research, as well as Educators to better understand the business, technical and user constraints.

I proposed weekly meetings with everyone to be on the same page and participated in design critiques along the way.

 
 
274-desktop-wallpaper.png
 
 
image-asset.png

Chapter 1

Understanding the Problem

 

Kick-off Meeting

Before designing, I wanted to understand the problem space better. I set up an kick-off meeting with the PM, Engineers, and UX Research to:

  • make sure that we all were agreement about the problem and target user(s).

  • learn everyone’s preferred working style and meeting availability so that we can best collaborate as a team.

  • define the timeline of the project and existing research

Screen Shot 2019-07-24 at 12.39.42 PM.png

Target users

The target users of the Student Selector app are teachers who spend time randomly selecting students to answer questions during class.

Goal (How Might We)

How might we use technology already in the classroom to enable teachers to encourage class participation?

 
image-asset.png

Chapter 2

Exploratory Research 

 
Screen Shot 2019-07-24 at 12.35.46 PM.png

Research Methods

I wanted to understand the current pain points and workflow of the teachers, so I read literature reviews by looking at blogs, podcasts, videos, play store comments, and analogous products.

Pain Points

Teachers want to make sure they call on everyone equally, but they repeatedly call on the same students because they are busy and forget which ones they’ve called on.

Current Workflow

Currently, many teachers use popsicle sticks with student names to randomly call on students to encourage class participation.

IMG_9926.JPG

Key Research Insights & Design Decisions

Below were some of the key findings I found during my evaluative research and thus what design decisions or principles that I should keep in mind before developing concepts.

 
 
Screen Shot 2019-09-11 at 12.54.27 PM.png
 
 

CHAPTER 4

Concept Development

Scoping Priorities

Based on my key findings and design decisions, I also compiled all the use cases for calling on students. I met with my PM to scope and reviewed priorities for use cases to make sure I stayed inside business constraints.

Primary Use Cases (P1)
I generate a random name and student is present
I generate a random name and student is absent
I want to reset the bucket of popsicle sticks

Secondary Use Cases (P2)
I generate a random name and want to pick another student
I want to see the students already called on

User Journey

From the prioritized use cases, I created a user flow for the critical user journey of the MVP Student Selector app.

 
Userflow@2x.png
 

Analogous Solutions

From these use cases, I looked at different products and Material Design patterns to gather inspiration.

 
 
Screen Shot 2019-07-24 at 9.35.42 PM.png
 
 

Low Fidelity Sketches

The mobile app needed to be integrated seamlessly in the currently Google Classroom experience, so I explored different entry points. I also sketched low fidelity wireframes from the critical user journey defined earlier.

 
sketches.png
 
 

cHAPTER 5

User Testing

 
 

Concept User Testing

After running past my sketches with the team, I wanted to test the usability, usefulness, and desirability of the app.

I spoke with my the UX Researcher on my team to put together a screener and reached out to 15 participants and schedule user testing sessions with 2 elementary school teachers, 2 middle school teachers, and 2 high school teachers.

I wrote a research protocol and checked with the UX researcher on my team to make sure that I'm following the correct steps.

 
Screen Shot 2019-07-24 at 10.03.32 PM.png
 
 

Research Report

After the user testing session. I thoroughly synthesize the research raw notes. I wrote a research report so the team could easily see where and how I made my design decisions.

Key Findings

The main findings were:

  1. The ‘Student Selector’ is useful, usable and desirable.

  2. The feature should be found on the mobile ‘People’ tab of Google Classroom

  3. Sessions should persist even when the user navigates out of the app. For example, if a class session ended on Monday and not all students were called on, the app should show the rest of the students during the subsequent class session (i.e. not reset).

 

CHAPTER 6

Design Decisions & Material Design

 

 

Material Design System

Based on the feedback, I iterated my design and moved into higher fidelity. I used Sketch and the internal Material Design spec, even add new interactions to the Material Design system (such as the swiping of the cards).

 
Google_classroom_Student_selector_2.gif
 

User Flow

Below is the final user flow that I tested with the teachers:

 
Userflow hifi@2x.png
 

An In-Depth Look

Below is more in depth look at the main screens of the app, including the key findings from my user testing that helped shaped the design of the screen.

 
workflow@2x.png
 

CHAPTER 7

Other Notes

 
 

Accessibility

I wanted to make sure the Student Selector app experience was inclusive and accessible to everyone, especially those using a screen reader. I worked with the engineering team to make sure the user flow for a screen reader was intuitive.

Alternative Views

I considered the experiences for landscape, tablet, Material 2, and iOS. For example, in landscape view I made the ‘Next’ button closer to where the thumb touchpoint is.

 
Alternative Views@2x.png
 

Future Considerations

To take this app further I would consider different learning styles that students have and allow teachers to make notes on on these styles to better cater to their students.

 

CHAPTER 8

App Launch (October 2018)

 

The app launched on October 2018 and has received positive review from teachers. Some even have created walk throughs of the app.

I helped prepare for the launch checking in with the engineering teams and submitting bugs.

A walk-thru of the Student Selector app by an enthusiastic teacher!

 
Popsicle Reviewa.png