Back to our work
WEBSITE DEVELOPMENT

Timeout Toolkit.

We Are With You is a national charity that helps people overcome difficulties with mental health and substance misuse. We Are With You required a digital service that could help make self soothe tools more accessible. To achieve this goal, we successfully built an online resource to help people better manage their emotions through self soothing activities.

With You Timeout Toolkit Image
Client
We Are With You
Who they are
We Are With You is a British charity that helps people make positive behavioural changes, most notably with alcohol and drug misuse, and mental health.
What they do
They provide free, confidential support with alcohol, drugs or mental health via their local services and online.
Location
Great Britain
Requirements
Build an accessible digital tool that provides informative support for those experiencing mental health problems.

Problem

Many people who experience anxiety and depression do not have immediate support available when faced with challenging emotions. We Are With You wanted to create a digital tool that could help guide people towards activities which could help them feel the way they would like to.

Result

Collaborating with Thrive by Design, we worked with We Are With You’s key stakeholders and their users to identify needs. Using ideas created through co-design workshops, we successfully built a digital tool, Timeout Toolkit - that enables users to find support for managing their emotions through self-soothing activities.

“Thanks so much to you and all the team's hard work on this. You have been a pleasure to work with on this project!”
Agnes Wootton, Service Manager, We Are With You

Discovery & Co-Design

In this phase, we worked with Thrive by Design to conduct research and co-creation workshops with potential users and mental health professionals. These workshops helped us create sketches for the prototype allowing us to better understand the concept and benefits of the toolkit and the features that users would like to have available.

Before running the workshops, we engaged with attendees to understand any access needs, and to set the right conditions for the workshops - ensuring they would be inclusive, accessible and comfortable for those joining.

With awareness of how mental health can be a sensitive topic, we encouraged users to take breaks or reflect on actions they could take before, during, and after sessions for their self-care.

User Testing Illustration

Prototyping & Testing

Carrying out the research and co-creation workshops enabled our designer to create a prototype based on the ideas shared throughout the workshops and some of the most valued aspects of the sketches.

We presented the design to users and experts so that they could understand the features, interface and functionality. Testing the prototype helped us clearly define the functionality required by our development team to turn the prototype into reality, ready to be deployed online within We Are With You’s architecture.

Timeout Toolkit Webflow Screenshot

Design

Using the visual brand guidelines provided, our designer was able to create a logo for the Timeout Toolkit. Our designer used We Are With You’s primary branding colour and font to ensure the Timeout Toolkit was recognisably the same brand.

Designed with the target audience in mind, the logo design includes plenty of white space to avoid an overwhelming feel, whilst swirling lines add focus and warmth to the calming, blue background.

Timeout Toolkit Logo

development

We worked with We Are With You to identify the best CMS and hosting solutions to meet their needs. We agreed to go ahead with Sanity.io which enables We Are With You to easily customise, manage and update the Timeout Toolkit themselves. We used React for the front end and Vercel for hosting.

We carried out further user testing and quality assurance testing and with another round of iterations - we successfully populated the tool in time to meet their deadline.

Technology

We used the following tools and technology to develop the website:

  • React, Next.js - Frontend
  • Sanity.io - Content Management System
  • TypeScript - Languages
  • Vercel - Hosting
  • GitLab - CI/CD pipeline

the finished product

In April 2022, the Timeout Toolkit went live on We Are With You’s website. Since going live, we have responded to We Are With You’s request to make a few minor amendments. We successfully changed the header background and updated the ‘Get Help’ button to help triage users to more specific help pages.

Throughout this project, we thoroughly enjoyed working with the team from We Are With You and feel grateful to have worked with a charity that helps so many people. It was great to collaborate with the Thrive by Design team again, and the ideas shared by We Are With You’s users and mental health professionals were essential in helping us create a tool with the end user in mind.