Teach the Triangle

Training after-school program staff social-emotional learning skills.

Background

Many working families rely on After-School Programs (or ASPs) to provide safe and supervised care for their children. In recent decades, due to the changing economic landscape, this need in community ASPs has increased resulting in higher enrollments. Changes in the education system, such as narrowing of curricula to core subjects and reduction in time dedicated to social emotional learning (SEL), has led to ASPs filling many gaps not addressed in school.

With the growing population depending on ASPs to provide care and SEL, the demands on ASP Providers have become overwhelming. Staff are typically underpaid, under-trained, under-prepared, and have varying levels of educational and professional experiences. Spending much of their working hours with children, they are afforded few opportunities to in-person training and consultation to maintain high quality implementation of evidence based SEL and prevention programs provided by the ASP.

Project overview

Teach the Triangle is a SBIR Phase 1 seeking to address the difficulties ASP staff encounter in receiving high quality training to help support them in their positions. This self-paced e-learning program provides ASP staff high quality professional development through didactic instruction, demonstration videos, and interactive practice opportunities tailored to scenarios they will often encounter. Through this training ASP staff will gain the skills they need to improve ASP quality and improve social, emotional, and behavioral outcomes for the youth they serve.

My role

The Teach the Triangle Phase 1 is built on 3C Institute’s proprietary software platform DeLP (Dynamic e-Learning Platform). DeLP is highly customizable and includes features for didactic instruction through video, audio, and interactive exercises that allow the user to practice skills and test their knowledge.

On this project, I worked closely with the project team to use all of the flexibility of the DeLP platform to develop the Teach the Triangle branding and visual identity, create engaging video and animated content, and a breadth of interactive exercises to support learning.

Audience

The primary audience of Teach the Triangle are ASP providers. These providers have often been trained through one time in person workshops that are not typically feasible or effective. Due to the high turn over rate of providers, it’s necessary to have training that is available at any time to allow for ongoing onboarding of new staff. Providers are also limited by conflicting schedules, resources, and settings which can also lead to difficulty in participating in a, inflexible training schedule. Teach the Triangle addresses these issues by providing a program that acknowledges providers strengths and limitations by tailoring the instructions for individual’s needs and utilizing context-based applications of SEL strategies.

July 2019 - July 2020

Role

Visual Identity

Illustration

Instructional Design

Storyboarding

Animation/Motion Graphics

UX/UI

Tools

Photoshop

Illustrator

After Effects

Proof HQ

Team

Dr. Melissa DeRosier  – Principal Investigator

Dr. Stacy Frazier – Co-Principal Investigator

Deb Childress – Research

Dana Hanson-Baldauf – Research

Kim Pifer – Content/Editorial

Steve Grothmann – Project Manager

Kelly Fish – Design

Wes Sommer – Video

Allison Goodman – FIU Team Content Expert

Tommy Chou – FIU Team Content Expert

Production Process

Visual identity development

In the initial stages, we determined that due to this project being intended for later commercial use we did not need to adhere to the FIU (Florida International University) branded colors. We collaborated with the FIU content expert team to generate a list of words that they wanted to invoke through the visual identity of this program. Using these words and the understanding of the audience, I generated 3 moodboards that the team and I would narrow down and refine.

Moodboard

Logos

Final Styleguide

Narrator Backdrop

Course graphics

After establishing the visual direction for the course, the next stages were production of the course content including storyboards, motion graphics, live video, and interactive exercise templates.

Art notes and storyboards

Prior to creating the storyboards, I reviewed the scripts developed by content and SME’s. As I reviewed each script I would make “art notes” or written plans for how I would create the storyboards, including the graphics for the video and motion graphics, identifying the interactive exercises and what templates would need to be created for them, and noting where live action segments would appear.

Once the art notes were completed, I would begin work on the storyboards which would be created by lessons within each module. These storyboards show a linear progression through the course, presenting video content and interactive exercises as they would be experienced by the user.

When the storyboards are completed I present them to the rest of the project team. This is when the editing process primarily occurs, with team members noting areas that need edits and myself flagging, addressing, and re-presenting the material.

Motion graphics samples

Narrator video sample

Interactive exercises

The Teach the Triangle program takes advantage of DeLP’s many interactive features including HTML blocks, drag & drops, branching menus, list menus, and knowledge checks. I created a template and design assets for each exercise that the course builders would use to build the interactive in the program.

UX/UI

How does the student access the course and it’s supplemental materials? The DeLP platform allows for flexibility in the user experience design of the course player.

Note: This course has since been updated to the new DeLP2 platform and as such has a new appearance compared to this original DeLP UX/UI.

Course player