Empowering real-time behavior tracking

Product Design, UX Design, UI Design

 
ipad mockup b.png

Empowering student behavior tracking on-scene for busy educators.

 
 

Durations
4 weeks

Team
Michelle Chou, Rachel Alexander, Edwin Cho, Ekta Verma

Roles
UX+UI Designer
UX Researcher

Tools
Sketch, InVision

 

 

The Challenge

Design a tablet-based application that allows educators in tracking student and class behaviors, and identifying trends over time.

The Outcome Overview

How might we help educators track student behavior in a real-time classroom environment?

  • Simple & Clear

  • Discrete & Personal

  • Helpful & Approachable

profile - default.jpg

THE PROCESS

process.png

EXPLORATORY

01

Client Interview

Founder of RyeCatcher

Arthi Krishnaswami

  • What does the tool currently do?

  • How it is used by the teachers and teaching aides?

  • What are the pain-points?

We worked on understanding and synthesizing the information we received in the stakeholder interview and compared that with the requirements and the use case scenarios.

Because use care scenarios and requirements of the project were predetermined, our exploration phase focused on really understanding the project scope.

 
02

Understanding + Synthesizing Requirements

We started broad exploring an entire ecosystem of possibilities taking into account:

  • Tracking an entire incident or event involving multiple students

  • Leveraging AI and natural language processing to facilitate rapid documentation of complex incident reports involving multiple students

  • Logging demographics, family histories and classroom attendance.

  • Our considerations were exhaustive.

Process wise, we had to cover a lot of ground before narrowing in on the primary function of the app— behavior tracking.

Based on our exploration of what is possible within scope, we determined we needed to define three major sections of the tool:

  1. Students

  2. Classes

  3. Tracking

For each major section, we charted out minor functionalities that needed to be included or requirements that needed to be met.

 

Early GENERATIVE

03

Information Architecture

Creating a hierarchy of functionalities by mapping out the basic IA

Goal: determine the access point for the tracker: student vs behavior

Evolving project scope led to several rounds of IA modifications

Once we had a preliminary grasp of the requirements, we got to mapping out the basic information architecture.

Our goal was to organize and structure all relevant functionalities  in a way that was most efficient for in the classroom, on the spot tracking.

We deliberated over two different entry points to the tracking function.

  1. Through the student

  2. Through the behavior

We wanted the UI to do both, but realized that the student based entry point was the most intuitive approach.

Our understanding of the scope of the project evolved over the course of the project. So every step had modifications based on the feedback that we got from Arthi, or professors and our classmates.

 
04

Rapid Sketching

Our focus was on

  • Clarity of layout

  • Discoverable functionalities

  • Intuitiveness of Use

  • Dealing with Complex data vizualization

  • Quickness of performing tasks

Class Screen

Lots of student images, lots of tapping action, lots of functionalitites, our focus was on

  • Arrangement of components on the page

  • Cohesiveness amongst different components

  • Page should not look overwhelming

Tracker Screen

Our initial concept was a flared out view for the Tracker screen. The student would be in the epicenter and all his tracked behaviour will be flared our around him. The size of the circle will represent the number of times the student has done that activity.

  • Quick add

  • Arrangement and size of trackers

  • Make trackers seem connected yet disparate

Profile screen

For the student profile screen we wanted a view of student demographics, more information on the student like IEP or BEP plans he might be on, history of the student trackers for the student, and trends for the tracked behaviours.

  • DATA VIZ!

  • Grouping elements conveying similar meanings together

  • Arrangement of various groups about the page

  • Since these are metrics- Provide user some level of control on the metrics view- but not too much

 
05

User Flow + Wireframing

Mapping the flows between the three major components.

Interplay of components

How will our ideas work into a final solution

Creating a mental model of what we’re trying to achieve

 

GENERATIVE + EVALUATIVE

06

Prototyping

 
07

Usability Testing

Research Protocol

We structured the interview process in the following way:

Step 1- Freeform click-through exploration + think aloud protocol

Step 2- Guided exploration + individual task performance

We prepared and conducted three user testing sessions with three teachers.

Tara O'Leary - Classroom teacher (very tech friendly, quick learning, quickness and efficiency)

Robyn Willis - Learning support teacher (relatively tech friendly, perception and mood surrounding application usage)

Bob Miles - Special education teacher (More focused on intuitiveness of elements on the screen, emphasised ease of wayfinding, focusing more on core functionalities than many functionalities)

Research Insights

Three different users. Three different perceptions.

Key Realizations:

  • Users make meaning out of everything

  • Discretion is important

  • Iconography and Meaning

  • Color and Perception

  • The Learning Curve Conundrum

 
08

Design Critique

 
09

Client Pitching

 
10

Reflection