Early ideation
Imaginator was co-designed with 14 young people aged 14–25 with lived experience of self-harm to contribute to the design process. We ran several virtual co-design workshops at each stage of the design process which involved collaborative sketching, ideation, storyboarding, and discussion of ideas, concepts and progress. In group discussion and via sketches the young people came up with a number of creative ideas for what the app might do.
Feature brainstorming
Early on, we faced the challenge of dealing with a multitude of different ideas. To tackle this, we involved the young participants by having them prioritize and vote on their favorite concepts. We also encouraged them to envision how and why they'd use various app features through storyboarding. Given the app's personal nature, our aim was to make sure it could meet a wide range of user needs and allow for diverse forms of self-expression.
Inital mood tracking explorations
Prototyping & TESTING
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.
Low-fi wireframes of primary flow
We translated the hand-drawn wireframes into a low-fi prototype to validate key themes through one-on-one user research sessions on Zoom. We demoed a Figma prototype and asked some discovery questions around a key theme e.g. 'how users might expect to track their activity.' A therapist was always present as a note-taker in case the participant asked any technical questions, or needed any emotional support.
Following the user testing sessions, we delved into a thematic analysis and conducted grouping exercises on user feedback to uncover common patterns in how to further refine our designs.
Grouping exercise & analysis of testing sessions
Insights
One problem area highlighted in usability testing were the naming of mental imagery categories ('Let go', 'Coping strategies' , and 'Goals') inherited from the therapy documentation. Users expected these buttons to take them to different features of the app, as opposed to accessing mental imagery exercises. To solve this, we worked with the clinicians to rename the categories to be more self-explanatory. 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.
UI & Visual design
Towards the end of the project we brought in 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 together we explored how these worked within our early mockups, whilst ensuring they met accessibility requirements.
Alternate colour explorations
Leroy also worked with the co-design group to develop the mascot concept - an aspect of the app highly desired by the users. Once finalised, we integrated Ruby the dog into our final user flows.
We felt the UI successfully achieved our aim of being approachable and engaging, striking a balance that appealed to older teenagers without appearing overly childish.
Lessons learned
- Empowering through co-design
My first co-design experience for vulnerable groups was both fulfilling and enlightening. It was incredibly inspiring to see the participants take charge and shape the design process. They really opened our eyes to the crucial details of working in sensitive contexts, underlining the need for inclusivity in design. Plus, their youthful spirit and wise insights injected a vibrant energy into the project right from the beginning. - Listen to your users' needs, but designers build solutions
The young participants strong enthusiasm sparked many creative and diverse ideas during the initial brainstorming stages. At times, the discussions veered toward incorporating enjoyable features rather than aligning with the core user needs and the most effective solutions. A key takeaway was encouraging a sharper focus on the specific problems or needs we aimed to address, before becoming too engrossed in the method of solving them. - Moving forward...
In order to prioritise the core UX aspects, we opted for a pre-made icon set. Given more time, I would have liked to explore other icon styles that better align with the app's illustrative visual style.
Additionally, we may benefit from conducting a naming exercise with the co-design group to ensure the mental imagery category names are truly intuitive and self-explanatory.
Conclusion
It was an absolute privilege 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 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.
Special thanks to clinicians Martina Di Simplico and Rachel Rodrigues, and the 14 young people who helped us co-design this app.
An earlier version of this case study was published on
Medium, co-written by myself and Caylee.
.webp)
