UCSF's trauma workshop helped educators learn trauma-attuned practices, but they wanted to ensure that these new skills would stick.

UCSF's trauma workshop helped educators learn trauma-attuned practices, but they wanted to ensure that these new skills would stick.

A learning app for workshop participants to practice new skills

The University of California, San Francisco (UCSF) created a training series to help teachers become more trauma-informed. Research showed that professional development must be sustained over time to have the most impact on students, so the team wanted to explore ways to support continuing education for workshop participants. I joined the project during the exploratory phase and led the ideation and design of the app.

MY ROLE

User Research

Interaction Design

Visual Design

Prototyping

TEAM

1 Product Designer (Me)

Workshop Psychiatrist

DURATION

1 Month

THE PROBLEMS

No support for participants after the workshop ends

⏰ Developing new skills takes time

Repetition and practice are critical to retain information long-term.

👁️ Unable to measure how successfully the training is taught to other staff

Each school sends 3-5 teachers to attend the workshop. But it's up to those participants to determine if and how they share what they learned with the other teachers.

STAKEHOLDER INTERVIEW

Requirements & constraints

After speaking with my stakeholder, I compiled a list of requirements and limitations to keep in mind.

REQUIREMENT

Continued practice

The app should help users practice what they learned during the training.

REQUIREMENT

Maintain nuance

In real life, there is no singular right or wrong way of handling situations.

CONSTRAINT

Limited resources

UCSF can’t provide staff to support further trainings, and technical requirements should be kept simple.

USER RESEARCH

What teachers value: Quick lessons, realistic advice

Due to privacy concerns, I wasn’t able to interview actual workshop participants, so I conducted five user interviews with teachers and caretakers as proxies.

Keep it quick; teachers are busy

We already have so many meetings, so when schools make trainings mandatory, we have even less time for other important tasks.

Realistic, not idealistic

Concepts like ‘lead with love’ don’t help us navigate real-life situations when kids aren't listening.

Navigating challenging situations

I wish I had resources to help me when I'm stuck — like a mentor to bounce ideas off of or scripts to help with difficult conversations.

A two-staged approach: Exploring both an MVP and ideal state

Since this was a proof of concept, we wanted to reflect all the possibilities, while still keeping in mind the technical limitations of a public university’s psychiatry department.

V1 — MVP

Five minute lessons

Low effort — can recycle training content

Minimal time commitment — good for busy teachers

Can be used to teach other staff

Real-life scenarios are highly varied; hard to capture all the nuance in this format

V2 — IDEAL STATE

Practice difficult conversations w/ AI

High technical requirements

AI chatbot simulates real conversations so users can gain practical experience

Personalization — tailor practice to specific problems users are facing

MVP: Five minute lessons

Concept design

I explored design patterns at various edtech companies and meditation apps to get inspiration for how to design simple, mobile-first lessons.

Unlock lessons as you go

Many education apps display lessons through a series of locked chapters, reducing overwhelm.

Streaks

Competitors gamify learning by using streaks to encourage daily engagement.

Minimal question screens

They keep it simple with minimalist screens with fun graphics.

User flow

LOW & HIGH FIDELITY WIREFRAMES

Putting it all together

Five minute lessons

Scenario-based lessons to help users remember and apply trauma-attuned practices learned during training.

Feature: Five minute lessons

Business goal: NPS

MVP requirement: Offer users a few potential considerations for each question; won’t be able to capture every possible answer.

Promote user engagement

Streak reminders on the home page and after each lesson motivate users to return the next day. Locked lessons help reduce decision paralysis by directing users to a specific lesson every day.

Feature: Streak + locked lessons

Business goal: User engagement and retention

MVP requirement: Streak and lesson timeline are the same for everyone; not customized based on user’s goals and education level.

Reflection

The lessons allow participants to continue practicing the concepts taught in workshop, while also introducing them to staff who were unable to attend.

Challenge: Designing text-heavy screens

As an MVP, we relied on communicating information through text over video. As a result, many screens were quite text-heavy, and I had to think through ways to break it up so as to not overwhelm our users.

What’s missing?

This Q&A learning model is limited to the answers we provide and doesn’t allow for nuanced discussions. Additionally, users aren’t able to personalize these to specific problems they are facing in the classroom.

Phase two: Exploring post-MVP iterations

Adding an AI chatbot to help users practice difficult conversations

User research showed a demand for mentors or resources to help guide teachers through difficult scenarios. While UCSF doesn’t have the staff to support real-life mentors, an AI chatbot allows users to practice trauma-attuned approaches based on the real scenarios they experience at work.

EXPLORATIONS & ITERATIONS

How to display chat tips?

While I had a general sense of how I wanted to design the chatbot, the big question was how to display chat tips and inner thoughts (i.e. insights into what the other person is thinking versus what they’re saying).

Considerations

📚 Level of education: How much help did we want to offer? Users may be coming from different levels; should we allow them to opt-in/out?

⚖️ Ease of use: How do we balance the level of education with ease of use?

🤏 Limited space: The app was mobile-first, and a significant portion of the screen would be taken by the keyboard.

Early explorations

Initially, I explored placing these features in a floating banner so users could access hints whenever they wanted.

👎 Downsides of a floating banner

The banner draws users’ eyes away from the chat. The keyboard already takes up a lot of space, leading to more scrolling for the user.

👩🏻 What do users think?

During user testing, participants found it frustrating that they had to keep clicking on the banner. They also wondered how they would be able to see chat tips and inner thoughts from earlier in the conversation.

Final decision: Intuitive design > personalization

I made the design more intuitive at the expense of reduced flexibility. I decided all users would get some form of immediate feedback via recurring chat tips if they selected the option, while keeping inner thoughts in a separate place.

This design pattern of immediate feedback should already be familiar to users, especially those who play digital games or use edtech platforms. Users should also be used to double tapping on messages for additional options; thus, placing inner thoughts here should be intuitive.

Scrapped explorations

I also explored an option for users to receive suggested responses. However, the technical challenges outweighed the benefits here, at least for an initial product. The primary goal of the feature was to allow users to practice difficult conversations in a more real-world setting, and we didn’t want to be too prescriptive since there are no right or wrong responses.

Final product

Closing thoughts

I love the mission of the TAP program, so this was an exciting project to work on. However, limited resources and competing priorities have delayed additional work on this product. Still, I was able to think through some design challenges I hadn’t experienced before and took some important takeaways from this project.

🤏 Working with limited screen space

Designing a mobile chat product required creativity to use the limited space effectively, especially when the keyboard took up almost half the screen.

💭 Defining an MVP

I learned how to work under strict resource and technical constraints, while leaving space to explore future iterations.

🪦 Don’t be afraid to kill your darlings

The final design of the AI chatbot ended up looking a lot different from the original explorations after receiving some crucial user feedback.

© 2024 AMY YANG

MADE WITH LOVE & MATCHA LATTES. SET IN INSTRUMENT SERIF, NEUE MACHINA & MORI.

© 2024 AMY YANG

MADE WITH LOVE & MATCHA LATTES. SET IN INSTRUMENT SERIF, NEUE MACHINA & MORI.

© 2024 AMY YANG

MADE WITH LOVE & MATCHA LATTES. SET IN INSTRUMENT SERIF, NEUE MACHINA & MORI.