Conservation Legacy is the third largest non-profit conservation corps program in the country. With eight seperate programs, Conservation Legacy needed a new website platform to showcase the work they do and move people to join their programs.
I worked closely with our team lead to define and lead the development of the platform based on work we had previously done for Herman Miller certified dealers. In about half a year, we launched eight different websites simultaneously.
Flexible templating and navigation
One of the biggest issues the team was experiencing with their previous website was the inability to create and manage content easily. We worked with the team to define a set of “modules” they could use to build out pages using matrix fields.
Each programs needs were different in terms of pages needed. We built a fully customizable navigation setup that allowed each program to add, remove, and reorder pages as needed.
Each site needed to be easily themeable. Choosing to stick to two color variable options, we created a Sass file for each program and defined the primary and secondary color variables before importing the master Sass file.
/* src/styles/conservation-legacy.scss */$primary-color: #4f4c08;$secondary-color: #918c10;@import 'main.scss';
This allowed us to output only the CSS needed for each program, keeping things performant. This also allowed us to easily add a new program to the platform with little configuration needed.
We made heavy use of SVGs to create the torn edges look which allowed us to be able to change the background color based on the variables as well.