• Work

    Broadbent Institute

    Movement-building through flexible content management

    Visit website
Screenshots of Broadbent Institute's WordPress website and brand guidelines document

Goals

Broadbent Institute needed a brand refresh to better reflect its values and a new website with an easy-to-use bilingual content management system.

  • update branding typography and colour scheme to better communicate the organization's values and improve accessibility to WCAG 2.2 level AA minimum
  • re-design the website for easy navigation and flexible storytelling while applying the updated visual brand
  • leverage WordPress block editor for streamlined and consistent content management
  • make it easy to serve and maintain bilingual content
  • support content migration from the previous website based on NationBuilder
  • streamline communications coming from the website through improved search and content discoverability
  • connect visitors to content migrated to external properties
 

What we did

  • Information architecture & UX
  • Branding design
  • Web design
  • WordPress & front-end web development
  • Accessibility compliance & consulting

Project team

Convening Canada’s left

A leading voice in the progressive movement

The Broadbent Institute is Canada’s preeminent social democratic think-tank that produces original research, convenes progressive dialogues, and trains organizers and leaders to equip social movements working to advance justice and equality.

The institute’s old website made adding new pages and managing existing content a process that required coding rather than just crafting content. It also lacked an easy way to manage bilingual content, excluding French-language audiences. Finally, the institute had outgrown its visual brand and frequently ran into accessibility issues when trying to apply it to new content and initiatives.

Collage of the institute's redesigned website homepage

Updated brand & new website

An accessible and welcoming portal for the progressive movement

With this collaboration being our second with the institute, we were thrilled to get the chance to continue applying our equity-driven design process towards supporting the Canadian progressive left. We already knew that the organization’s visual brand package had a logo version that would serve as a solid foundation for refreshing the rest of the institute’s brand.

Keeping the existing logo variation at the core and applying accessibility best practices throughout the process, we created a fresh colour pallet that connects to the institute’s history while looking toward the future. We rounded out the visual brand update with warm typography that’s also steeped in history and feels contemporary at the same time. Thoroughly documented as brand guidelines, the institute’s staff has the tools needed for applying the refreshed brand across communication channels, with confidence and consistency.

Collage of Broadbent Institute's brand typography and colours Collage of selected pages from Broadbent Institute's visual brand guidelines, including accessible colour combinations and charts

For the institute’s new website, we created modular content elements and patterns and put WordPress to work to make it easy to manage content without having to know any coding nor starting from a blank page. We extended the core block editor experience with a number of custom blocks and repeatable block patterns for an intuitive and robust content management experience.

The new website features a wealth of timely content while encouraging visitors to attend events with fellow progressives. Balancing the need for content curation and reasonable content upkeep time, the website is thoughtfully designed to create areas of automated and manually chosen content, including content from the institute’s external online publications. Finally, the website features additional content navigation and organization elements making research articles easy to navigate and allowing for the creation of campaigns and mini-site-style website sections. All ready to be translated for French-language audiences and designed with accessibility in mind!

Collage of pages and elements from the Broadbent Institute website including content grids, quote, and embedded Action Network form Collage of pages and elements from the Broadbent Institute website including article, event, and staff profiles

I was really impressed with the visual elegance and accessibility of Endoh’s previous work and knew the Broadbent Institute website was in need of a similar online presence — one that carefully balanced accessibility with innovation.

I will emphasize the “collaborative” in your name, because you really made this feel like a collaboration, which was a major positive for us. It was clear that we were both a partner and client as the project went on. From the early days of design ideation to the final site testing, you made this feel like we were working together to achieve something that was worth more than a paycheck on your end, and a to-do list check-mark on ours. It was very validating to feel that sense of collaboration which comes from the foundation of shared values!

Jack McClelland
Communications Coordinator
Broadbent Institute

Explore more projects