PFA-TEACH
E-learning for applying psychological first aid in school environments.
Background
3C Institute had worked previously with The Center for Safe and Resilient Schools (CSR) for several courses, including Trauma Informed Skills for Educators (TISE) and Support for Teachers Affected by Trauma (STAT), as well as a public facing site and umbrella site to house their courses.
Project overview
CSR came to 3C Institute to create a new online course and associated resources and materials for PFA-TEACH (Psychological First Aid for Schools) which would adhere to the existing identity established by previous courses that had been developed. This course would be housed on the newly developed umbrella site for purchase.
My role
I worked with the team to develop a new visual identity for this course based on the established identity of previous courses, create engaging video and animated content, a breadth of interactive exercises, and print resources. I also worked on the UX/UI of the course by creating mockups for the user dashboard and course player.
<span data-metadata=""><span data-buffer="">Audience
The audience for this course is school staff who are involves in the planning and implementation of school mental health activities and support for students. This includes any adults on the school campus, such as teachers, school counselors, social workers, and admin.
October 2021 - March 2023
Role
Visual Identity/Branding
Illustration
Story-boarding
Animation/Motion Graphics
Audio and Video Production
Video Editing
Instructional Design
Print Design
UX/UI
WordPress
Tools
Photoshop
Illustrator
Adobe XD
After Effects
InDesign
Acrobat
Proof HQ
3C Team
Grace Wickham – Project Manager
Steve Grothman – Director of Project Management
Kim Pifer – Head of Editorial/Content
Josh Smith – Editorial/Content
Wes Sommer – Video Director
Morgan Huegel – Developer
Kelly Fish – Art Director
Hailey Hammond – Graphic Design
CSR Team
Marleen Wong – CEO and Co-founder of CSR
Pamela Vona – Cofounder of CSR
Angela Krauss – Director of Operations at CSR
Production Process
Visual identity development
Having worked on and helped developed the visual identity of 2 previous courses in CSR’s catalog I was familiar with the adjustments that would need to be made to allow this course to stand on it’s own while still being in the same family as the other courses. I lead the other designer on the team to take the existing branding materials and adjust them to fit this new course and CSR’s own newly established visual identity.
Logo
Styleguide
Visual assets
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 sample
Narrator sample
Interactive exercises
The PFA-TEACH program takes advantage of DeLP’s many interactive features including 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 user dashboard and resource center. However, for this project the team wanted to push the boundaries of what the platform could do at the time.
User dashboard
The user dashboard is the primary location where students will navigate the course.
Course player
Once the user entered a lesson they would be taken to the course player, or the area where the videos, interactives, and other content would be displayed. We developed several directions for the colors and patterns to incorporate the established visual identity into the course player.
Print and resources
Resources
The team and I worked to create a library of resources, including supplemental pdf materials and powerpoint decks for presentations.
Manual
The CSR team wanted to develop a printed manual version of the PFA-Teach course. I worked alongside the CSR team and an editor to pull relevant visuals from the course, layout and design the manual, and prep the files according to their printer’s provided dimensions.
