UI/UX Use Case: How a redesign of the Presto mobile app help users save money
Practicing interview skills was one of my assignments from the Interaction Design Specialization from Coursera. The topic is Public Transportation. What a broad subject!
Feeling overwhelmed, I decided to narrow down my participants to those taking public transit within the Greater Toronto Area. What next? I looked into my own public transit experience, one image came to mind:
PRESTO CARD
A Presto card is a smart card used for payment of ticket fares in participating public transit systems in Ontario, Canada. Users can top up funds or load a transit pass on their card. Tapping the card on the card reader located at stations or in the vehicles lets the system know how much to deduct from the card balance.
Getting to know the users
The Interview Process
In order to get a good context of the user’s experience with, and around the Presto card, I began by asking them to narrate their last commute. Then I followed up on a more descriptive recount of certain instances that seemed pleasant and points that appeared undesirable. I finished by asking them what they would do if they were to redesign the Presto card experience.
Identifying Pain Points
1. How do you track the Two-Hour Transfer Window?
The TTC (Toronto Transit Commission) lets passengers take as many ride transfers within the two hours of ticket purchase with no additional cost.
Everyone loves this TTC policy since it helps save money on transit fares when running errands or doing multiple short trips in a short time period. “That’s great!” I replied, “so how do you track the two hours?”
“Well, I just tap the card and hopefully it is still within the transfer window, if not, I guess, … I’ll get charged.
Most users weren’t tracking the transfer window at all. They aren't able to maximize the benefits of this policy.
2. How does your transit budget look like?
Most users opt for the $20 top-up amount because it hits that middle ground of being just enough to cover 5 transit fares and a small enough price to pay. So I followed up, “so how does your transit budget look like?”
“Whenever my balance is low, I simply top-up. I think it is still cheaper than buying the transit pass.”
One the other hand, users with the monthly pass aren’t exactly sure if they are taking enough rides to maximize the cost of a monthly pass (C$156.00).
END OF ASSIGNMENT
Technically, my assignment ends here, as it was only a practice of the interview process. But I wanted to explore more…
Ideation
The perfect canvas
What I also discovered from the interviews is that the mobile application of the Presto card is underutilized.
This image shows the home screen of the current mobile application.
It can easily be understood that the application is built primarily for managing card balance and checking transaction history.
While these functions are useful, a mobile application has so much more to offer. I decided that the mobile application would be the optimal touchpoint to redesign for the pain points identified.
Storyboards
I drafted six storyboards to illustrate three different solutions that can address the pain points. I tested them on friends and coworkers. These two received the most positive response.
- A Transfer Window Timer
- A Smart Expense Tracker
New Mobile App Features
Two-Hour Transfer Window Timer
- A visual timer that appears on the app when a ticket has been purchased, and will automatically disappear as soon as two hours have passed.
- A unique notification beep and/or vibration pattern that goes off at 5 minutes' time remaining. This is designed to notify users when they are unable to check their phones.
Smart Expense Tracker
- A visual summary of the total spent on a monthly or weekly basis to give users a good perspective on their transit expenses.
- Basing off the transaction summary, a notification will indicate if a user can save more with a suggested transit pass. This is designed to take off the extra work of calculating and comparing costs between single purchase tickets or transit passes.
Sitemap
After evaluating the current mobile application, I broke down the different contents I would need on the main page and performed a short card sorting exercise to find the best arrangement.
I decided to keep all existing pieces of content in the current design then adding in the two new features (pink frame).
Design
I drew inspiration from different public transit payment cards that have existing mobile applications: SUICA from Japan, Octopus from Hong Kong, and Oyster from the UK. Luckily, my brother was able to help me translate the Japanese text for SUICA!
I started sketching out some wireframes with pen and paper. From left to right:
- The main screen with a virtual version of the Presto card which flips when tapped and reveals the reverse side of the card.
- Initial sketches of two different models of the Transfer Window Timer
- Drafting layouts for the Smart Expense Tracker. I wasn't sure which type of infographic would best represent data for the users. Also, what type of data would they want to know?
Low Fidelity Mockup
Main Page
When a user taps the virtual Presto card, it flips and reveals the reverse side displaying a similar layout as what would be expected in the physical card. The Transactions section is full of data and took at least three iterations to find the best layout.
Transfer Window Timer
I made two variations that were tested on frequent TTC passengers to see which appeals to them most.
Smart Expense Tracker
I decided to separate the bar graph from the donut chart as having both on one page might be visually overwhelming.
Different types of data are presented in each version. I wanted to find out which one they would find useful. Both models were also tested on TTC passengers.
Prototype
The black and white colour palette from the existing mobile design is kept in the redesign. I decided to add a pop of colour opting for the shade of green similar to the one found in the logo at the top of the Presto card.
Transfer Window Timer
This feature was a challenge to design as both versions received equal positive responses. I had to dive deep and ask which elements in the chosen version users liked. The end result is a combo of the two different models. I kept the round visual from one version and used the time format from the other.
Smart Expense Tracker
The donut chart won over the bar graph by a landslide! Users find the bar graph delivers too much data they didn’t need. They liked the visual representation of the donut chart and found that knowing the exact amount they can save with a pass to be very useful.
Watch a video of the prototype below.
What I learned
Be quiet!
The interview sessions revealed so much about my participants that they didn’t know themselves. I find myself tweaking my questions on the succeeding interviews gauging how the conversation was rolling out.
What I found that worked was by staying silent for an extended period, the interviewee finds himself/herself compelled to say more, this works to my advantage!
I think there is still a lot of room for improvement in my skills, such as knowing when to stop speaking and knowing which questions to skip.
Storyboards are worth a thousand words
What surprised me in this project was how the users responded so positively to the Smart Expense Tracker storyboard, as compared to their skeptical feedback when the idea was described verbally.
The storyboards also helped me stay grounded in my designs. A story that puts context into the design’s function is way more effective than a list or text description of the solution. I will definitely incorporate more storyboards in future projects!
Breaking the design down
When it came to gathering feedback from users, I started presenting them with the redesigned mobile screen mock-ups. Then I noticed they were giving feedback on the screen details instead of the features. So I switched my strategy. I broke the design down into the key elements and presented them individually. This was way more effective and required me to ask less!
Overall I am happy with my design. I think I was very thorough in considering each element and function of my redesign. I have yet to test the final prototype and I might do just that!
