Translink

10-Year Vision of Translink

Inside a Translink bus
Alert Circle iconRefresh icon
An example of a mobile responsive website that meets or exceeds WCAG 2.0 AA level accessibility (standard at the time of build). We leveraged TransLink’s brand guidelines to ensure that the 10 Year Vision website maintained a consistent look and feel with other TransLink web properties.

Challenge

In 2014, the Mayors’ Council on Regional Transportation developed the 10-Year Vision for Metro Vancouver Transit and Transportation. In 2016, the TransLink Board and Mayors’ Council approved the Phase One Plan, which funded and enabled implementation of the first phase of transportation improvements in the 10-Year Vision. Phase One funded approximately $2 billion in expanded transit services, infrastructure and improvements across Greater Vancouver.
Translink logo
Alert Circle iconRefresh icon
Translink website
https://www.translink.ca
Mobile screenshot showing the old Translink Alerts website
Alert Circle iconRefresh icon
Mobile screenshot showing wireframe designs for the new Translink Alerts website
Alert Circle iconRefresh icon
Mobile screenshot showing the completed build for the new Translink Alerts website
Alert Circle iconRefresh icon

Insights

TransLink wanted to make people aware of the plan and the improvements which the funding would deliver throughout the region. It was important to TransLink that the website demonstrated how the funding was being spent, in a way that was very traceable.
Mobile screenshot showing Translink's planned improvements to bus transportation
Alert Circle iconRefresh icon

Solution

Given the regional nature of the improvements and in order to bring the content to life, we designed and built an interactive map, which enabled users to search for improvements by using filters for ‘community’ (i.e. region) or ‘type’ (i.e. transit mode) or by interacting directly with the map. The site, however, is responsive and maps are notorious for their potential complexity on mobile.

In addition to this, we also had to consider very practical use cases, where users would be on the bus, using one hand to hold on and the other hand to interact with the map. With that in mind, we designed and built the map mobile-first, placing emphasis on ease-of-use through simple filtering and interaction patterns.

Mobile screenshot showing Translink 10-year vision for Metro Vancouver Transporation page
Alert Circle iconRefresh icon
Laptop with 10-year vision webpage open
Alert Circle iconRefresh icon

Results

The data points on the map were fed directly by an existing KML file which TransLink was leveraging and maintaining elsewhere. The solution, therefore, became one which was very easy to update and maintain, centrally.

Due to the success of the site and it’s modular approach, it has since been used to help serve as a foundation for a modular library and framework being used across other TransLink microsites. This has enabled TransLink to create microsites with much more ease and consistency than before.

Services

Technology

  • Technical Strategy
  • Front-end Development
  • Back-end Development
  • Drupal Customization
  • Systems Architecture
  • Quality Assurance
  • Dev-ops

Strategy

  • UX Strategy
  • Content Strategy
  • Information Architecture
  • User-flows
  • Design System Creation
  • Launch Plan

Design

  • UX Design
  • Art Direction
  • Creative Direction
  • Visual Design
  • Motion Design

Content

  • Copywriting
  • Image Selection

If you’d like to work with us please send us a signal: