View

The Champlin Foundation

Digital

,

Print

,

Identity

,

Multimedia

,

A modern website design for The Champlin Foundation, displayed on both desktop and mobile, featuring a serene sunset background with silhouetted figures by the water.
A modern website design for The Champlin Foundation, displayed on both desktop and mobile, featuring a serene sunset background with silhouetted figures by the water.

Intro

Helping those who do good do more.

Operating as a critical resource for Rhode Island’s non-profit community, The Champlin Foundation commissioned me to build an entirely new website for their organization while also overhauling their content management system in the process.

A brand identity guide for The Champlin Foundation, showcasing logo variations, primary and secondary color palettes, and typography styles in a clean, minimal layout.
A brand identity guide for The Champlin Foundation, showcasing logo variations, primary and secondary color palettes, and typography styles in a clean, minimal layout.

00:00

/

00:00

A brand identity guide for The Champlin Foundation, showcasing logo variations, primary and secondary color palettes, and typography styles in a clean, minimal layout.
A brand identity guide for The Champlin Foundation, showcasing logo variations, primary and secondary color palettes, and typography styles in a clean, minimal layout.

Opportunity

Restorative Functions

As a charitable trust whose goal is to provide grant funding throughout the state, The Champlin Foundation’s outdated website was not reliable enough to serve them well. The client expressed the need for an entirely new build, as well as an updated CMS for grant cataloging. They stressed the fact that this was not to be a lateral move–this was a reinvention both visually and functionally. With this in mind, I began updating the visuals of the brand to better serve their outlined goals. I prioritized highlighting the organization’s heritage while elevating the look and feel of assets for modern applications. Once the agreed-upon identity was solidified, I shifted my focus to the architecture of the site.

A structured sitemap for The Champlin Foundation's website, detailing navigation hierarchy with sections for About, What We Fund, News & Updates, and Apply, presented in a clear flowchart format.
A structured sitemap for The Champlin Foundation's website, detailing navigation hierarchy with sections for About, What We Fund, News & Updates, and Apply, presented in a clear flowchart format.

00:00

/

00:00

A structured sitemap for The Champlin Foundation's website, detailing navigation hierarchy with sections for About, What We Fund, News & Updates, and Apply, presented in a clear flowchart format.
A structured sitemap for The Champlin Foundation's website, detailing navigation hierarchy with sections for About, What We Fund, News & Updates, and Apply, presented in a clear flowchart format.

Development

The Champlin Foundation’s existing website suffered from a mess of unnecessary links and pages that frustrated users. We would pare this down to a minimal amount, allowing for all content to be displayed in sections across five parent pages. Once a site map was approved, I created wireframes that showcased page layouts and site functionality. Part of this functionality included the grand catalog, for which developers would create an easily editable index in WordPress that users could access via search feature. Once approved, we added the skin of the website by injecting color, typefaces, images, and content throughout. After working with the client through eight rounds of revisions, the prototype took its final form and was passed on to the development team for execution.

A grayscale wireframe layout of The Champlin Foundation’s website, showcasing content structure, navigation, call-to-action buttons, and footer details for a clean, user-friendly design.
A grayscale wireframe layout of The Champlin Foundation’s website, showcasing content structure, navigation, call-to-action buttons, and footer details for a clean, user-friendly design.

00:00

/

00:00

A grayscale wireframe layout of The Champlin Foundation’s website, showcasing content structure, navigation, call-to-action buttons, and footer details for a clean, user-friendly design.
A grayscale wireframe layout of The Champlin Foundation’s website, showcasing content structure, navigation, call-to-action buttons, and footer details for a clean, user-friendly design.

Solution

Quietly and Steadfastly

The efforts of this website’s development, along with the new content system implemented for grant cataloging, culminated in a successful rollout for The Champlin Foundation’s website. Launched in February of 2020, this site balances form and function to help modernize the processes of a 90-year-old organization so that they may better serve their community.

A full-page design mockup of The Champlin Foundation’s website, displayed on desktop, tablet, and mobile devices, featuring a clean layout, elegant typography, and an intuitive user experience.
A full-page design mockup of The Champlin Foundation’s website, displayed on desktop, tablet, and mobile devices, featuring a clean layout, elegant typography, and an intuitive user experience.

00:00

/

00:00

A full-page design mockup of The Champlin Foundation’s website, displayed on desktop, tablet, and mobile devices, featuring a clean layout, elegant typography, and an intuitive user experience.
A full-page design mockup of The Champlin Foundation’s website, displayed on desktop, tablet, and mobile devices, featuring a clean layout, elegant typography, and an intuitive user experience.