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
https://www.translink.ca
Insights
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.
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