Philanthropy Colorado

A redesign of a statewide nonprofit's website, built on one finding: nobody could find anything. Live, built by a partner firm from our Figma documentation.

My role

Co-designer, with By the Pixel's Chief Design Officer

Team

Two designers

Deliverables

Wireframes, Mobile-responsive design system, High-fidelity designs

Rural Funders Learning Network page
Programs and events page
Philanthropy news and resources page
Impact page with by-the-numbers stats
About page fragment with history timeline
Arts and culture page fragment

About Philanthropy Colorado

120 members, one front door

Philanthropy Colorado is a 501(c)3 membership organization that brings people, information, and resources together to strengthen communities across the state. More than 120 organizations belong to it, from foundations and corporations to public agencies.

The organization had outgrown its website. By the Pixel was hired to redesign it, and I co-designed it with our Chief Design Officer. This case study covers the research, the architecture, the visual identity, and the handoff.

Redesigned Philanthropy Colorado homepage: hero over Colorado mountains, member logos, and 120+ active members

The problem

A welcoming mission behind an unwelcoming site

Stakeholder interviews, a content audit, and a review of peer organizations all came back with the same finding: nobody could find anything. Navigation had grown piece by piece, content was disorganized, and inconsistent visuals made the site feel colder than the organization behind it.

We worked from one rule: fewer clicks. Whether someone came to join, register for an event, or find a resource, the path had to be short and obvious.

Philanthropy Colorado site header with primary navigation
About mega menu: mission summary, section links, and a featured story
Membership dropdown links
Engage dropdown links
News and resources dropdown links

Information architecture

Four sections instead of a maze

The old structure had grown a page at a time, until finding anything meant already knowing where it was. The audit and interviews showed what people needed and where the structure failed them. The fix was consolidation into four top-level sections: About, Membership, Engage, and News & Resources.

We kept the contextual sub-navigation members already relied on and modernized it, which made the site easier to get around and easier for staff to maintain.

Philanthropy Colorado logo
Fonts: Archivo Narrow and Roboto Flex specimens
Color palette: light, black, primary purple, teal, and green, with three accents
Button styles
Design elements: line-pattern shapes
Components: blog card, filters, event list card, and contact form

Visual identity

Energy the brand already had

The organization had plenty of personality. The old site just didn't show it. We used blocks of yellow, purple, orange, and teal to put the brand up front, soft neutrals to keep pages calm, and confident type to hold it together.

High-contrast buttons, badges, and icons add character without getting in the way, and the system has room for new content and programs.

Content library

One hub for everything they publish

Blog posts, news, and resources used to sit in separate corners of the site. Now they live in one content library that also serves as the organization's thought-leadership hub. Filters, tags, and clear categories help people find a policy update, a news article, or a downloadable guide, and one library is easier for staff to maintain than three.

Home page hero ticket card from the Figma handoff board
300px spacing measurement
Ready-for-development note with menu guidance and author
Annotation pin 1
Annotation pin 2
Annotation pin 3
Numbered annotations: hover state, infinite scroll, and room accordion

Handoff

Documentation a dev team can build from

We designed the site but didn't build it. Philanthropy Colorado belongs to a consortium that requires members to use a specific development firm, so the handoff was the deliverable. The Figma files hold everything that firm needed: component behavior, responsive layouts, accessibility notes, and styling guidance, annotated in place.

Outcome

Live, built from our documentation

The site is live. Because the consortium's development firm built it, our Figma documentation was what we delivered, and the built site follows the design: the four-section navigation, the single content library, and the new visual identity.

See the designs.

View the Figma file

Contact

Fill out the form and I’ll get back to you ASAP. Or email me directly at jesse.bisignano@gmail.com.

Jesse Bisignano smiling