Designing digital mental health support with young people
In Barnardo’s Innovation lab we are establishing an online mental health presence. We’ve already shared the context behind this piece of work and a second post where we explain our first phase of user research.
The content of the platform will be determined by young people’s needs. It will give Barnardo’s mental health services the opportunity to connect with a wider range of young people online, not just in person.
Barnardo’s is a well-known charity, and although young people may not know what we do, our presence in schools and communities means that they associate us with trust. This post will explain the use of visual design and the styling updates we made to the Barnardo’s service pages to make sure the platform is a user-friendly space.
Developing a visual design
As a visual designer, it is easy to focus on personal design preferences and current trends. Working directly with the user encourages me to work collaboratively with the end goal of producing a much more user-focused product. It’s this combination of our potential users’ insight and my own experience that helps us to develop something we think will:
- meet user needs
- be possible for us to build
- become a live product we can maintain and iterate
This project is a perfect example of making sure we work iteratively as a team, always putting the user first and being open and honest about our assumptions.
Round 1
In our first user research session we asked children and young people ‘What does digital mental health support mean to you?’ We wanted to understand what type of content young people would expect to see on a digital mental health platform.
They highlighted a need for a visual design focus:
- ‘Content needs to be visually appealing and not text heavy’
- ‘Content needs to be regularly updated (images and text)’
- ‘Diversity of experiences and images are important, both regarding background and mental health experience’
From these comments and discussions, we created 2 versions of designs to be shown in round 2.
Round 2
For our initial designs, we wanted to share:
- a homepage
- an example service page
The homepage includes information about the site, a service search and a video. The example service page shows information and details about a specific service.
Versions of these pages already exist on the main Barnardo’s website, but we wanted to understand if/how they could help young people.
We also developed a second set of designs, which took into account the feedback we gathered in round 1.
For design A we used a template based on the Barnardo’s design system. The system is made up of reusable components and was designed in 2018. These components include fixed colours, typography and layout. The digital context was different 4–5 years ago, and after showing design A to our young people, we found the templates might not be right for our project.
For design B, we updated the template; this breaks away from the current visual design, while still retaining the functional and practical fundamentals of the design system– including accessibility.
Our aim was to present our focus groups with a design that was ‘visually appealing and not text heavy.’ To do this we introduced a calm, neutral colour palette and removed what we thought might be excess content. We made sure that any images showed a happy, diverse group of young people — to create a welcoming and positive space.
We changed the video of a service worker, to a placeholder video of a young person, as we wanted young people to have a space to share their experiences with others. In one group a young person pointed out that the girl in the video was their age, which was more relatable.
The feedback from young people for design A confirmed our thoughts that it wasn’t very user friendly.
“I think it’s more the way it’s laid out. It doesn’t really look like a website that teenagers specifically like 15, 16, 17 year olds would enjoy reading. I think maybe, they’d just open it and think maybe it looks like a bit of a chore to read…”
There were thoughts on how both versions could be improved, but in general, the group preferred design B. They commented on the calmer colours, engaging headings and more inviting images.
This was as an improvement on the existing, ‘classic’ Barnardo’s design, and we thought there was enough of a consensus — from users and within our own team — that design B should be our starting point for future design investigation.
Round 3
For round 3, we took on board the feedback from round 2, and created three designs for mobile/ smaller screens.
The designs we’d shared up until this point had been on desktop screens, as they were based on existing service page layouts from the main Barnardo’s website — where young people are not the primary audience.
When we spoke to young people in our research session, they mentioned websites and apps that they use every day, for example Netflix, WhatsApp and YouTube. We knew our work needed to be different, designed specifically for them: we suspected that young people would look for support on mobile devices so also needed to create designs to reflect this.
We used a variety of icon styles and changed the order of the content across the three homepage designs. We kept the calm colour palette and style of imagery — to double-check the positive responses we’d already had — but in designs combined with other layouts .
“I think I quite liked the colours … it just feels like friendly and not overwhelming.”
When choosing the colour palette, we made sure that they each passed the accessibility standards that we use when adding any new content to the main Barnardo’s website. We use a website called WebAIM and work towards an AAA pass which is the highest pass rate.
When we make design suggestions, we need to think about all potential users and not just select bright or familiar colours if they are suggested to us — again balancing a combination of feedback and our team’s experience.
Young people commented that the order of content on version 2 was confusing.
“…it’s quite a lot of information and stuff before you hit, like the stuff like the, the chats and like the support… it’s basically quite lost and down, but I think the search bar is quite good.”
The illustrations and articles stood out in version 3. Young people mentioned they found pictures “cringe” but preferred illustration/cartoons.
We received varied feedback with version 3 receiving the most positive ‘votes’.
Designing our first iteration
Throughout this first phase of research and design we worked through an iterative process loop of feedback — design — action. We will continue working in this way as the project develops and as we add more content to the site.
For public beta, the site consists of elements we think will be the most useful:
- a homepage
- a service finder
- a way to find ‘other’ help — where Barnardo’s doesn’t offer something at present
- a research sign-up page — to help us find new users to speak to about the site
There is content from the prototype designs that aren’t on the site, as we need to understand more around what these could include and how they might work in practice. It’s important we know more about if and how young people might use any additional features before implementing them, especially where there could be significant costs — including maintenance — for Barnardo’s.
As Hector explained, we plan to collect live feedback on the site to help us do this.
What’s next
We’ll post more in the coming weeks, explaining how we worked to understand what our online support might be called.
Amy is a visual designer in the Barnardo’s Innovation Lab team.
Follow the lab on Medium to get the latest on all our work.
