TIMELINE
2 weeks
RESPONSIBILITIES
UI design
UX research
Front-end development
PROBLEM
Fare information for the EDSA Carousel is presented in a confusing way on mobile
The official EDSA Carousel Fare Matrix wasn’t designed for smartphone consumption; it presents all fare information in a confusing way.
Overall, it makes a simple task of finding the fare information for a specific route (e.g. from PITX to Ayala) tedious.
The static table forces commuters to turn their phone horizontally and pinch and scroll.
Not good for single-hand use while commuting.
SOLUTION
A clean & simple Fare Calculator
No more pinching to zoom. No more squinting and scrolling. No fumbling to landscape mode.
Just 3 taps to instantly get the fare info commuters need.
BACKGROUND
A complicated answer to
a simple question
How much does it cost to ride the EDSA Carousel from North Ave. terminal to Mall of Asia? That was my initial question before riding the EDSA Carousel alone for the first time.
It seems like a simple enough question, right? I thought so, too…
Until I tried Googling it.
Instead of finding the answer, Google search results showed either wordy, search engine-optimized articles about the EDSA Carousel or hard-to-read, unoptimized tables.
Both types would link a static image of a blue fare matrix. Unearthing information through this presented 3 issues.
Search engine optimized articles burying key information under wordy paragraphs
RESEARCH — PAIN POINTS
The UX of the top search results
The top results bury the information under ads, excessive space, and thick paragraphs
1st result
The "official" page
Adspace bury relevant information
Static table of fares is confusing
2nd result
Site is unrelated to public transport; it's more of a real estate website
Too wordy. Blocks of text hide relevant information and aren't scan-friendly
3rd result
This is the home page of the 1st result
Ad heavy, causing clutter
4th result
Relevant info was buried, causing users to scroll deep into the page just to reach the information they were looking for (Spoiler: It's near the bottom of the page)
RESEARCH — PAIN POINTS
The Official Matrix
When printed or viewed on desktop, there isn’t much problem navigating the matrix.
Problems arise when translating it to mobile…
RESEARCH — PAIN POINTS
Why the Current Version can be Improved
Info overload
Not all routes presented on the table are relevant commuter. It only adds visual clutter and confusion.
Pinch, scroll, repeat
This interaction can impede commuters looking for quick information
Vanishing columns
The vertical aspect ratio of smartphones forces rightmost columns to disappear
A Reddit user explaining their concerns
ENG: “You can Google the fare matrix of the [EDSA] carousel. It’s just a little hard to read so you just need to zoom it in. Whatever it is, it’s 75 pesos from Monumento to PITX.”
CHALLENGES — JAVASCRIPT
Delegation & Briefing
I knew I wanted to turn this project into something usable, but that needed something I didn’t have: Javascript knowledge. I’m a little familiar with HTML and CSS already.
So I decided to take the leap and rely on ChatGPT to help me out.
I understand that can be controversial but I decided to go through with it because it allowed me to build a usable product quickly.
It also allowed me to practice articulating the needs of the project, which would be essential if I were working with non-robots (i.e. human devs).
CHALLENGES — ORDER OF INPUTS
Destination or Origin First?
The final product would need user inputs, which unearthed the question.
What input should we ask from the users first: Where they’re going or where they’re coming from?
It’s a difficult question to answer through direct questioning because it relies on understanding people’s automatic response to figuring something out; what people say they do is different from what they actually do.
So I sought research from /r/HowToGetTherePH
Sakay.ph, a popular commuting guide app, uses the origin-first approach
Google Maps, on the other hand, uses destination-first inputs
USER RESEARCH
People ask Origin-First
Based on user posts from /r/HowToGetTherePH, a popular subreddit for commuting advice in the PH.
The word "From" indicates their Origin.
By understanding how people asked their commuting advice questions, I learned that it was better to ask people where they’re coming from rather than first asking where they’re going.
DESIGN PROCESS
Iterating, Iterating, Iterating
Origin-Destination Inputs
A straightforward layout that cuts the screen in half: inputs and outputs.
Horizontal List
I imagined users scrolling left and right, feeling haptic feedback at every option—I just didn’t have the tech knowledge to execute it
Card-Based List
Rather than text, cards as options allow users to further visualize the different terminals.
OUTPUT
EDSA Carousel Fare Calculator
This is the design and operation I decided to upload and share on social media
Try it out
STEP 1
Homepage
Users are greeted with an incredibly simple and uncluttered home screen.
The prompt “Choose your starting point” nudges users to take action
STEP 2
Choose Origin
Users are greeted with an incredibly simple and uncluttered home screen.
The prompt “Choose your starting point” nudges users to take action
STEP 3
Confirming Origin
Once users select their origin, the prompt at the top nudges them towards the next step they should take.
STEP 4
Choosing Destination
The list is dynamic; it only shows terminals that are available from the user’s chosen destination.
Ex. The terminals are A, B, C, D. The user chooses B. The only destination options are C and D (since the route doesn’t run backwards to A).
STEP 5
Confirming Choices
The prompt at the top instructs users to take the final step.
STEP 6
Calculating Fare
Users are presented with their chosen route and the associated fares simply.
OUTCOME & EARLY RESPONSE
How People Responded
When I shared my work on social media, it was met with positive reactions. Although that metric can be considered vanity, it’s indicative of an opportunity to design further.
“The matrix in itself is kinda easy to understand. It’s the color that makes it difficult to read.”
—/u/HTGTPH_Mod
“Nice work, Francis! The calculator looks great, no more squinting at the matrix”
—Nicole Gunay
“Gawin to dapat ng MMDA/LTFRB”
[ENG: “This should be done by the Metropolitan Manila Development Authority/Land Transportation Franchising and Regulatory Board”]
—/u/ukissabam
Lessons Learned
Every Medium has a Limit
The blue matrix presents as much info as a printed piece of paper can—but computers and smartphones can do so much more.
Creating medium-appropriate designs helps with user experience.
Explaining Well Helps
Despite working alone, I considered ChatGPT to be a hired hand (for free). That forced me to explain in simple detail what was needed for the project.
I believe this skill will help me when I’m working with real teams.
EDSA is a Work in Progress
There’s a lot to be desired with public transport in the PH. This project helped me realize that I do have a voice and can make an impact, no matter how small.
Product design is about solving real problems, and I’d like to continue doing just that.
Saw something you wanna discuss?
I'd love to chat!
Connect on LinkedIn
Website built in Framer by me and a lot of trial and error