The homepage of shorelinecleanup.ca when a person from Manitoba goes to the website.

The Challenge

Get more Canadians leading and joining cleanups around the country.

Client

Vancouver Aquarium's Great Canadian Shoreline Cleanup

Deliverable

Like an ecosystem, it lives and breathes! Check out cleanups near you (when COVID-19 is over) or start your own self-isolation cleanup!

Contributions

Creative direction, UI design system, iconography, illustration

Software Used

Sketch, Mapbox, Adobe Illustrator, Invision

A national initiative making (local) waves 🌊

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 if they lived near an ocean. In fact, a shoreline is defined as wherever water meets land, so that includes the rivers and the lakes that you're used to.

At Engine Digital, we solved that problem by addressing two things: (1) designing a system that makes it easier for people to get involved with shoreline cleanups, and (2) getting people to care by surfacing the wonderful ecosystems that exist right in their backyards. If a user is in Canada, (with permission of course) the website automatically localizes their online experience to the closest city. Let's say that a visitor to the website is Manitoban...

The GCSC map when a person from Manitoba goes to the website.

A clean take on localization 📍

By default, users will see all cleanups happening at the shoreline(s) closest to them, and images of local wildlife that are affected by shoreline litter. If no shoreline cleanup exists, then prompts will appear to encourage them to start one in their community. The GCSC collects data from every cleanup they've had (e.g. types of trash, a cleanup's worth of litter in kg), so we highlighted that at various points of a user's journey. We designed map terrain to be high-contrast and paired it with a set of custom map pins to help users distinguish shorelines much easier.

Style tile of the GCSC redesign.

A design system as detailed as a grain of sea salt 🧂

In developing the design system, we were meticulous with every single detail. We proposed using Tofino as the typeface because it reflected the clean, approachable nature of the brand, and it was created by a local Vancouver designer. All our colours were lovingly named and calculated to contrast well with each other (especially in illustrations) and reinforces accessibility when used appropriately across the site. In designing the iconography for the trash tally app, each icon was user-tested to ensure people understood what each one meant.

In the end, we achieved our goal in getting more people across Canada to initiate more cleanups! If you're in the north, find a cleanup near you.

Previous Project

Next Project