Vision Vancouver Redesign
Affinity Bridge was a collaborating partner in the Vision Vancouver website redesign, leading up to the 2011 Vancouver municipal election, which saw the Mayor and all councillors, and park and school board trustees running (re)elected. The redesign included numerous features including an interactive map, and a new custom theme.
We partnered with a few of the other progressive web development, design, and strategy firms in Vancouver for this project, including Agentic Digital Media (general support/development), Codename Design (web design), and Communicopia (strategy), to help Vision Vancouver reach their goal of relection in the November 2011 municipal elections.
Our work focused on the technical development and design implementation for the revised site which was already built using the Drupal CMS. We integrated several external services for social media and donations, and built custom features to help communicate Vision's platform and achievements to date.
Notable features we developed include:
Custom Drupal theme
We translated the design from Codename Design into a stunning and dynamic custom Drupal theme, that communicates the style and mandate of Vision Vancouver.
Animated, interactive map-based tour of achievements
One of the most dynamic features of the site is a custom interactive map which shows citizens the achievements Vision has delivered on one of their core areas, and their locations around the city. The interface is animated to show achievements for each of Vision's four core areas, pause and play the animation, and lead to more about the achievements.
Custom Megamenu module
Vision Vancouver's website serves several purposes such as: centralizing campaign material particularly during elections, communicating information about their platform and achievements, and integrating with social media, donations, and other third party services. To help users find their way to the information they're seeking, we built a custom menu which allows some basic information and campaign material for each section to be displayed prior to the user clicking through. On the section preview, they can view a message and image about the section, use shortcuts, or evaluate whether they will find the information they're looking for in this section.
