Calculate fares easily
TRY CALCULATOR
CONTEXT
Static tables don't work on mobile
The standard fare matrix is a table directing readers from their point of origin (left-most column) to their destination (succeeding columns).
It's an efficient format to convey fare information—when printed and pasted on station walls.
On the phone? That's a different story.
Why the matrix doesn't work on mobile
Tables are notoriously difficult to translate on mobile because of the device's limited space. Text is either too small or difficult to follow.
The opportunity, then, was to leverage interactions to present information simpler and faster.
Cramped columns
The verticality of smartphones make showing multiple columns difficult.
Scroll & pinch cost
Although users can scroll horizontally and zoom often, this interaction is highly tedious.
Information overload
Not all routes presented are relevant to the user.
Origin vs Destination: Which comes first?
Some products, such as Sakay.ph—one of the most popular commuting apps— begin by asking users for their destination first, while others seek the origin.
To verify whether this was how users thought, I conducted desk research.
Going origin-first
A dive into the popular PH commuting subreddit, /r/HowToGetTherePH, revealed that commuters often asked from the origin first then the destination.
That's ultimately how the inputs were laid out.
Turning designs to a working prototype
To make this leap from conceptual to usable, I relied on ChatGPT to fill my skill gap Javascript. I've had past experience in prompting well, so I felt capable in relying on ChatGPT.
This allowed me to upload the designs on GitHub, then host on Vercel for free.
A caveat: I understand that using AI to code without a firm grasp of the language can lead to lesser quality code. My purpose for this project was simply to create a working and shareable prototype as soon as possible. That way, the project jumps from concept to usable product that users can already begin finding value in.
In most other settings, I'd seek the help of experienced developers.
Public recognition
fdsaf