The site is built using a flexible system of content blocks, allowing each page to be uniquely assembled by pulling in elements from different areas of the site to showcase the most relevant information.
To bring visual interest to the site, we developed a graphic system that pairs brand colors with photographs, masked using cropped and scaled versions of the organizations’ icons. These graphics are placed throughout the site to add variety and break up dense text content.
Because The Housing Collective doesn’t have an in-house designer, we made ease-of-use a priority. We built a custom graphics generator in the site’s backend, allowing users to quickly create these visuals by simply uploading a photo, choosing an icon, and adjusting scale and rotation.
To help The Housing Collective showcase the impact of their work, we designed a dedicated section for highlighting case studies and reports. Entries can be filtered by topic and initiative, and a simple toggle allows each one to be featured more or less prominently depending on its importance.
Each impact entry is powered by a highly flexible content builder, enabling editors to incorporate a wide range of elements—large number stats, detailed charts, images, videos, blockquotes, scorecards, and even content pulled from other areas of the site.
The Housing Collective serves as a central hub for housing organizations across Connecticut. To support this role, we built a resource library, making the site a go-to destination for collaborators seeking information on advocacy, training, policy, and research.
The Housing Collective website acts as the foundation for each initiative’s sub-site, sharing the same design system and code base. Each sub-site features its own custom color palette, graphics, and a tailored selection of content blocks. Editors can create unique pages specific to a sub-site while also pulling in global content from the main site, streamlining updates and reducing duplication.
The success of the new website and refreshed identity led The Housing Collective to extend the collaboration into print. We went on to design a range of materials, including in-depth reports, onboarding documents, and informational flyers.
