Contents

The problem

Goals and objectives

The process

   1. User research   

   2. Market research

   3. User journey mapping  

   4. Information architecture . User and task flows   

   5. Sketching   

   6. Branding and visual design   

   7. Prototyping . User testing

The problem

The COVID-19 crisis has pushed people worldwide to redefine safety. "Safety" now embraces a much broader of issues, including hygiene, cleanliness, and well-being.

In the wake of these changes, cars now offer the safest way of moving around for many people.  In fact, global emissions due to cars have risen to 65% of total global emissions, up from 59% of total emissions pre-COVID-19.

With traffic levels already rising again, governments and transport authorities are faced with a trend that could undo decades of steady progress on sustainable mobility.

Metrolinx, which provides service to the Greater Toronto and Hamilton Area, saw significant ridership declines in the 2020/21 fiscal year.

The process

For this project I opted to reach occasional public transit users living in the GTA.  I interviewed 4 Torontonians between the ages of 20 and 30, who were active users of Metrolinx services before the pandemic. I asked questions based on an overarching research question: "How has your public transit experience changed in the wake of COVID-19?". I noticed that all of the participants had overarching needs and frustrations with this experience, and also utilized the same channels to access public transit...

With the insights I gathered from user interviews, I defined the following profile.

I measured my design against this profile throughout the rest of the design process.

Next, to get a high-level idea of where and how Metrolinx plays in the market, I used Gassmann's Business Model Innovation Framework (BMI). This diagram helped to make Metrolinx' business model tangible to me and helped to confirm some of the assumptions I had about the business. 

In 2020, Metrolinx released a mandate to offer new value to riders, demonstrated in the third slide, below.

I did some research to find out how other applications help to ensure and promote safety, reliability, and convenience for travelers, with the goal of providing this for Metrolinx.

I found that there are a number of existing navigation apps that implement crowdsourced data to provide real-time insights to commuters. These platforms combine big data and insights from users to paint a more detailed picture of a mobility ecosystem. This provides users with comprehensive, real-time coverage.

However, there are no such platforms catered to the unique needs of occasional public transit users in the Greater Toronto/ Hamilton areas. 

I began to build an app concept for Metrolinx customers that leverages crowdsourced data to promote the safety, convenience, and reliability of its services.  

At this stage of the process, I had a bunch of information to understand user needs, concerns, and feelings, as well as the objectives of the business. I built a simple user journey map to get a sense of in which context my target user would interact with different parts of the app.

Once I had pinned down the function and contextual use of the application, it became time to organize, structure, and label the content to help users find the info they expect and complete tasks across the app. I created task flows for the new app, based on the user journey. I did this by referencing task flows from Google Maps, the main tool used by my target users, as well as Triplinx and Presto, two existing Metrolinx offerings.

After I laid out an overall user flow for the app,  I built out the information architecture for the concept, to visualize and understand the overall structure of the project.

Now that I knew the structure and content I was to incorporate, I started to create low-fidelity wireframes for each touchpoint of the app. I focused here on what interactions users would take to uncover different kinds of content in the interface.

It then came time to test out the the basic functionality of the app by getting users to try out a low fidelity prototype. After a few rounds of testing and iteration, users were interacting with the prototype seamlessly.  It was time to apply higher fidelity visual styling to the prototype.

Metrolinx' visual identity system and brand architecture was created by Bruce Mau Design (BMD). BMD's breakthrough moment with Metrolinx was when they helped the company realize that what they are really doing for people is helping them to "create connections."*

I wanted to keep this in mind throughout the design process because the core functionality of Linx is to connect people with other people, other locations, and different modalities of transport.  I centralized BMD's Metrolinx logo throughout the app, since BMD described that this logo is based on parallel lines and intersections reminiscent of transit maps, signalling Metrolinx' strength as a connector. 

Linx' overarching simple black and white color palette provides strength and clarity to the brand, while a secondary color palette of red, yellow, and green nod to traffic lights and the role they play in urban mobility. 

Details like shape and line weight are modeled after Metrolinx' PRESTO app, which follows BMD's brand system for Metrolinx. 

The final, high fidelity mockup for Linx is composed of five different tasks.

Task 1: Plan a trip 

The first task flow was loosely modeled after Triplinx, Metrolinx' trip-planning app.

To help experienced users move quickly through this task, I wanted to signal which alerts were of high importance to check. To help users determine quickly which route is the safest, important safety alerts are colored red, less pressing alerts are yellow, and least pressing alerts are green.

Task 2: Check your vehicle's progress

This section of Linx was structured similarly to Google maps, in order to provide clarity and easy adoption. The goal is to let target users, who mainly use Google Maps, easily take in multiple route steps, which can be both important and complex.

As users proceed through the steps, they come to the point where they are waiting for their vehicle to arrive. This has been identified as a stressful period of time for users because of their experience with unreliable vehicles. That's why Linx provides a real-time vehicle location update at this time to keep users informed on the progress of their vehicle.

Task 3: Pay with PRESTO

PRESTO has been piloting contactless payment on the UP Express since May 2021, signaling a major transformation for PRESTO. PRESTO contactless payment is straightforward and easy, allowing riders to pay with their credit cards, mobile wallets, and in the near future, debit cards. 

As users embark their vehicle, they have the option to tap on and perform their payment using Linx, which has been linked to their mobile wallet during onboarding, for a simple and secure payment process.

Task 4: Rate your experience on route

At this point in the user's journey, they have embarked their vehicle, made a payment, and found a spot. Once the user has embarked and paid, Linx prompts them to rate the safety of their vehicle, using set descriptions that can be upvoted or downvoted. This data is then used to create the alerts that other Linx users see in the Plan a Trip segment of the app.

Earn credits towards a free ride

Finally, to encourage continuous use, the app rewards users with incremental free ride credits. This way, the more ratings that users send in, the more they save.