Attuned helps educators who are participating in UCSF’s trauma-informed care workshops to further their education through quick lessons and difficult conversation role-play with an AI chatbot.

Attuned helps educators who are participating in UCSF’s trauma-informed care workshops to further their education through quick lessons and difficult conversation role-play with an AI chatbot.

Attuned helps educators who are participating in UCSF’s trauma-informed care workshops to further their education through quick lessons and difficult conversation role-play with an AI chatbot.

view prototype

view prototype

view prototype

Company

Company

Company

UCSF

UCSF

UCSF

Project type

Project type

Project type

Concept

Concept

Concept

Work

Work

Work

UX

UX

UX

Branding

Branding

Branding

iOS

iOS

iOS

Context

The University of California, San Francisco (UCSF) is a sub-recipient of a nationwide grant from the Office of Head Start, which provides free early childcare for low income and at-risk kids.

UCSF’s initiative aims to help teachers and staff at Head Start programs become more trauma-informed. They created an eight month series on trauma-attuned practices (TAP) and wanted to explore a potential app that could be used alongside or after the training. 

My role

I joined the project during its exploratory phase to help conceptualize what an app could look like. I worked with the lead psychiatrist to understand the existing problems and brainstorm potential features to offer. As the sole designer, I then conducted user research and created the designs.

Gathering the inputs

Before getting started, I wanted to make sure that I understood the existing problems and aligned with my stakeholder on all the requirements and constraints.

THE PROBLEMS

No support exists after the workshop ends

⏰ Developing new skills takes time

Though the workshops come with corresponding practice sessions, there is no additional support once the training is over.

👁️ No visibility into how training is disseminated to rest of staff

Only 3-5 representatives from each Head Start school attend the workshop. UCSF has no insight into whether — and how — learnings are shared with other staff members.

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

Understanding our users

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.

Teachers are busy people—keep trainings short, helpful, and realistic

Short and sweet

We already have so many meetings. When schools make trainings mandatory, we have even less time to do other important tasks.

Resources teachers want

It’d be helpful to have a mentor you could talk to or scripts of what to say to better navigate challenging situations.

Keep it real

Trainings are often a bit idealistic, Concepts like ‘lead with love’ don’t help us navigate real-life situations.

Exploring both an MVP and ideal state

Since I was working on a proof of concept, I 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

Conversation role-play

High technical requirements

AI chatbot simulates real conversations so users can gain practical experience

Personalization — tailor practice to specific problems users are facing

MVP: Continued education through 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.

Design style guide

Since Attuned’s goal is to help users learn trauma-informed practices, I chose a blue color palette to symbolize trustworthiness and calm.

Typography

Aa

Montserrat

SemiBold

24 pt

Heading 1

20 pt

Heading 2

16 pt

Heading 3

Aa

Montserrat

Regular

16 pt

Paragraph 1

14 pt

Paragraph 2

12 pt

Paragraph 3

Color palette

Components

Primary button

Secondary button

ON

OFF

Scenario

Select an option

Highlighted option

Option

Option

Option

Option

Option

Option

Logo

Reflection

The lessons allow training participants to continue practicing TAP concepts, while also introducing them to staff who hadn’t been able 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.