The Shift Simulator

Creating an interactive learning enviornment

Project

Web app

Role

Product design, user research, visual design

Team

2 product managers
2 engineers

Client

Crisis Text Line

Challenge

How do we prepare volunteers for their first shift as a Crisis Counselor?

Background

Volunteers at Crisis Text Line take 24/7 text-based conversations with people in crisis. It is often nerve-wracking for volunteers on their first shift as a Crisis Counselor because they’re unsure about how to implement their crisis intervention training and are emotionally and visually unfamiliar with the Platform in which to take texter conversations.

Outcome

A training tool that allows for volunteers to take guided and independent practice conversations in a simulated Platform experience.

Research & Discovery

Research & Discovery

History of Volunteer Training

Prior to the Shift Simulator, volunteers read textbook-like training content to learn how to perform crisis interventions with texters. They could also watch recorded videos of other people’s texter conversations and interact with a digital prototype of the Platform. Ultimately, there was still a functional disconnect between the provided training materials and the Platform environment.

Building New Features

When I started working on the Shift Simulator, informational sidebars and practice conversation activities were already built out. I was tasked to design a conversation selection interface for volunteers to choose which practice conversation activity they wanted to go through.

After reviewing existing designs and their corresponding research discoveries, I discovered that volunteers were feeling lost in the simulated Platform experience due to lack of context. I then proposed creating an onboarding flow in addition to the conversation selection interface to provide new volunteers with as much as guidance as possible.

Process

Different Onboarding User Paths

Because users would be entering the Shift Simulator at various instances, I needed to create many user flows for each particular path. For instance, if a volunteer navigates the entire onboarding but doesn’t begin a practice conversation, they would be shown the final onboarding screen upon re-entering the Shift Simulator.

shiftsim_sitemap_onboarding
Shift Simulator onboarding sitemap
Shift Simulator onboarding sitemap
Draft Conversation Selection Interfaces

The main challenge in creating the conversation selection interface was developing a design that didn’t require creating brand new components. While the Training team wanted to ensure the designs would be scalable, limited engineering resources required a thoughtful approach that could be implemented in a few months.

Option 1 - Profile Landing Page

Highly scalable for developing more content and features, confusing call-to-action placement, high engineering efforts.

Option 2 - Modal

Clear visibility for users, easily implementable, limited scalability.

Option 3 - Conversation Window

Seamless design integration, technically challenging to implement.

shiftsim_convoUIdrafts
Conversation selection UI drafts
Conversation selection UI drafts

The team went for Option 2 as we were able to repurpose existing Platform modals. Due to concerns around accessibility, this option does limit how many practice conversations can be displayed so it was agreed that modals would be a medium-term solution. Subsequent research would be done afterwards to validate and drive future designs.


Final

Platform Tour

The platform tour was designed to stay on brand with pre-existing Shift Simulator components such as the sidebar. Each step of the tour was included to provide more environmental context for a first-time user and to give way for various user paths.

Platform tour
Platform tour
Practice Conversation Selection Interface
Practice Conversation Selection Interface

The final design of the practice conversation interface also aligned with the rest of the Shift Simulator environment. Additionally, there were many design considerations in including additional text, interactive components, and buttons to make it not only simpler for new users to read but also navigable by VoiceOver / screenreaders for users that are deaf or hard of hearing.

Practice conversation selection interface
Practice conversation selection interface
The Complete Onboarding

Volunteer using the Shift Simulator for the first time will go through the entire onboarding including the Platform Tour and practice conversation selection.

Complete Shift Simulator onboarding
Complete Shift Simulator onboarding
Usability Testing and Next Steps

I conducted a series of video usability testing sessions to better under how volunteers were using the new Shift Simulator onboarding. Users were able to confidently select practice conversations. Tenured volunteers expressed that the Shift Simulator would have been a helpful tool for when they first started. For the Shift Simulator to grow with users as they learn, future iterations could expand upon features such as progress tracking and level difficulty.

An introduction video was also created to reveal the Shift Simulator to the volunteer community to help them understand what the product is and how it'll assist them.

Shift Simulator introduction video
Complete Shift Simulator onboarding

Check out other projects

FocusMobile app, responsive web

UnveilWebsite

TeenSafeDesign system

StegVisionMobile app