Be In The Know

About Be In The Know and Avert

Avert is an international charity that uses digital communications to build health literacy on HIV and sexual health. For over 30 years, they have been a part of global efforts to fight AIDS and achieve the Sustainable Development Goal for Health.

Their Be in the Know website, which we designed and built, aims to educate young people in Southeast Asia and Southern Africa about HIV/AIDS through engaging digital content.

Our work on the site

Avert wanted to create a site specifically targeted at young people. They wanted something that they could engage with and share with their peers. Their focus was ultimately on reaching a wider audience and having a more significant impact.

Design

Our UX expert Richard, and developers Maria and James, worked closely with Avert and users from their target audiences to design age-appropriate content that informed without condescension. 

We took a mobile-first approach, as their users primarily are most likely to access this content on their phones. This included building multimedia elements like videos and quizzes aimed to make health topics engaging. There was also some content for practitioners, and part of the design process was looking at the categorisation, audience hierarchy, and IA to ensure that different audiences were well-served.

Working with Avert’s branding agency, and bringing a designer from our fellow co-operative, Common Knowledge, we developed a powerful visual design focused on vibrant colours, engaging images of faces and social proof.

Decoupled website

Building a decoupled website was vital for end-users. A decoupled website separates the site's frontend (which users interact with) from the backend (where content is managed). 

James created a powerful and flexible backend using Drupal 9, and built the frontend in Next.js to ensure a fast and accessible experience. A priority was optimising for users with limited/costly data access who view and share the site mainly on mobile. Therefore, a lightweight frontend with low data usage and quick page load speeds was needed.  

Using a decoupled site also has added benefits, such as increased security. James's solutions ensured a seamless editorial experience within the technical limitations. This included adding live preview functionality (a feature that is often missing from decoupled websites) and other simple views for content editors.

Interactive Features and engagement

James custom built interactive elements like quizzes, embedded videos, and feedback surveys. These posed some data-handling challenges and all had to be low bandwidth. Our solution? To collect and store responses within the static framework.

We also used lots of accordions to make content is easy to scan. Everything can also be easily shared, with a sharing functionality added to many individual elements, including “discussion starters” (short questions designed for social media).

Accessibility considerations

Throughout the project accessibility was a priority, but further work was needed as we neared towards launch. Our accessibility expert Maria revisited site standards to ensure inclusive, barrier-free access to health information for all users.

We also provided accessibility training for Avert’s content team so they could carry the accessibility work into future iterations of their content.

“I loved working on this project because it's a very serious subject but together we made it engaging through the design, the content and the multimedia and how those elements all interacted. Avert was also very focused on its users, in terms of content and technology, and so that made it a great partner to work with as it left its preconceptions at the door and focused on what people actually needed.” 

Maria, Accessibility Lead