Cotton On Foundation
Painting a picture through real-time data with the Cotton On Foundation.
How do tote bags and water bottles improve education for children in developing communities?
When it comes to changing the world, few people think of water bottles, tote bags, mints, or tissues. But those are the building blocks of global change for the Cotton On Foundation.
The Foundation–the philanthropic arm of the Cotton On Group–sells each of these products at point-of-purchase in over 1,500 stores around the world. One hundred percent of the proceeds go towards empowering youth through improving education in developing communities.
Since 2007, the Foundation has raised over $67 million dollars for educational projects in Uganda, South Africa, Thailand, and Australia, processing around 40,000 purchases per day. Now, the team is working to create 20,000 educational placements–or versatile school resources to support multiple children–by the year 2020.
Understandably, the Foundation wants to tell these stories and communicate their impressive progress on a range of projects: around the planet, in real time.
The problem
The Cotton On Foundation wanted a clear and compelling way to communicate their goals, achievements, and project progress. With a better understanding of how, and how much, every sale improves the planet, staff and shoppers are more likely to support each initiative.
The approach
Articulate the contribution of every Cotton On Foundation purchase, in real time. A picture may be worth a thousand words, but live data can be even more valuable. Each project–and the overall donation mechanic which facilitates the Foundation's impact–must be clearly summarised with current information.
The end-game
In the words of the Cotton On Foundation? An 'awesome website that's up there with the world's best'. Specifically, one that tracks each dollar to articulate the Foundation's impact around the world and ultimately prompts greater support for an incredibly worthwhile humanitarian cause.
The challenge was to show the full journey, from in-store purchase to humanitarian outcome, rather than just communicating the end results.
POWER IN NUMBERS
Data doesn't lie, and it creates a living, vibrant narrative that is constantly updating.
Given the constancy of the Foundation’s fundraising efforts, it’s more powerful to convey progress through live information than with static words or imagery. Imagine the impact of real-time insight into money raised, opportunities created, purchases made, and more.
Working in partnership with the Foundation’s in-house development team, we created a web service to pull live sales data from stores around the world which feeds into the website’s front-end. The website’s cache is automatically refreshed whenever the data updates–every three hours–to ensure content always loads rapidly. This way, people can always view current progress, quickly.
Mapping out the automated data updates.
'One of the challenges in sourcing real-time sales data from a global organisation is managing the conversion rates associated with local currencies.
To ensure accuracy and consistency across all inputs, all sales data is filtered through an automated currency converter before publishing.’
Jon Trumbull, Senior Systems Developer
Once we had a technical solution for sourcing real-time data, the next challenge was to visualise the information so it is clear and engaging.
'To make the transitions feel seamless, we used a pajax plugin.
Instead of pages reloading every time you click a link–which can feel stilted and clunky–we intercept the reload request and use ajax to change the page content. As the page reloads, we display the animated progress loader, which pulls information from Cotton On Foundation’s international sales data.’
Kurt Smith, Senior Front End Developer
Putting the foundation on the map
An interactive project map highlights the Foundation's far-reaching global impact, while making each initiative 'feel' more tactile.
Every Cotton On Foundation project is dynamic and exciting. Each one creates real-world impact, so it’s important to make the experiences feel real, even through a screen.
3D rendering adds a sense of depth to the viewpoint and creates a more realistic landscape for the map. Each element rotates on the X-, Y-, and Z-axis to offer a subtle floating feeling, as if you are looking down on the world from above.
When you select a project to view in detail, zoom transitions create a sense of physical movement, as if you are dropping in to each location to view specific initiatives in depth.
Data can be a powerful storyteller, but figures shouldn't substitute the human fingerprint. People and places are the heart of the Cotton On Foundation.
GET A SENSE OF GRASSROOTS CHANGE
The Foundation has an incredible library of high-quality videos and photography, so it made sense to build and design with a focus on bold imagery.
Full-screen, image-based navigation showcases these assets at every opportunity, while large, bold header panels put clear emphasis on people and communities.
360-degree photos embedded on project detail pages offer an immersive view of each environment. Expandable galleries provide a further glimpse into building developments and progress as it unfolds.
Get a tactile sense of a real Cotton On Foundation site.
PUTTING CONTRIBUTIONS IN CONTEXT
People are more likely to support an initiative when they understand the actual magnitude of their contribution.
With this in mind, we created an on-site tool, ‘the difference an action makes’, to further show how purchases translate into tangible outcomes for developing communities.
Simply choose a product and use the slider to understand the impact associated with different products at various purchase scales.
For example, the proceeds from one tin of mints can provide 28 pencils for school kids. At the other end of the spectrum, 9,726 tote bags equate to 150 dorm rooms for children who live too far to travel to school every day.
SIMPLIFYING DONATIONS
Telling the story of the Foundation's fundraising efforts is one thing, but it's just as important to make the actual donation process clear and simple too.
Fundraising is top-of-mind for the Foundation, so it’s only fitting that it’s on the top of every page as well. As a primary navigation item, the donation form is never out of sight.
Rather than re-directing to another page, the form itself is actually a simple drop-down with as few steps as possible–two in total–to make the donation process straightforward, seamless, and convenient.
Results
- 38%increase in time on site
People are more engaged and staying longer to learn about the Foundation’s mission.
- 54%increase in page views per visit
People are looking through a wider breadth of content to learn about different projects.
- 10%decrease in page load times
Despite all the new functionality, people are accessing content faster than before.
FIND OUT MORE
Head over to the Cotton On Foundation's website now to see how everything came together.
Learn more about the Foundation’s history, check up on their progress, and support them in their quest for 20,000 educational placements by the year 2020.