Presto Balance

Introduction

Unfortunately, I cannot support this project any longer. Since I moved out of the GTA, I don't have access to the Presto system and cannot practically provide updates for this application. Luckily, though, the official site has somewhat gained mobile usability.

Presto Balance is a project I took upon myself to solve the problems I faced while using the Greater Toronto Area's transit fare card- the PRESTO Card. The official site is plagued with incorrect markup, sessions that frustratingly expire while looking at other tabs, and an unpleasant layout and user experience.

The goal of this project is simple: build a microsite that everyone can use- wherever they are- on whichever decide they want, to accomplish the most common PRESTO-related tasks; checking the balance and transaction history of a card.

Let's get started

Logging in is simple. Enter a username and password, or toggle the form for unregistered cards and just enter a card number. Upon a successful login, the username or card number is stored locally as a browser cookie so the form will be partially filled during future visits.

Account Overview

After logging in, the user is presented with their card name and number. Behind the scenes, the API is fetching the card's balance and transaction history. Multiple cards are supported in this project, so users are able to view all cards at-a-glance and selectively display their transaction history to avoid being overwhelmed with information.

Unfortunately, unregistered cards cannot retrieve their transaction history, so unregistered users will be stuck with just the card balance unless they register their card.

Transactions are displayed clearly in rows that are free of unnecessary clutter. Dates and amounts are emphasized while locations are processed to be easily read. Transactions are also displayed and styled according to their type- payments look different than a balance reload.

Responsive Design

A leading motivation for this project is to make PRESTO available everywhere. Currently, the official Presto site is not optimized for mobile devices; it won't even render properly on some. The quickly-expiring sessions also hinder the experience due to the nature of mobile communications and power saving features of phones.

Presto Balance takes advantage of the media queries provided in the CSS specifications. The result is a responsive design that resizes and reorganizes depending on the size of the user's screen.