Vancouver Foundation 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.

Designing for storytelling

Often we begin projects by inventorying site content to gain a better understanding of what we have to work with. On this project we were struck by the beautiful content in Vancouver Foundation magazine--stunning photo assets and inspiring grantee/fundholder stories--and how the homepage, in particular, was doing doing a really poor job of telling these stories. The homepage was too static and didn't convey the Foundation's energetic personality or the impact of the work they are doing.

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.

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.

Improving search, automation, and donation capabilities

Another priority was to update the website search. The old site was using a Google search and the results were sometimes confusing, since Google was often indexing a listing page and the search was returning results for other Vancouver Foundation websites. Vancouver Foundation was using an aging system for for surfacing granting history and facilitating the search of funds held at Vancouver Foundation that needed to be retired.

To remedy these search issues, 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.

User testing

Leading up to the launch we did in-person task-based user testing on the site. This piece was instrumental in shaking out bugs related to wayfinding. Our helpful test users pointed out many places where we added text-based instructions to support the goals we are trying to achieve.

After months of working on a project and seeing the same interface every day, there’s no substitute for fresh eyes in determining if you’ve met your goals. Big thanks to our lovely testers that gave such valuable insights.

Technical challenges

There were a few technical challenges we worked through, like the custom Packery layout on the front page. It is responsive and will display or hide the tiles according to the screen size, while always keeping the ratio of the tiles to fully fill up the width & height.

Additionally, developing the importer proved more complex than anticipated. We’ve done imports many times, but on this project we worked with 4 different feeds that populate related content types and are refreshed on an ongoing basis. We did a lot of tweaking to get to a point where we were confident that the importer would keep on working without intervention.

The results

The Vancouver Foundation’s freshly redesigned site was launched last week, and we’re proud of the work we’ve done for this great client. Here’s what they had to say about the project:

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

They helped us with every phase of the project from start to finish.

From our early discussions on scope and feel, to exploring complex technical solutions for presenting a huge volume of data and information in a new way, Affinity Bridge empowered us to participate in decision making without bogging us down with too much detail.

We really enjoyed the discovery process which ensured that our ideas and goals aligned fully with our communication needs. We had many goals to achieve with our update, and Affinity Bridge had an expert on hand for everything we needed – from strategic design advisors to advanced data management developers.

We met weekly to check-in on project progress, and to provide regular feedback as the project moved forward. Affinity Bridge was extremely responsive and engaged and did an excellent job of collaborating with multiple internal and contractor stakeholders at Vancouver Foundation who were responsible for different aspects of our project.

Our new design is not just modern, beautiful and functional – it gives us a rich new platform with plenty of room to grow and share as we approach a major milestone - our 75th birthday!