Transit smart card loading redesign

SUMMARY

I worked with a team to analyze and redesign a task flow within the Presto app to make it more intuitive for its users.

TEAM MEMBERS

Eugenio Tamburini
Andrea Lau
Dylan Kayyem
Dio Wong (me)

MY ROLE

UX Designer
UI Designer
Content Designer

CATEGORY

School project

Problem

Loading the Presto card from time to time is mandatory for any transit user in the Toronto area. Unfortunately, the app is plagued with many UX/UI issues shown by the overwhelmingly negative feedback from its users in the app store.

Planning

What's the goal?

In addition to seeing how users feel about the app, we also want to better understand the goal of the Presto app. This is to ensure the that the app's redevelopment will retain its fidelity with the goal of the app.

App goal

“Let users easily manage and instantly load their Presto card on the go.” - Presto Website

Choosing the problem

Our team decided to narrow down the problem since the app had many other utilities outside of loading the card. With the goal of the app clearly laid out, we decided to revamp the user flow that ties most locally to the app’s goal:

Flow reconstruction

Loading the user’s Presto card.

Value proposition

As a team, we presented our designs, process, and value proposition to the company.

  • The app’s user retention will grow, resulting in increased profits.
  • A better reputation for the city of Toronto, seeing that the app is associated with the provincial transit jurisdiction.
  • Increased brand reputation, as the apps utility will be closer to its proposed goal for its users.

Analysis

Method

Our approach to revamping the this flow was to first analyze what a user would normally experience if they were to complete (or attempt to complete) the task using Nielson & Norman's ten usability heuristics.

Use Nielson & Norman’s ten usability heuristicsto analyze and reconstruct the flow.

Process

Our team screenshotted all of the screens involved with the task and combed through each aspect involved in the experience. We annotated the problems we could identify,  proposed individual solutions for them, then rated their severity from 1-4.

Prioritization

Our team then created a prioritization matrix that lays out how severe a problem is relative to the amount of effort required to fix the particular problem. This is valuable from an organization’s point of view when it comes to determining which problem should be tackled first. For example, If the severity is high and the effort to fix the problem is low, its a problem that should be fixed ASAP.

Reconstruction

UI

We extracted colors from the official Presto website and appropriately applied it into the reconstruction of the task to create a more consistent UI with the rest of the app and its brand. We also used grids to align every element and create harmony.

Before & After

Learnings

A) The amount of user value generated relative to effort and time put into fixing an issue is extremely useful from a stakeholder's perspective.

B) The significance of planning before executing design decisions is of paramount importance.

Want to know more?
Let's chat!
PlanningAnalysisReconstructionLearnings