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)



Here's the end product:

MY ROLE

UX / UI 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 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 redesign will retain its fidelity with the app's ultimate goal.

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.

Creating value

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

Value proposition

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.

Heuristics Evaluation

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

Process

Our team screenshotted all aspects involved with the task and combed through each element. We annotated the problems we identified,  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 estimated amount of effort required to fix it. 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.

Redesign

UI

We extracted colors from the official Presto website and appropriately applied it to the app's redesign. We also used grids to align every element and create harmony.

Before

After

Learnings

Lessons

A) Its important to have a general understanding of how developmentally feasible certain design are in order to create the most realistic prioritization matrix possible.

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

PlanningAnalysisRedesignLearnings