Great Canadian Shoreline Cleanup ๐
About the Client ๐
GCSC is a national conservation initiative in partnership with Ocean.org and WWF-Canada
Project Brief ๐
Improve the UX and application process, and build an automated, mobile trash collection system for volunteers to use during cleanups
Business Impact ๐ฅ
Successful website upgrade, and a 171% increase in annual cleanups
User Impact โจ
A simpler and more engaging way to lead/join community events
My Role ๐ฉ๐ปโ๐ป
Lead Designer
The Great Canadian Shoreline Cleanup (GCSC) used to have a problem: why are coastal Canadians the only ones doing shoreline cleanups when every province and territory can take part?
We learned that most people thought a "shoreline" cleanup could only happen at beaches. However, a shoreline is defined as "wherever water meets land", so that includes rivers, ponds, even sewers and fountains. So our mission was to get more Canadians aligned on that definition, and to lead and join more community cleanups around the country through the GCSC.
As a result, we would get closer in accomplishing the ultimate goal of keeping local ecosystems pristine and thriving, while building a community of passionate conservationists.
Trash Data Collection ๐งฎ
The GCSC collects data from every cleanup they've hadโdata like types of trash, exact amount of each type, and a cleanup's worth of total litter in kilograms.
This information is highlighted throughout the site to give an idea of how much trash can exist.
When landing on the site, users see all the cleanups happening at the shoreline(s) closest to them. If no cleanups exist, then prompts will appear to encourage them to start one in their community. Also accompanying this are images of local wildlife that are most affected by shoreline litter; these serve as another source of inspiration and encouragement to participate in a cleanup event.
To further reinforce localization and to lower the barrier in understanding what a shoreline is, we redesigned the look of maps to feel more branded and to be more high-contrast in order to help users distinguish shorelines quicker. Paired with a set of custom map pins, this helps determine the cleanups much easier as well. As you can see in the example below, a Manitoban would have encountered a slightly different GCSC homepage than a Vancouverite (see above).
Their previous application process to create an official cleanup was a major barrier for their volunteers. It didn't use maps, the form was too long, and it was described as "a chore" to fill out. People would either drop off halfway in filling out the forms or decide to set up another cleanup event with a different organization.
To address these issues, we consolidated the form and made it more visually engaging so that users could get excited about the amazing impact they would be making in their communities. We wanted leaders of all ages and levels of experience to have a no-fuss experience when it came to organizing something they cared about. According to the GCSC team, they've broken records every year since launch in relation to how many cleanups are being lead across the nation!
In developing the visual design language, we were meticulous with every single detail. We proposed using a sans-serif typeface called Tofino (named after a popular surfing destination in British Columbia) because it reflected the clean and approachable nature of the brand, and it was created by a local Vancouver designer.
Our colours are lovingly named and calculated to contrast well with each other (especially in illustrations). They reinforce accessibility when used appropriately across the site, and we've designated colour rules: the red hues signify "leading" and gold signifies "joining". In designing the iconography for the trash tally app, each icon was user-tested to ensure people understood what each one meant.
Tablet breakpoint of the trash tally app ๐ฎ
The idea of picking up trash for a day isn't always appealing. However, many testimonials prove that the experience of participating at a GCSC cleanup is more unique, impactful, and fun from any other. From the branding to the application process, we made sure to inject a bit of joy.
Through location services, we customized the GCSC experience right from the get-go. We want users (and budding environmentalists) to see what animals and ecosystems need help in their own backyards. We even localized testimonials so that users could see how others in their communities were making an impact. To remain on-brand on a fundamental level, we also looked to a local designer for the brand typography. The client loved how meticulous we were for this approach.
If you're in Canada, why don't you try joining or leading a cleanup (COVID-19 permitting)? We highly encourage you to out there and make a difference!
View other case studies
Power Smart For Schools โ๏ธA web experience that makes education fun
TuGo ๐บHigh-level prototyping for the future of travel
Rocky Mountaineer ๐Service design for luxury travel
Ocean Wise ๐Digital storytelling for conservationists