Headstrong
Headstrong is a New Zealand based app that uses character guides to engage young people in mental wellbeing content via messenger chat. Teaching practical skills based on cognitive behavioural therapy, positive psychology, mindfulness, relationship science, and harm-minimisation strategies.
Case Study
The challenge
In 2022, Headstrong partnered with Edition to expand the user experience of their youth-focused mental health app by developing a new course. The course, originally called Physical Activity and now known as Move, was our starting point.
With an amazing team of research fellows, Doctors in Psychological Medicine and Māori culture advisors at the University of Auckland we jumped right in.
The goal was to create a way for users to track their physical activities, receive notifications for upcoming activities, and earn rewards for completion.
Beyond these core features, we aimed to push the concept further by rethinking how users engage with the app's chat guide and develop new skills.
Key questions drove our design process: How can we help users navigate the skills effectively? How can we categorise these skills for easy access? And how can we update the app's UX/UI to provide a more intuitive experience, with room for future scalability?
The idea
We developed a scheduling feature that allowed users to schedule custom activities in a calendar widget. This required designing entirely new UI elements and user flows. It was crucial that the interface supported a conversational tone, maintaining the app's guiding voice to help users feel encouraged, at ease, and engaged.
We also introduced the concept of 'Skill Sets' within each course, with individual 'Skills' that users could learn. A key challenge was creating unique illustrations for the hundreds of skills—ensuring each had its own distinct visual within a new colour family. To maintain the brand's authenticity, we avoided using AI-generated imagery, preserving the human touch and preventing the app from adopting an artificial or generic feel.
We established a completely new colour palette that complemented the existing brand. The palette included Blue, Green, Pink, Yellow, Magenta, and Teal, with five gradient shades for each colour. This cohesive system allowed us to produce illustrations efficiently, with each one taking under an hour to complete.
The next phase
Following the successful launch of the new Physical Activity course (now called Move), we received overwhelmingly positive feedback from users, including members of Headstrong's youth advisory board, medical professionals, and app users on the App Store and Play Store.
One iOS user shared: "So far, I think it’s a great tool for young people and older people alike to learn to manage their own emotions and sometimes learn to step away from social media for a while."
Building on the success of the Move course, the next phase was to apply what we learned to enhance all the other courses in the app. We developed updated design systems for both mobile and web platforms, introducing a new UX/UI that gave each course its own homepage. This included updated course names, new illustrations, and clear communication of each course's content, skill sets, and individual skills—all with custom illustrations.
We also reimagined the navigation, onboarding, and conversational flow, adding new features like favourites, course previews, and skill set screens. Updating the course copy was a key part of this process, ensuring that the language aligned with the new UX design and enhanced the overall user experience.
Awards
Year
2023
Team
Edition
Client
Headstrong
indigo Awards
Gold - Apps for Social Change
Gold - Mobile App
Silver - Digital Tools and Utilities