BC Transit

Responsive website redesign

The BCTransit.com responsive website redesign project is the perfect example of optimizing one of our most important everyday tasks: getting from place to place. Hundreds of thousands of people take the bus every day all across British Columbia, but BC Transit's old website presented a huge barrier. It had inaccurate data, a hard-to-use interface, and a dated, clunky design. We worked for over a year and a half to overhaul every aspect of the public transit online experience, making getting on the bus in British Columbia a seamless process.

A little bit about this project

Most North American transit systems provide public transit for a single municipality or region. Our client BC Transit, however, manages all transit operations, excluding only Vancouver, for the province of British Columbia. That’s over 130 community transit systems, in collaboration with 59 local government partners over almost a million square kilometres of land – each with their own unique geography, culture, and needs. Some communities have lightning fast Internet service, while others have no cell service and dial-up Internet. Some communities serve tens of thousands of dedicated transit riders, while others have a few dozen occasional customers. BC Transit brings buses to them all, juggling massive operational complexity to help British Columbians make more environmentally-friendly transportation choices.

The challenge

The provincial government gave BC Transit an audacious goal: double BC’s transit ridership by 2020. Their (old) website wasn’t going to help them get there. Built on a technical infrastructure from the late 1990s, their website served unreliable data, was cumbersome to update, and hard for transit riders to use (especially on mobile devices). Tasks as simple as finding out how much the bus cost or when it arrived were next to impossible.

BC Transit Kelowna

BC Transit’s leadership knew they needed to transform their organization to meet their new goal, and the web was the first step. This wasn’t just a technology project – it was a comprehensive transformation of the entire organization from the inside out. And that’s where we came in. This was a big project with big needs to meet, but we were excited to get started so that we can set BC Transit on the road to accomplishing their goal.

Our audience

From the onset, we knew our project had two key audiences: the hundreds of thousands of transit riders that take the bus every day all across British Columbia, and the BC Transit staff that make it all possible. BC Transit needed the tools to make their operations more efficient so they could focus on attracting new ridership. Transit riders needed quick, easy-to-use technology that helped them do what mattered most: get on the bus.

Audience: BC Transit staff

Phil Kneer driving a bus in the name of research
Driving a bus in the name of research.

Our team spent more than eight months meeting with stakeholders to learn about every possible aspect of their operations. We drove double decker buses to help us understand the daily lives of transit operators. We worked together with each department from BC Transit to understand their world – their processes, successes, pain points, hopes, and dreams. We even have the bright orange safety vests to prove it.

We spent a lot of time focusing on the website content author experience: what is it like for the person actually updating the website? Some partners had rejected the old system entirely – they refused to update the website with service changes or outages because the technology was so cumbersome. We knew the new system wouldn’t succeed unless we could win over BC Transit’s internal team too.

Audience: BC Transit customers

Customer journey map
Customer journey map.

The best way to learn what customers are doing is to go out into their world and talk to them. So armed with tablets and mobile phones, we interviewed real users and tested our designs on buses and at bus stops all over British Columbia.

The feedback was clear: transit riders needed a flawless online experience for their most important tasks. Finding route maps, bus times, and fare prices was essential. Users in larger communities needed robust trip planning and real-time bus data. But more than anything, transit riders wanted better mobile device support. 50% of BC Transit’s users were already on mobile devices, even with the completely broken mobile experience on the old site. They needed a website that could keep up with them wherever they were. Users also wanted more personalized content – they didn’t care about other transit systems or news, they only wanted to see the content that was relevant to their trip.

Disabled transit riders are also an important audience for BC Transit. Almost every transit system offers special HandyDART service for customers with limited mobility – we had to make sure their online experience was just as accessible. We consulted with BC Transit’s accessibility advisory group, and conducted accessibility testing throughout our design process.

The solution

BC Transit sketches
BC Transit wireframe sketches.

From discovery to planning

We translated our research into a set of tools to help BC Transit staff understand their customers and goals. Journey maps for customers, municipal partners, and operating partners, six different customer audience personas, research reports, project vision, and a comprehensive content strategy will form the foundation for our next five years of work together.

This detailed understanding of the organization and our customers’ real needs allowed us to create a site that gives both our audiences what they need to be successful.

Creating sustainability

Ultimately, sustainability was one of our most important success criteria. A system, design, or feature that the BC Transit team couldn’t support on their own would never be successful long-term. We established a project vision at the very beginning to guide our direction. Any time a decision or conflict arose, we used this document to determine what would best help us realize our vision and avoid short-term thinking and watered-down solutions.

Design and development

Our collaborative user-centred approach permeated our entire design process. We collaborated directly with our client team on all our work – from personas and sitemaps to style tiles and interaction patterns. Team UX sketching workshops helped us prototype layouts and content hierarchy quickly, and made sure the client team was fully informed and bought in to our design choices.

BC Transit route page
BC Transit responsive website.

BC Transit leadership were uninspired by their existing brand identity, and wanted to introduce movement, vibrancy, and dynamism into the design without completely rebranding. Our design team used the foundational elements of the existing brand identity to create a contemporary-feeling, energetic design that still conveys authority and trustworthiness – key for such an important public service provider. The result was an elegant user interface that’s packed with functionality but doesn’t feel overwhelming, even on a small screen.

Deployment

Constant user testing and an iterative design process kept us connected to our end users’ needs throughout the project. A public beta phase let us gather feedback from users across British Columbia before the final launch.

The impact

The launch of the new BCTransit.com is the first step towards the future of public transit in British Columbia.

The new website is flexible enough to meet the varying needs of all 83 transit systems. Larger transit systems with robust data can provide a huge spectrum of new functionality, from finding the next bus arrival at any stop to easily planning complex multi-stop trips. Smaller systems with limited service can provide the best possible online experience. Most importantly, the system is easily extendable – as new services or data become available, the website will automatically provide new functionality without any additional development.

Our mobile-first, content-focused approach means that transit riders can now get the right information wherever they are. Important content is no longer buried in an unintuitive navigation structure or unusable interface. The entire website’s information architecture and layout has been redesigned to focus on users’ tasks instead of BC Transit’s organizational chart. And our lightweight responsive web design means that all users can have access to a great experience, no matter what their connection speed or device. We integrated Google Transit to leverage best-in-class route planning, but extended the system to enable many unique features like route discovery, stop alerts, timing point schedules, route updates, and mobility enhancements.

Optimizing the transit experience

  • Route schedules and maps

    We improved access to route maps with an innovative responsive images solution that doesn't waste bandwidth on mobile devices. We implemented a new trip planning tool in communities with the data to support it, letting users plan complex multi-stop trips quickly and easily without leaving the BC Transit website. We've also added trip start and route search functionality, so users can find what they need no matter how they approach their task.

  • Geolocation and localization

    Users can easily switch between transit systems without being overwhelmed by content from 50 different communities. Transit riders only see the content that's relevant to them. They can even subscribe to email alerts for service changes on their favourite routes.

  • Content author experience and data updates

    Transit riders were only half the equation – our project also had to make BC Transit content authors successful. We focused on streamlining the content updating process, designing a best-in-class CMS content author environment and making data updates seamless. The old website could only be updated by one contractor. Now BC Transit can decentralize content authorship across their entire organization.

BC Transit new website on screen
BC Transit website in action.

BC Transit staff are thrilled with the new system. And management staff are proud of their brand’s exciting new public face and cost-saving new processes. New websites will always present challenges and needs post-launch, but BC Transit is committed to creating the best possible experience for their riders and we’re ready to help them succeed in meeting their goals.

The new website is a massive leap forward for BC Transit. We’ve given them a best-in-class communications platform, complete with the design, user experience and functionality they need to help them meet their most important goals. Best of all, it’s built for the future – whatever devices or capabilities it might bring.

What's up next

The website redesign is just the beginning of our work with client partner, BC Transit. We’ll be partnering with them over the course of the next four years to ensure that they stay out in front in their industry, enabling them to provide their internal teams and their patrons with the world-class service they deserve.

See it for yourself

Visit bctransit.com