City of Vancouver

Speaking to diverse needs in an international city.




The City of Vancouver Website

The Brief

Ion was engaged by the City of Vancouver to design a new website for the City of Vancouver and Vancouver Park Board. It was the City’s intent that the Park Board website be integrated and that both will have a consolidated look and feel while maintaining their unique identities. This was not simply a re-skin, but an entirely new business model for the City, consolidating core databases and online resources.

The City’s web accessibility standards needed to meet or exceed AA level of the WCAG 2.0 standards. In addition, the use of high contrast typography appropriate point sizes, clear layouts, breadcrumb trails, printer friendly pages, and the ability of the user to change point sizes to suit their needs was intended to enhance the accessibility of the site.

The Strategy

The over-arching strategy was to bring accessibility, clarity, personality and an international flavour to the City of Vancouver website. The website is intended to speak to the broad range of stakeholders of the City, and create an engaging, enjoyable experience that encourages citizens, businesses and government to continually utilize the site.

Enabling citizens to actively engage and comment on topics was an important feature we recommended. We also recommended the capacity of the website to invite residents to upload photos and stories through a user profile that is connected to their neighbourhood.

The design process included a SWOT analysis and our research of competitor websites worldwide. Ion rendered a set of concepts for review by key City staff. A working prototype was generated for final assessment and upon approval the graphic assest were delivered to the CMS production team and programmers for implementation.

The Solution


"Clear, human and user-friendly" are the key words for the solution. When the visitor arrives at the homepage, they are presented with a subtle graphic treatment. Once in a section of the site, the palette changes to the colour of that section letting the visitor know where they are. Images of neighbourhoods around Vancouver combined with cultural patterns and textures convey the rich and varied fabric of Vancouver's citizens. Ion developed an illustration and icon style that helps to convey diagrams, statistics and trivia. This system is used in concert with humanistic language making the user feel at home with the interface.

Mega-dropdown navigation with callouts is intended to provide a good overview of the section and would provide an opportunity for callouts and graphics. Creating an action oriented homepage (business, rec + culture, transportation, recycling/garbage) rather than too many news feeds was key. Social media icons would be used on the home page, but link to a page that streams social media content prior to taking the user off-site. Featuring the 311 call center helps citizens connect with the City should they encounter problems finding what they need, so required strong visibility.

Overall the website is cohesive and fully embodies the brand essence: clear, human, international, mosaic, and edgy.

The Result

Many resources that were previously obscured are now easily found. As a business resource, the time to locate information and the ability of the website to deliver important information has been dramatically reduced. As one of the most diverse cities anywhere, culturally, the website respects and celebrates the various neighborhoods that comprise Vancouver and speaks to a broad community. The website conveys a distinct personality while representing the world-class City of Vancouver well in an international context.


A flexible system of diagrams was established using the “pin drop” as a starting point, with the addition of simple international icons. The website navigation colour palette as well as the text and ground palette serves to create a bright key to information design. Using multiplication to create depth makes the icons and typography stand out even more.


Close Window