Directing young people to relevant content with meaningful design

A number of things have changed within the headspace organisation since the website was launched, resulting in the homepage needing a revamp. headspace has increased the breadth of audiences it services and communicates with, multiple campaigns can be running at any one time, and there is now a greater focus on encouraging young people to create a headspace account since we worked with them to launch my headspace.  

As part of some recent research findings, headspace found that website visitors were more likely to find information secondarily through the homepage so it was crucial for the homepage to become a launch pad to direct website visitors to information they were looking for in a prompt manner and we were keen to work with them to make this happen.

We approached this project as a waterfall project as it suited the context of the engagement, working with headspace’s requirements to provide the best solution both for website visitors and for the organisation. We began the engagement by working closely with the headspace team to understand their requirements and the previous research undertaken that had informed the brief for a redesigned homepage. This then shaped our user stories and acceptance criteria, setting us up for the rest of the project.

The brief provided guidance on the key content topics that needed to appear on the homepage, and using that as a guide our Experience Design team developed two homepage solutions in order to provide options for the headspace team. Due to the number of navigation pathways available to website visitors as they landed on the page, it was important for us to uncover how we could make the experience of landing on the homepage intuitive and avoid overwhelming website visitors with too much information.

We developed two clickable wireframes that were tested with website visitors in order to gain feedback and clarity on the preferred option from their perspective. We also presented the prototypes to the headspace team in a collaborative feedback session to help shape the iterative changes made to the wireframes.

From these testing sessions we learnt:

• Services were easier to find in comparison to the current homepage
• There was a unanimous preference between options 
• Which option provided a more intuitive user experience

The user testing engagements and feedback gave our design team some tangible insights to feed into the iteration of the wireframes with the chosen direction being a banner centrally placed on the homescreen that allows website visitors to select what type of audience group they are a part of and what sort of content they are looking for. In many ways this takes direct inspiration from the user stories that would have informed the design of the site and its layout.

For example:

I am a young person and i’m looking for information about mental ill-health

Once the design direction and layout of the new homepage was decided upon, our Experience Designers worked to apply the headspace brand to the chosen wireframe and create a high fidelity design template ready for implementation on the front end. 

The User Interface and brand application was made easy by the fact that, over the several years of working with headspace, our Experience Designers have been building out a design system and component library that supports consistency in design across the site and other headspace products.
Working with a design system has also increased efficiency in the design process and the communication across the Experience designer and Developers.

Our technical team then developed all of the new editable components utilising the Silverstripe CMS that the headspace site is already built upon, ensuring each was accessible by screen readers and keyboard navigation. We then worked to complete quality assurance testing across the new homepage and user acceptance testing in collaboration with the headspace team prior to launch in 2022.

To provide headspace with data and insights for the homepage, we added a number of custom Google Tag Manager events based on headspace’s objectives to report on key journeys.