Mapping out a better digital experience for passionate envrionmentalists 🦭

Mapping out a better digital experience for passionate envrionmentalists 🏝

Mapping out a better digital experience for passionate envrionmentalists 🏝

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.

Default homepage on launch 🚀

Launch state of the GCSC homepage

Dynamic Localization 📍

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).

Default homepage for people near Winnipeg 🦊

Our dynamic hero surfaces local animals and ecosystems

Instead of a traditional hero, we wanted to relate to users right away by showing them the animals in their local ecosystems that are affected by shoreline litter.

Example map of Winnipeg 🧭

Shoreline Cleanup Map for People in Winnipeg

We used "Pacific Teal" to highlight all bodies of water so that one could immediately find shorelines. Pins indicate cleanups that they can join.

Making It Easier to Be a Leader 🚩

The form that cleanup organizers need to fill out

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!

First page of the application 🗓

Part of the form that a cleanup leader would have to fill out

Last page of the application ✅

Confirmation page after filling out an application

Turning the Tides on Branding 🌊

Sneak peek of the GCSC styleguide

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.

Illustrations used across the site 🖼

Illustrations of a cleanup group and default starfish avatar

Custom iconography for the trash tally app 🚮

Iconography and UI for trash tally

Tablet breakpoint of the trash tally app 🚮

Tablet view of the trash tally

Project Takeaways – Hold the Plastic 🥡

1. A serious issue (like ocean conservation) doesn't always have to be 🤪

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.

2. Keep it local 🏠

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 Projects

Power Smart For Schools ✂️Making electricity, energy & safety easier to teach

TuGo 🗺Giving people confidence is the future of travel

Rocky Mountaineer 🚂Luxury travel has no (figurative) glass ceiling

Ocean Wise 🌊Storytelling for the next wave of conservationists

© 2021 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina