My role
Tools
UX/UI Designer
Pen & paper
XD
Photoshop
Illustrator
Goal
Update Metrolinx's PRESTO app to reflect its brand identity while streamlining its user flows
Duration
May 2020 - 2 weeks
Update: Sept 2020 - weeks
Overview.
*Disclaimer*
While I worked at Metrolinx between October 2018 and October 2019, I undertook this project on my own volition. No one from Metrolinx was involved. This project in no way reflects Metrolinx's values or operations.
I wanted to bolster my visual and interaction design skills by redesigning Metrolinx's PRESTO app.
Metrolinx launched the PRESTO app in 2019. Since then, the app has been downloaded almost a million times. It currently has a 1.7 star rating on the Apple app store. A majority of the 1,534 ratings are for one star.
I worked on the first iteration of this redesign in May 2020. Now, ~4 months later, I revisited this project with a stronger process and UI foundation.
Sneak a peek at the PDF for an overview of the project, and scroll on to dive deeper.
Research.
User flows.
Many reviewers complained about the app's technical shortcomings. Considering my personal goals for this project, I aimed to address those challenges by updating its UI while making the PRESTO app reflect Metrolinx's brand identity.
Here are the pain points I found:
1. Compatibility - PRESTO doesn't integrate with Apple Wallet or Apple Pay. These days, users expect their apps and services to integrate with one another.
2. Loading funds takes too long - Loading your PRESTO card from the app means waiting 4 - 24 hours before the funds appear in a user's balance. However, if a user goes to Shoppers Drug Mart, for example, their funds will be loaded to their card instantly.
3. The UI is anemic - Metrolinx has a strong brand identity thanks to a rebrand back in 2017 but the PRESTO app doesn't use any of their brand colours.
The process that worked for me was to start in the abstract and iterate until it turned into something concrete. I didn't want to redesign the entire app. Therefore, I shifted my focus to identifying and improving the user flow of a user loading their PRESTO card with funds.
Regardless of the type of user, PRESTO's main value proposition is enabling people to top up their card with funds.
This is a user's journey for loading their PRESTO card. A glaring issue I felt I could address was the inability to add and save a payment method while in in this flow. Users had to go through another journey to add and save a payment method. I've visualized that user flow below.
While straightforward, it's a fragmented experience. How might we streamline these flows for a more coherent user experience? Building that user flow became my primary concern.
Wireframes.
Now that I had a clear understanding of the user flows, I could identify and prioritize the necessary screens and interactions.
Style guide.
Crafting a style guide was going to be crucial for the high fidelity mockups. After all, my goal for this project was to align PRESTO's colour schemes to match Metrolinx.
However, I quickly learned that PRESTO uses a different style guide than Metrolinx, in both colours and font. Therefore, my primary goal was to have the PRESTO app match the PRESTO brand. A secondary goal was to use the colour scheme to align with Metrolinx's branding through subtle accents.
Mockups.
In case you don't know what the PRESTO UI currently looks like, I've compared it to my two iterations.
Current
May 2020 redesign
September 2020 redesign
One can tell that the May 2020 project is disjointed. The September 2020 project is more mature, and it reflects my self-education in UX Design generally, and UI Design specifically.
The prototype.
September 2020
May 2020
Next steps.
Going forward, I'd like to do usability testing to evaluate my redesign's utility against the current design. That would require me to build a robust research plan complete with research objectives.
I'd also like to build more user flows for different tasks, like adding another card to a user's account, or setting up the auto-reload function.
Lessons learned.
1. UI and interaction design is different than user research - I enjoyed experimenting with user flows and learning more about colour theory and common UI practices.
2. Get comfortable with ambiguity - I learned to use and adapt a process that worked for me. Starting in the fuzzy front end of design and ending in something tangible was exciting. I'm a kinesthetic learner, so doing this project was the only way forward.
3. You don't need to redesign everything - The PRESTO app already has a minimalist UI style. I decided to build on what was already there instead of starting from zero.
