Amplifying One Water’s mission message to end water poverty

One Water
Child smiling at the camera , in front of a water tap which she is using to fill a yellow container

We created a new, streamlined online presence for fellow B Corporation One Water, the UK’s leading ethical drinks brand. The new website, which was launched in time for their product rebrand in 2019, is faster, cleaner and greener, with a clearer message about the company’s life-changing work to ensure everyone has access to clean water.

“Wholegrain were excellent. They really took the time to understand our organisation and deliver based on bespoke requirements. They were great at collaboration and helping us to overcome challenges – no query too small for them. They have an excellent team who are all experts in their field, and were always happy to share knowledge and expertise.

Jess Homer, Digital Marketing Manager at The One Brand

One Water homepage displayed on a tablet with a mobile phone next to it, displaying the website menu

Visit site

Features

  • Cleaner UX design
  • Impactful Call to Actions (CTAs)
  • Modular content editor
  • Interactive projects map

Results

          659KB  ↓ page size           

(down from 3.1 MB)

0.08g ↓ of C02 per page view 

1.9 secs ↓ page load time

(down by 53%)

Discovering the new brand

We spent a high percentage of the time allocated to this project on discovery, with several meetings to build our relationship with the One team, to get to know the mission and vision their updated brand aimed to convey, and co-create something that would reflect this. We have long been a fan of the One brand, and this was a great opportunity to learn even more about their charitable projects, so that we could help them to clearly communicate this better on the new website.

Two tablet, each showing the one water homepage. The one on the left has the old design and the one on the right shows the new website

Designed for impact

As this was a whole new brand, with guidelines yet to be defined, we were able to take the lead, proposing designs during the discovery process. The One team were quick to provide further requirements and feedback, which meant that we were able to work together effectively to create the new cleaner, more impactful website.

The new homepage design, as well as clear calls to action, now also has blocks that show key statistics on the homepage, highlighting the positive impact that One water has had so far.

Modular content editor

We used Advanced Custom Field (ACF) to create flexible content blocks, so that the One team can easily edit, update, and add new pages to their site as needed. This allows them to ensure the website is up to date with the most recent charitable projects, for example.

Interactive projects map

In order to visualise the breadth of the impact One Water has, we added an interactive map to the projects page. This map shows where in the world One has been working, and whether these are past, current or emergency projects with different coloured pins. The user can zoom in to check the country, and click on a pin to learn more about a project.

Image of 2 tablets. The one on the left and slightly behind show the interactive projects map and the one in the right and slightly forward shows the impact buttons

 

Lessons learned

This project showed us that, while having free reign on creating something new with few guidelines can be freeing, it also has the potential to be daunting. As this web project was part of a wider rebrand, we needed to co-ordinate with a wide range of involved teams include the One brand and packaging teams for consistency across a number of areas including content, style and timing.

However, building a strong relationship and maintaining good communication with the client and all relevant stakeholders throughout the project meant that this was a challenge we enjoyed taking on. We are pleased that the result will help the One team to amplify the work of the One Foundation, and help them to achieve their goal of changing lives for the better.