Co-designing a mental health app for children that self-harm
Imaginator is an Android and iOS app led by the Brain Sciences Division at Imperial College London, which will soon be trialled by the NHS. It allows users to listen to ‘mental imagery’ audio exercises, which guide them through an imagined scenario or experience. This, alongside a series of 1:1 therapy sessions, is designed to reduce self-harm in young people.
The UX design was led by Cui-Lyn Huang, and supported by Caylee Farndon-Taylor and Shalyn Wilkins (because of their previous experience designing for minors and vulnerable groups).
In this article we’ll talk through the co-design approach we used, what we learnt in our user research sessions and how we incorporated this into our user interface.
Part one: Co-designing the app
Prior to this project Imperial College London had built a pilot app, however the design hadn’t worked well for younger users. To avoid this happening again, a co-design group of fourteen young people aged 14–25 with lived experience of self-harm were recruited and included in the design process from the beginning.
Initially we ran a series of ideation workshops, facilitated by the psychiatry team, to help us understand the user needs and behaviour from our target audience. These workshops provided insights that otherwise may not have been uncovered, for example ensuring we used inclusive language and navigated emotionally complex topics responsibly.
In group discussion and via sketches the young people came up with a number of creative ideas for what the app might do. In fact one of our early challenges was the large number of divergent ideas being explored. We navigated this by getting the young people to prioritise and vote on their preferred ideas, and to visualise how and why they might use different app features using storyboarding. These storyboards also gave us better insight into the contexts in which they would expect to use the app. For example most participants drew themselves using the app in a private setting like a bedroom, rather than in a public one like the school bus.
Overall, the young people expressed a desire for:
- A playful and friendly mascot
- Personalisation
- Fun (but not childish) visual language
- Ways to express emotions in different ways
- Ways to track goals set in therapy
Part two: User research
Initially we used hand-drawn, black and white wireframes to mock up our user flows and design ideas. Designing and prototyping in this way helped us to ensure that our early research sessions focussed on function and usability rather than the visual design, which we knew the participants had a very specific vision for.
Unlike the ideation workshops our user research sessions were run with just one participant via Zoom. We generally demoed a Figma prototype and asked some discovery questions around a key theme e.g. how users might expect to track their activity. We made sure to always have a therapist with us as a note-taker in case the participant asked any technical questions, or needed any emotional support. We collated our notes in Miro and grouped them by theme to highlight patterns and identify opportunity areas.
One of the things participants most struggled to understand in the usability testing was the naming of the mental imagery. Initially the clinicians had suggested that the mental imagery exercises should be broken into three categories, called ‘Let go’, ‘Coping strategies’ and ‘Goals’. We found that a lot of participants didn’t recognise that these labels were describing types of mental imagery. They might therefore click on ‘coping strategies’ and expect to find features like breathing exercises or suggestions for activities they could do. Participants were further confused when they saw the list of exercises inside the category, which often had abstract names like ‘box’.
To solve this we could have abandoned the IA altogether, and just sent users straight to the next mental imagery exercise. However the clinicians wanted users to be able to self-select, and we were wary of presenting users with a long long list of exercises. What we did do was rename the categories to better explain why users should click on them. For example, the ‘Let go’ category is now called ‘Calm difficult emotions’.
We also added a colour to each theme to help visually differentiate them, and explanatory micro-copy was added to the imagery tab and exercise list.
Part 3: UI development
Towards the end of the project we brought in the illustrator Leroy Farndon-Taylor to design and animate a custom mascot for the app. We also collaborated with Leroy on the colour palette and font selection. He began this process by exploring various colour groups, and then we paired with him for a few days to explore how these worked in our early mockups, and to ensure they met accessibility requirements.
We were all really happy with the final result, which met our goal of being friendly and playful, but without looking too childlike for older teens. In testing participants commented that the use of off-white as a background colour stopped the app from feeling too “sterile” or “clinical”, which was important to the kids we were working with.
Leroy worked with the co-design group while developing the mascot concept by sending them early sketches of different animals that are known for being caring. They were able to give feedback on the designs, and vote for their favourite mascot.
Finally we selected Ruby the dog, and Leroy came up with a number of different animated illustrations to add to the app’s user journeys.
It was interesting how much focus the mascot had during our final round of usability testing, with multiple participants requesting to be able to interact further with the dog e.g. by tapping on it. It could be that the co-design process meant that the participants felt they had collective ownership of the mascot… Or perhaps it’s just really important that a children’s mental health app like this gives you something fun to connect to throughout. This is something we’ll continue to monitor as the app is trialled over the next year.
Conclusion
It was a real privilege to be able to work on the Imaginator app, which could potentially help improve so many children’s lives. It was also really interesting to be able to collaborate on this project as a design group, and alongside the clinicians and co-design group of young people.
Combining in-person therapy sessions with digital innovation allows us to make better use of the resources we have, whilst giving app users the peace of mind that there is always help for them just a tap away.
It is worth noting that generally children who self-harm are not doing it because they want to end their lives, however they are more likely to die by suicide if they have a history of this. Imaginator is just one of the tools currently being developed to try to help this problem, but it couldn’t be more important.
~
This article was co-written by Cui-Lyn Huang and Caylee Farndon-Taylor. The Imaginator project has been funded by Imperial College London and the NHS, and led by clinicians Martina Di Simplicio and Rachel Rodrigues. The other UX designer on this project was Shalyn Wilkins, and the illustrator was Leroy Farndon-Taylor. Huge thanks to the 14 participants aged 14–25 who helped us co-design this app.
This project is funded by the NIHR i4i (NIHR203904). The views expressed are those of the author(s) and not necessarily those of the NIHR or the Department of Health and Social Care.
