BC Transit

I implemented a 'curve', as a visual motif. The rationale was two-fold: first, it is a direct callback to the brand's own logo, which features a stylized, curved 'B'.

Second, a curve is the visual language of movement. For a public transit authority, the connotation of moving the community forward was imperative to exemplify.

The motif appears throughout the site on featured cards, subtle backgrounds, and the edges of hero sections, always flowing the users eye forward into the next section or key call outs.

I implemented a new Fares layout that forces one decision up front: which type of rider are you? Adult, student, child, senior, and others each get their own tab, filtering the page down to only the passes and pricing that apply.

Within each tab, riders see a top-level card view of every available pass and ticket type: a quick, scannable inventory of what's even possible before they commit to going deeper.

Within each audience tab type, I also inserted opportunities for persona-independent alerts like fare changes, and top task call to actions like ‘where to buy’ so that these important items are highly visible at all times.

The route list works two ways at once. Riders can filter by route name or number using an auto-complete search input, or scroll the full list via an overflow function that keeps the map viewport locked in place.

Either path keeps both surfaces visible: riders can identify a route on the map, then look it up on the list, or vice versa, without ever losing their spatial context.

Once inside a schedule type, I designed a refined implementation of legend letters and 'route via' information, placed contextually rather than crowded at the top of the page. A dedicated area for trip notes keeps supporting details available without competing with the schedule itself.

The Trip Planner is the most essential task for BC Transit’s riders. I knew I had to improve the usability, giving users efficient pathways to their destinations.

To plan a trip, users can:

Alongside the text fields, I added in auto-complete, favourites, and recent searches for easy access of common trip points. The rider can further customize their trip in our 'Trip Settings' to account for preferences like minimizing transfers, and showing routes with accessible services.

Designing for the future, I indicated where users would choose what modes of transportation they are willing to include.

Research revealed a core drawback of the previous planner: contextual information rarely surfaced at the moment riders needed it, forcing them to leave the trip flow to find it. I designed a new interface to make the journey more intuitive:

Once a rider selects a trip option, their route appears on the map with live bus positions they can track.

Below, riders see step-by-step navigation in plain language. Alerts and live arrival times sit inside the directions themselves, so riders never have to leave the trip context.

To make visualizing a trip even easier, every stop includes a quick-view button that jumps to the map above zoomed to the exact location: no manual panning, or scrolling back up the page.

The Routes tab surfaces every bus line on the interactive map at once, giving riders an at-a-glance view of the full network. Below, an autocomplete search filters to a specific route, and a favouriting mechanism pins frequently used routes to the top of the list for one-tap access.

Selecting a route reshapes the map to focus on that line, with live bus positions and clickable, favouritable stops. Below, riders can subscribe to alerts, favourite the route, and see its cadence at a glance.

Every stop is listed with real-time arrival information and a refresh option, addressing one of the most requested features in our research: confidence that what riders see reflects up-to-date data.

Research told us riders wanted alerts surfaced contextually, exactly where affected routes and stops appear, but also wanted a centralized hub for pre-trip verification. Phase 2 delivers both.

Alerts appear inline across every tab, and the dedicated Alerts tab surfaces every route with an active alert, prioritizing the rider's favourites at the top, alongside system-wide advisories.

The 'Tracker' section was born from our research, which confirmed an imperative need for reliable, real-time, arrival data.

On the interactive map, riders can click any bus icon to track its progress, or any stop to monitor incoming buses. Favourited stops surface here automatically, so a rider can easily check the stop they plan on heading towards, understanding how much time they have to make it to their starting point.