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 🏝

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 people thought "shoreline" cleanups could only happen at beaches. However, a shoreline is defined as wherever water meets land, so that includes rivers, lakes, ponds, and even sewers. Our mission was to get more Canadians leading and joining community cleanups around the country.

Launch state of the GCSC homepage

Dynamic Localization 📍

When landing on the site, users will see all the cleanups happening at the shoreline(s) closest to them, as well as images of local wildlife that are affected by shoreline litter. If no cleanups exist, then prompts will appear to encourage them to start one in their community.

The GCSC collects data from every cleanup they have and had (e.g. types of trash, a cleanup's worth of litter in kilograms), so we highlighted this information throughout the site to give an idea of how much trash can exist. We designed the map terrain to be high-contrast in order to help users distinguish shorelines quicker, and paired it with a set of custom map pins to determine the types of cleanups much easier.

As you can see below, a Manitoban will encounter a slightly different GCSC homepage than a Vancouverite would (see above).

Our dynamic hero surfaces local animals and ecosystems
Shoreline Cleanup Map for People in Winnipeg
Part of the form that a cleanup leader would have to fill out

Making It Easier to Be a Leader 🚩

The previous application process to create an official GCSC cleanup was a major barrier for their users. It didn't use maps, it was too long, and it wasn't fun to fill out. Either people would stop halfway through the forms or decide to do a cleanup with a different organization.

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. So we simplified the form and made it more visual so that users could get excited about the amazing impact they would be making in their communities.

According to the GCSC team, they've broken records every year as to how many cleanups are being lead across the nation!

The form that cleanup organizers need to fill out
Sneak peek of the GCSC styleguide

Turning the Tides on Branding 🌊

In developing the design system, we were meticulous with every single detail. We proposed using Tofino (named after a popular surfing destination in B.C.) as the brand typeface 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 chosen the red hues to signify "lead" and gold as "join". In designing the iconography for the trash tally app, each icon was user-tested to ensure people understood what each one meant.

Illustrations of a cleanup group and default starfish avatar
Iconography and UI for trash tally
Tablet view of the trash tally

Project Takeaways – Hold the Plastic 🥡

1) A serious issue 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 being 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, whether that was in the copy, UI, or the visuals.

2) Keep it local 🏠

Through location services, we essentially 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 own 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!

Skills & Tools 🧰

  • Brand & Content Strategy, UI, Design System, Illustration, Iconography, Map Design, Prototyping, User Testing
  • Sketch, Adobe Illustrator, Mapbox

My Role ✨

As Lead Designer, I pitched the winning concept, developed the digital design system, and prototyped and tested for both the website and trash tally app.

View Other Projects

Power Smart For Schools ✂️Making Electricity, Energy & Safety Easier to Teach

Rocky Mountaineer 🚂Service Design for a Better Journey

Ocean Wise 🌊Interaction Design for Flexible Storytelling

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina