An app designed to help you navigate Translink's services
CompassPlus is an app designed to replace your physical Compass card with a digital NFC card you can use on your phone.
Role:
UI/UX Designer
Timeframe:
3 months (Sept - Dec 2021)
Purpose:
Class Project
Tools:
Figma, Illustrator, InDesign, React, Expo
Introduction
My Role
Our Users
Problem Identification
Solution and Goals
Process
Final Designs
Conclusions
My Role
My role in this project was as a UI/UX designer. I worked alongside 2 other designers, 1 developer, and 2 hybrids (designer and developers). I mostly designed components and some screen layouts. I also designed the business cards and the website we would come to use for our app.
Our Users
Through our user survey, we learned about some of our target audience’s pain points and needs, as well as how we should prioritize the development of certain features and functions. We also learned if there was a need and use for this app and the results of the user testing reflected that yes, there is a need and use for the app.
Pain Points
- Forgetting their Compass Card at home and having to buy a new one to be able to use transit.
- Realizing that you have a low balance on your card and needing to get in a physical queue to reload despite being low on time.
- Having to use different apps for navigation and interruption alerts.
Needs
- To have your compass card always with you through your phone.
- To be able to reload your compass card whenever and wherever you are.
- To manage everything transit-related in one convenient app.
These were some of the questions and results of our preliminary survey.
Problem Identification
When riders first start using Translink, they have to know how to use Translink and its routes, get a compass card or ticket and make sure they have enough funds to get them to their destination. Even experienced riders may forget their compass card every now and then. The problem is that to learn how to use Translink, get a ticket or compass card, and fill up the funds of the card could sometimes be in different places. You would have to use different apps and go to different locations. Our app aims to solve that problem
Solution and Goals
Our solution is to develop a cross-platform application that allows you to find your route through Translink, buy tickets, and reload them for your trip, with the added feature of checking for live Translink updates. This would allow experienced riders to continue using Translink without losing time in case they are missing their compass card or if they are going to a place they are not familiar with. This would also allow new travelers to easily learn how to navigate through Translink with one convenient application.
Design Process
Taking our goal into consideration, we began the design of our low fidelity and medium-fidelity prototype. I was personally in charge of the card page. For the low fidelity, it felt really strange and clunky. I initially drew inspiration from other mobile payment apps like Apple Pay or Google Pay. However, as designs and user testing progressed, I found that users much preferred a more Starbucks-styled card page, so I based the next design on that.
This is the low to medium fidelity designs that eventually got evolved into the high fidelity.
This is the final design that was given to the developers.
As the designing progressed, another team member created their own version of my cards page, and after minor user testing, we decided to progress with their design instead. After that, I decided to move on to designing components. With designing components, there was once again a hand off and evolution of ideas and designs especially when we handed the designs over to the developers. We had also decided to have one person finalize all the designs before the developers started developing the frontend to keep the style consistent.
These were alternate unused designs that also inspired or evolved into the final designs.
Final Designs
I am proud of the application the team was able to put together. I was also proud of the work I produced with this application. I had designed several components and one way or another, my designs had reached the final product of the app either completely intact or evolved into what is seen at the end.
This is the final design and interactions of the CompassPlus app.
Conclusion
Our solution is to develop a cross-platform application that allows you to find your route through Translink, buy tickets, and reload them for your trip, with the added feature of checking for live Translink updates. This would allow experienced riders to continue using Translink without losing time in case they are missing their compass card or if they are going to a place they are not familiar with. This would also allow new travelers to easily learn how to navigate through Translink with one convenient application.
But wait, there's more! Take a look at my other projects or contact me with the links below.
An organization's interal-use time tracking mobile application.
An app that helps you navigate your transit service.