01. Define

Metrolinx wants to let more people buy E-tickets and redesign high-traffic landing pages.

Go Transit (part of Metrolinx) is one of the biggest transit providers in Toronto, with many relying on them daily to travel via bus, train, etc. Their website is widely used for trip planning and has 3 main features: "plan your trip", "see schedule", and "calculate fare".

Ask 1: HMW make buying e-tickets more discoverable so that users can easily purchase tickets online?

Background

30% of traffic to e-tickets site originated from their main website's "see schedule" results page, but the CTA link may not be prominent enough.
"Plan your trip" results page has ~30% high traffic than "see schedules" results page, but has no link to e-tickets.
Meaning: by making e-tickets CTA more prominent on these pages, we can increase traffic to e-tickets site and make purchase flow more convenient for users (trip details are auto filled-in when they go through this flow).

KPI

Traffic to e-tickets site
Percentage increase in traffice to e-tickets site from these pages

Ask 2: HMW make landing pages more useful and attractive to users?

Background

23% of desktop traffic lands on 1 of the landing pages of the 3 main features.
Only 33% of visitors return to these pages.
Meaning: users don't find these landing pages relavant or useful enough to return to them.

KPI

Return traffic to the landing pages
Conversion actions to plan trip or see schedule

02. Team

1. Trip results | before

1. Trip results | after

Iteration 1 (two CTA buttons)

Step 1 – users scan different trip options (see detail and buy e-tickets are separate buttons)

Added E-tickets CTA associated with each trip.
- Experienced users can skip trip details and purchase here.

Step 2 – click the right chevron and see details of 1 trip, is able to purchase e-tickets

Explored the side modal layout which reduced the need for users to go on another page.
- When users compare multiple schedules, it saves them the hassle of going back and forth (they stay on the same page).

Iteration 2 (combined CTA buttons)

Step 1 – users scan different trip options (combined button for both CTA)

We combined "buy E-tickets" and the chevrolet button into 1 to simplify the mobile UI.
- Users can only purchase E-tickets after reading the schedule and the fare info, which prevents them from accidentally buying the wrong ticket.

Step 2 – click the combined button to see fare and buy e-tickets

More details were added to the side modal like fare tiers and repeating CTAs.

2. See schedules -> Your timetable | before

2. Your timetable | after

Iteration 1 (small, repeted CTA)

Page
- Renamed page title to show line color and name, providing more clarity on what page the user is on.
- Instead of the legend (quite useless), the mini "get shcedules" module is moved to the timetable page so users can quickly change trip info without the need to go back.
Timetable
- Added line names under their icons.
- Replaced the chevrolet icon indicating dropdown with "details" button. This gives more clarity of the button's function.
- Dropdown now contains additional information such as trip time and fare.
- Explored multiple buy E-tickets CTA. This is aligned with cash fare so users associate them together.

Iteration 2 (large, single CTA)

In consideration of mobile UI, iteration 1 may be too crowded (details and "buy E-tickets" on the same row).
Iteration 2 kept the original location of the CTA, but added visual weight (primary button style).
Thus, all details are center-aligned to shorten the distance the mouse needed to travel between "details" and "buy E-tickets"

3. Landing page | before

3. Landing page | after

Landing page can be accessed by going through menu -> see schedule. It had very few returning traffic due to the unhelpful content.

After talking to the clinet, it turns out "favourites" feature isn't widely used. So I did the following changes:

Broke up the "favourites" / "recent" tab select (users can only see 1 at a time and "favourites" was the default) into 2 vertical components.
Recent is at top because returning users will have data there.
Favourite is second. Even though it may be empty for many people, this design adds instructions on how to add favourites so it may become more useful.
Added "all schedules" grouped by lines.

07. Key learnings

The "plan your trip" results is pushed out to millions of GO Transit users already. Although I have left the account before seeing its implementation, I believe our design has simplified users trip planning flow.

Some things I learned during this account:

Working with existing design system and when to override / create new styles.
Relying on competitor research and UX audit when talking to users is out of scope