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.
Brand design
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.