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

ยฉ 2023 Gracelle Mesina

ยฉ 2023 Gracelle Mesina

ยฉ 2023 Gracelle Mesina

ยฉ 2023 Gracelle Mesina

ยฉ 2023 Gracelle Mesina