Center for Climate Change and Energy Solutions

The Center for Climate Change and Energy Solutions (C2ES) is an environmental nonprofit that forges practical and innovative solutions to address climate change and engage leading businesses to accelerate climate progress.

As a support client, C2ES was looking to refresh their homepage to better highlight their 2030 climate initiatives and reach wider audiences. In addition to the homepage, C2ES needed new landing pages and content recommendations for their About section.

SCOPE

Center for Climate Change and Energy Solutions
c2es.org
UX and Visual Design
2 months
Figma, Illustrator, Photoshop, Zoom
Discovery workshop, informal heuristic evaluation, wireframing, UI and visual design, content recommendations

PROBLEM

C2ES recently went through strategic planning wherein they identified a desire to organize their work into three initiatives. Currently, the site is not designed or built to house or reorganize this information.
C2ES would like to reach a broader audience, including potential funders. The About page on the site does not currently reflect the history, work, and focus of C2ES.

GOALS

C2ES wants to refresh the homepage, elevating the 2030 goals of the organization without getting too deep into the site architecture.
Create three new landing pages for content divided into three focus areas.
The homepage and landing pages should fit within the current design system.
Provide content strategy advice for the About section.

INFORMAL HEURISTIC EVALUATION

This project was unique in that we were not conducting a site wide redesign, but integrating primary components, UI elements, and the current navigation system into a new homepage and landing pages. For projects such as this, I typically conduct an informal heuristic evaluation to ensure the design system being carried over is effective, following UX best practices and web accessibility guidelines.

The heuristic evaluation illuminated some concerning accessibility issues with some of the most commonly used components: buttons and content cards. C2ES is an information rich site with hundreds of resources which are available through a content card component. Unfortunately the cards used brand colors and images that were inaccessible, some of which were not responsive in mobile. Buttons also used brand colors, font styles and weights that were inaccessible. Although these items were not scoped for a redesign, I presented my findings and potential solutions to the C2ES team. With their buy-in we were able to adjust the design system to create a more accessible and user friendly design system.

FINDINGS

Current brand colors did not pass web accessibility guidelines
Content cards used brand colors and images that were inaccessible
Buttons, links, icons, and text used colors that were inaccessible

The homepage lacked proper section headings, creating disorder and disorganization
On mobile, content cards were not responsive
Secondary navigation was hidden in a hamburger menu

“[During client presentations Christy] has a very calming presence which is really helpful, especially when you are delivering things that clients can be sensitive about.”

— Account Manager

WIREFRAMES

Once the project team and I were in alignment on the design system updates, I created low-fidelity wireframes based on content, audience goals, and scalability.

VISUAL DESIGN

Once the low-fidelity wireframes were complete and I was waiting for approval, I worked on developing a small but mighty design system. With some minor adjustments the design system employed the current brand colors and font styles in an accessible way, making the C2ES site feel refreshed but aligned with the current brand.

CONTENT STRATEGY

Once development began, I created a 12 page content strategy and recommendation document for the About section. Based on UX research and best practices, the document provided guidance around goals, messaging, hierarchy, and actions.

FINAL DESIGNS

IMPLEMENTATION

Once development began, I created a 12 page content strategy and recommendation document for the About section. Based on UX research and best practices, the document provided guidance around goals, messaging, hierarchy, and actions. Development of the MVP is complete and the website was launched in December 2022.