A warm and welcoming website for Carers

A warm and welcoming website for Carers

client-logo

A new website for the trusted voice of family, carers and supporters in Mental Health.

project-slider
project-slider

Design brief

Tandem is the Victorian peak body representing family and friends supporting people living with mental health issues. Their existing website was not meeting user needs and required a redesign to support its engagement goals.

Digital Garden redesigned the website to attract and grow Tandems member base and act as a platform for their advocacy work. The new design simplifies the information architecture and has a fresh look and feel that is warm and friendly.

A key part of the project was ensuring the website is accessible and catered toward a diverse range of people. The website was designed with Young People, LGBTIQA+ and people from a range of different cultural backgrounds in mind.

project-mosaic-item
project-mosaic-item
project-mosaic-item

Discovery and understanding

Discovery and understanding

The project began with a kickoff meeting with key Tandem stakeholders. Digital Garden learnt more about Tandems users and the importance of their need for simple and accessible support. The workshop also uncovered more about Tandem's advocacy role and how it must support a library of submissions and responses.

Following the kickoff workshop, Digital Garden ran a user groups workshop. This was an opportunity to learn in depth about the audiences that frequent the website. Some of the key insights from the workshop were:

  • Carers are often tired under time pressure, needing clear and obvious pathways to support resources on the website
  • Carers needed an easy way to locate support groups, especially if they lived in regional or rural areas
  • Joining Tandem was not engaging and lacked key information that would convert users to join the participation register
  • Support workers who have lived experience needed to easily find engagement opportunities


Based on the user groups workshop, a set of personas were developed that would be used throughout the rest of the project. The personas included:

  • A full-time carer for her 15 year old son
  • A peer worker with lived experience
  • An ambassador and advocate of mental health
  • A lead researcher at a care organisation
  • A communications lead at Tandem


The tasks, needs and frustrations were mapped out for each persona, ensuring the subsequent designs were fit for purpose.
 

Simplifying the information architecture

Simplifying the information architecture

To achieve the goal of simplifying the structure and language on the website, an information overhaul was performed. This involved internal workshopping to map out key pathways and ensure language was simple, friendly and descriptive.

Some of the key changes included:

  • A new top level menu item titled “Find Support” that acts as a hub for carers and support resources
  • Restructuring the Get Involved section to have logical pathways to Tandems different engagement programs and events
  • Adding Research to the main menu, promoting Tandems growth in this area.
  • Moving unique content out of About and into more findable and logical areas


The IA concept was tested by real users via a method called tree jack testing. This research method measures how easily people can find information on a website and examines if and where they get lost. Test participants were recruited from Tandem’s pool of members and from a broad cross section of users. Testing was successful with adjustments made to areas that had lower success rates.
 

Warm and friendly design

Warm and friendly design

Low fidelity wireframes were created prior to the UI concept. This allowed a rapid iteration of page layout and functionality to best suit Tandems users. Once the wireframes were signed off Digital Garden worked with the project's branding agency to understand the new guidelines and intent behind colour, imagery and shape.

The final design is contemporary yet warm and friendly, making it suitable for the large variety of people visiting the website. It features inclusive and colorful illustrations as well as the use of shape to creatively mask images.

Accessibility was an integral part of the design, meaning text is highly readable and all colour has contrast that adheres to WCAG AA standards. Components and UI elements were designed to provide good user feedback and respond to a variety of accessibility considerations.

Digital Garden created a full suite of desktop and mobile designs for the following website templates:

  • Homepage
  • Flexible landing page
  • Flexible content page
  • Webform
  • Join pages
  • News and events pages
  • Submissions listing
  • Search results
  • Engagement opportunities
  • Support groups
  • Mega menus


The design was iterated several times with the Tandem team and presented to various stakeholder groups. The result is a cohesive set of designs and templates that include a style guide and set of variants for shapes, illustrations and graphical treatments. After the testing with users, a thorough functional specification was produced for the agency developing the new website.

Testing with carers

Testing with carers

To ensure the new design would be suitable for carers, Digital Garden facilitated design testing with 8 carers from Tandems participation register. The sessions allowed users to provide feedback on an interactive prototype of the new website design.

Participants in the testing included Young people, people who identified as having a disability, people of various ages and people from rural and regional parts of Victoria.

Feedback on the design was really positive, with parts of the session measuring usability performing well. Participants were receptive to the new look and particularly pleased with the representation of diversity and storytelling from carers.

“And stories from our members. I think that's a really valuable I guess like section of the website because, you know, as tandem knows as any lived experience organisation knows, it is stories more than statistics that people tend to connect with. So I really appreciate that they've got this element here.”
Laura

“I really like the images on the right hand side… Like, I feel like it represents connectedness and belonging and inclusion, which are definitely values that tandem incorporate into their work.”
Denna

After design testing, Digital Garden iterated on the design by improving identified problem areas. A report was produced that included video highlight snippets from the sessions that allowed Tandem stakeholders to easily view insights without having to go through video recordings. 
 

digital garden

Results

A website that is carer first and truly caters to Tandem's diverse audiences. The new website is more organised, cohesive and accessible which addresses the needs that the defined personas had.

Tandem is very happy with the result of the design and looks forward to seeing the website come to life after it’s developed.