Vancouver Foundation collage


Vancouver Foundation

Responsive site redesign: Telling the stories that connect and engage.

The Vancouver Foundation, a non-profit community foundation that focuses on connecting and engaging people and communities, came to us looking for a new way to showcase their work, the people and communities they help, plus their impact on our communities. They needed something fresh and responsive that was a stronger representation of their organization.

Project Highlights
Group 11 Created with Sketch.

Content strategy & design to feature the human impact of their work

Group 29 Created with Sketch.

Streamlined navigation with clear pathways to key content

Group 13 Created with Sketch.

Highlighting the strategic value of investing with Vancouver Foundation

Group 57 Created with Sketch.

Improved search, automation, and donation capabilities

Content Strategy
Digital Strategy
Discovery Facilitation
Information Architecture
Technology Consulting
User Experience Planning

Content strategy & design to show real human impact

We redesigned the Vancouver Foundation with a goal of showing grantees and funders the real human impact and strategic value of working with the Vancouver Foundation, as well as making a clear pathway for the different audience groups to quickly and easily find what they need.

To bring more current content to the Vancouver Foundation homepage, we introduced a collaged banner that displays photos from recent stories. On first glance, the photos show the human element of the Foundation’s work. The teasers are revealed on user interaction, which has a dual purpose of keeping the home page design clean and uncluttered, the navigation easy to find and a focus on strategic content. The interactive component also deepens engagement with the user.

Vancouver Foundation responsive homepage
Vancouver Foundation's new home page uses a collage of imagery to show their community engagement, combined with blocks highlighting links to key content to create quick pathways for their users.

Streamlined navigation – creating clearer pathways to key content

We needed to make it clear and easy for site visitors to find their pathways, so blue navigational blocks have been interspersed in the collage to provide quick links to key content, or content that meets their specific needs. The main navigation is on a clear uncluttered white header, and additional navigation can be found on a deep footer that highlights the most searched for items, or content that Vancouver Foundation wishes to bring to the forefront.

We thought it was important to surface the voices of Vancouver Foundation partners, to hear in their own words how Vancouver Foundation has helped bring about more healthy, vibrant, livable communities. Where the old design often featured a solo image, it is nice to see the new design with all the smiling faces of their partners, representing the way Vancouver Foundation brings people together.

Working with Affinity Bridge on our new website created a huge set of opportunities for us and we are absolutely delighted with the results!

Rebeccah Mullen, Manager, Communications, Office of the President, Vancouver Foundation

Highlighting the strategic value of investing with Vancouver Foundation

Through content strategy and design, we revamped Vancouver Foundation’s Our Work and Giving sections to explain the strategic impact of working with Vancouver Foundation, explaining how they work, using storytelling to showcase funded initiatives, and communicating that Vancouver Foundation is a large organization with a lot of reach,  and can be entrusted to distribute the funds to where they are needed most. 

Vancouver Foundation Our Work and Give page screenshots
The Our Work and Give pages have been redesigned to showcase grants in action, and reinforce the strategic value of investing with Vancouver Foundation.

Improving search, automation, and donation capabilities

Another priority was to update the website search. We started by developing a new strategy for tagging content across all content types. We then supported Vancouver Foundation in recategorizing their content. We built a feeds importer that consumes content from feeds from Vancouver Foundation’s internal system and creates nodes on the Drupal site that will stay in sync with their system.

Then, we introduced a Search API Solr Search for their main site search, publications, granting history, funds for individuals, and funds for charities. Some of the benefits of updating the search are:

  • You can now search for a staff member and get their contact information via the site-wide search.
  • FAQs are being indexed, which helps people access this valuable information.
  • Personal donations pages are now searchable and more customizable, as they are now Drupal content.
  • Users can now use search facets to help help narrow search results based on topic, program, type.
  • It is now easier to donate. We added a fund search sidebar block in the Give section to help users quickly find the fund they’d like to donate to and optimized and decluttered the path to entering your credit card.

Many kudos to Vancouver Foundation for undertaking a very significant overhaul of their content. It was wonderful to work with a client who was so willing to take up the cause of refining their content and dispensing with extraneous items. The combination of a clear content/taxonomy strategy and a better search capability have made this site much easier to navigate.

Other Projects We've Done With Vancouver Foundation

Vancouver Foundation Vital Signs

Design and development of an animated website showcasing the stats from a province-wide Vancouver Foundation survey on the quality of life in BC.

Connect & Engage Survey of Metro Vancouver

Design and development of an online version of a report on the state of community life in Metro Vancouver.

Vancouver Foundation's DTES Small Arts Grants

Design and development for Downtown Eastside Small Arts Grants — one of the granting vehicles for Vancouver Foundation funds.