Water Compass

Strategy
Messaging
Identity
Copywriting
Website Design
Development
Bright pink arrow
Case Study

About the project

Plus sign

Water Compass is a young organization working on (can you believe it?) water issues in southern Uganda. Their goal with this website project was to present themselves as professional and progressive in their field, ultimately appealing to a new crop of individual donors, government partners, and institutional funders. In other words - to git that money.

Screen shot of Homepage from Water Compass website

Strategy

Audience persona questionnaire, filled out by client. Answers are mostly covered up by other images.Screenshot of written profile of "Ashley," the audience avatar for Water Compass. The list includes words like: female, liberal, well-compensated, active, desires purpose, practical, social...
Screen shot of Impact page from Water Compass websiteShort summary of core message Water Compass is attempting to relay: that women and girls should thrive and lead happy, healthy, fulfilling lives.
Screen shot of the Approach page from Water Compass website
Light teal arrow

Audience

Plus sign

NGOs are tricky because there are SO many people that need to be engaged - individual donors, private foundations, government partners, service recipients... It's a lot. Through a series of surveys, discussions, and industry research, we built out three primary audience avatars, and established a plan for how to reach each of them through design and messaging.

Light teal arrow

Story

Plus sign

As a relatively young organization, Water Compass isn't (yet) able to wow donors with huge numbers of people served. So we shifted the story from breadth to depth, telling the individual stories of those impacted by the work they do. To resonate with their target donor—a proud liberal feminist—we focused on how women and girls are affected and empowered through their programs.

Light teal arrow

Positioning

Plus sign

There are lots and lots of water aid organizations out there. Probably most of them are great, but very few (dare we say just one?) place sustainability—both financial and environmental—smack dab in the center of their work. Given Water Compass's target audience, communicating the major points of their sustainability model was a no brainer.

Copywriting

Light teal arrow

Storytelling, First

Plus sign

Nonprofit websites are notoriously overwritten - often because the audience is unclear. While facts and figures are important to include, connecting with your average human requires a compelling story to make the issue "real." We brought the reader through a day in the life of Sarah, a typical Ugandan woman and real-life beneficiary of Water Compass programs.

Light teal arrow

Brand Personality

Plus sign

Who wants to hang out with stodgy, data-obsessed NGO nerds? Not me, probably not you, and definitely not that Schitt's Creek-loving, happy hour-organizing 30-something they're trying to wrangle into their ranks. In composing copy, we were careful to use only enough industry jargon to be legit to government and foundation folks, and to keep it light everywhere else.

Photo of Sarah and her children collecting water from a dirty pond, paired with text that reads "The water source closest to her village is unprotected and dirty."Photo of Sarah cooking, paired with text that reads "The food she prepares will be contaminated."Photo of Sarah bathing her child, paired with text that reads "Her family will get skin diseases from bathing."Photo of Sarah holding her daughter, paired with text that reads "Her children will get life-threatening diarrhea."
A screen shot of the "Why Water Matters" page on the Water Compass website. A large photo across the top is of a woman, Sarah, who is walking down a long road, carrying a big jug of water on her head. The caption reads "Sarah walks 3 miles per day to collect water for her family."
A screen shot of the "Get Involved" page on the Water Compass website. The copy reads, "It’s not sexy, but it’s true: the easiest way to make an impact is with your checkbook."

Visual Identity

Screen shot of Homepage from Water Compass website
Before
Light teal arrow pointing down
Screenshot of Water Compass's old website. The colors are dark, images are dingy and confusing, and design is simple and a little boring.
Water droplet illustration
Water
(duh)
Compass illustration
Compass
(duh)
A circular arrow that's interrupted, illustrating the idea of broken cycles
Broken
Cycles
Four diagonal lines, evenly spaced, illustrating the idea of patterns and repetition
Repetition &
Patterns
Water Compass log, white
Swatch of fabric with a rich blue color, close to one of the hues used in the Water Compass color palette.
Swatch of fabric with a bright fuscia color, close to one of the hues used in the Water Compass color palette.
A woman selling fabrics at a market. Her dress and some of the fabric she's selling is a bright yellow color, close to the yellow used in the Water Compass color palette.
Swatch of fabric with a light blue color, close to one of the hues used in the Water Compass color palette.
Swatch of fabric with a deep wine color, close to one of the hues used in the Water Compass color palette.
Swatch of fabric with a cool brown color, close to one of the hues used in the Water Compass color palette.
Fabric swatch with diamond pattern
Fabric swatch with concentric circles pattern
Fabric swatch with diamond pattern
Fabric swatch with diamond pattern
Screen shot of What We Do page from Water Compass website
Light teal arrow

Identity Overhaul

Plus sign

Building a new website often involves some rethinking of the client's visual identity. In this case, it was a big one. We essentially scrapped everything but the name, and started over:  new logo, new colors, new typography, new photography... new new new. We even made some custom patterns for these folks. All kinds of fun.

Light teal arrow

Colors

Plus sign

Our goal with the visual identity (beyond makin' that sh*t cute) was to mirror the vibrancy of communities that have new access to clean water. In addition, we wanted the color palette to be more distinctive than the plain ol' blue adopted by most water aid orgs. For inspiration, I looked to fabric and art from the region and landed on a high-contrast set of "punched-up primary" hues that perfectly suit the WC vibe.

Light teal arrow

Patterns

Plus sign

Repetition and pattern-breaking are a core aspect of the work Water Compass does. It also happens that patterned "batik" fabrics are all the rage in Uganda. I riffed on (read: stole) ideas pulled directly from fabric samples to create a distinct and flexible set of supporting assets that could be used across the organization's entire brand.

Site Design & Development

Light teal arrow

Structure

Plus sign

Planning the structure of a website can be a gnarly little puzzle. Unlike a printed publication, the story you tell on an organizational website needs to be structured in a way that will a) make sense no matter where the viewer jumps in, and b) gently guide them toward the action you want them to take. This requires compelling storytelling, strategic repetition, and clear calls to action on each page.

Light teal arrow

Page Layout

Plus sign

A website should be nice to look at, aaaahbviously. But it's also gotta be functional, y'all. To capture viewers' attention and get them to take action, we established some rules: limit the amount of text in each screenview; pair that text with relevant imagery; leverage the assets created in the design phase (above); and always, always include a clear prompt at the bottom that guides them through the story and lands them on that donate page.

Light teal arrow

Development

Plus sign

The Water Compass team wanted a set-it-and-forget-it type of site. They didn't need the ability to add or manipulate content beyond small text updates to a few content blocks here and there. Webflow was a natural choice over Wordpress or other platforms, because it has a super flexible infrastructure that's also no-fuss. It was quick to build, and requires basically no technical maintenance. Easy peasy.

Screenshot of website mockup software. In the frame are two palettes: one with a site map of pages to be included on the site, and the second with a basic wireframe for planning out the content on each page. Screenshot of website mockup software. In the frame are several pages, connected to one other with blue lines, showing where links and buttons on each page lead. The result is a web of interconnected pages, demonstrating the customer journey as they navigate the site.
Screenshot of website mockup software. In the frame are several tiny pages, fully designed with colors and images. Hovering over the image are four screenshots of a presentation given to the client outlining the visual concepts that will be woven through the site: clear focus (minimal content in each screenview), patterns, circles, and unexpected elements like animation and layering.
Screenshot of the Webflow website builder. Hovering over the image is a zoomed-in screenshot of one of the pages from the site, showing some of the tools within Webflow for building out the page.
Bright pink arrow

Kelly! It was an absolute pleasure to work with you. You are a web design sensei! THANK YOU for all your help and guidance and for giving us an epic website.

Ned Morgan
Water Compass

Wanna chat? Okay, cool.