September 2025
View High-Fidelity Prototype (Newer Version)
Project Overview:
Transperth is a local app in Perth, that many people use to navigate the city via public transport, planning journey’s, checking SmartRider balances, tracking transport, viewing service disruptions and cost information.
Problem:
Users are often left unsatisfied struggling with the apps confusing interface and unreliable performance with the frequent unexpected journey resets, as well as the inability to pay through the app in the case of not having your SmartRider on hand.
Goal:
My goal with this redesign is to tackle some of the common user challenges, creating a simpler, more stress-free experience. My new design will include a clear tabular interface, easy access journey history, and an easy payment option, like a QR code, for when a SmartRider isn’t available.
My Role:
My role in this personal project is to redesign the Transperth app to be more reliable and enjoyable to use, so navigating Perth’s public transport feels easier and less stressful for everyone. I will do this as a UX Designer, completing user research, designing and refining my prototypes.
Understanding The User:
My User Research helped me pinpoint common frustrations users found when using the app, with many people mentioning the apps unreliability with your journeys and history constantly being wiped when the screen resets. Users also mentioned how tricky it is to use and understand initially, with a few additional mentions about slow updates/live tracking and inability to pay through the app for transport.
Comparison – Transperth Vs Competitors:
| Transperth | Google Maps | Transit App | |
| Ease of Navigation/Usability | Transperth is only relevant locally in Perth and new users frequently find it difficult to navigate. | Globally accessible and simple to use, helping users everywhere explore with regularly updated information. | Not as widely used locally, although a clean interface that makes planning trips quick and easy. |
| Journey Planning & Options | Limited to Perth, showing routes and timetables in the network (buses, trains). | Offers many modes of transport and the time they will take (bus, train, walk, drive). | Focused on public transport with many route options. |
| Real-Time Updates | Real-time info is limited, with delays and temperamental service update alerts. | Real-time traffic and transit info that is reliable. | Shows live vehicle locations and is generally reliable with notifications for delays. |
| Payment & History/Convenience | Having a smartrider is required and it isn’t fully integrated in the app for top-ups and journey history frequently gets lost. | Locations and routes can be saved, but there are no payment options. | Journey history can be viewed, favourites can be also be saved but their is no payment integration. |
Informal Interviews – Friend Feedback:
While most participants found the Transperth app useful overall, they also expressed frustrations.
“I love the Transperth app, however I do not like that it resets every time you go back into it and you also need to put in the address of places, unlike with Google Maps where you can type in the name of the place rather than its location.”
– Friend 1 interview
“I dread opening it or learning how to operate it. I found out how to track a bus and that’s all I use it for. I don’t want to learn how to use it because it is so frustrating.”
– Friend 2 interview
Insights:
- Overall users express satisfaction with the app, but dislike losing progress when the app resets.
- Users want more flexible search options (e.g., locations and places names instead of just a complex address).
- Many users avoid using all features of the app due to its poor usability, simply sticking to the most basic features to avoid frustration and confusion.
Online Reviews:
| “Very average. Actually it’s pretty bad. Worst part is it refreshes and loses your current journey, which you can count on happening every trip. So now you’re lost with no idea where you are, where to get off or which bus or train to get next. Typical Perth…” – Google Play review 1/5 ⭐ |
| “App is not intuitive and handling can be complicated. Important Information (like platform number or departure time) are displayed in a text block which makes it hard to find. A tabular design…would be much smarter. Transperth app developers may profit from looking at other (better rated) apps to get the idea how a good navigator and service app can look like.” – Google Play review 2/5 ⭐ |
| “Buggy. Refuses to provide directions to where I actually want to go, instead repeatedly defaults back to the first location in my favourites list. Very frustrating. Even when it does work, it’s essentially just a journey planner. No live alerts as you travel, no ability to pay via the app. Way behind what can be found in many other cities.” – Google Play review 2/5 ⭐ |
Insights:
- The frequent app restarts can mislead users causing confusion.
- Users want a more structured layout to make important information more clear; departure times and platform numbers.
- Users expect the app to provide payment methods and live alerts.
- The interface feels outdated, reducing engagement & trust.
Synthesized Insights:
- Journey Planner Reliability: Users find frequent resets & unclear guidance frustrating.
- Learnability & Usability: Users avoid features they don’t understand, finding the app difficult to navigate.
- Navigation & Information Layout: Important information is not organized well and is difficult to access.
- Limited Functionality: Users want in-app payments & live alerts.
- Visual Design: The outdated look reduces engagement & trust.
Pain Points:
Confusing Layout:
Users struggle to navigate and find the information they are after.
No Payment Features:
Users are unable to pay through the app.
Journey Planner Resets:
Users journey always resets and they lose their progress.
Persona’s:
Carl’s Problem Statement:
Carl wants the app to stop resetting mid-trip and be easier to visually scan to make being on time to work and his appointments easier and more stress-free.
Tessa’s Problem Statement:
Tessa wants the app to have an inbuilt payment system and be easier to use so she can navigate the city better, making her trip more enjoyable.
Sam’s Problem Statements:
Sam wants the app to be more efficient so they don’t have to constantly reinput information, simpler to use and include a payment system as they are a student who constantly uses transport and needs it to run smoothly for daily usage.
Redesigning:
Flow Chart:
Using ‘JustInMind’ I created a flowchart for the Transperth current flow beside my redesigns flow to compare the navigation.
The initial Transperth apps flow shows how they have no payment methods, and a self-reset that wipes the user’s history.
My new redesigned version includes journey saving along the way and a payment option to use the apps personalized QR Code to tap on and off in-place of a Smart rider.
Ideating Homepage Layouts:
These are some designs I came up with for the homepage, ensuring it would include a quick search option, easy access to the QR Code, journey history/favs and nearby departure times.
Paper Wireframes:
Dashboard/Homescreen:
For the redesign I really wanted to combine the originals search shortcuts (favourites, journey & route) into one thing. The goal was to reduce touch points to limit user confusion and make it easier to navigate overall.
I kept the recent and favourite journeys on the front page, with the option to begin the route for faster use.
I also kept the original shortcuts in the top left corner as for this redesign I am only focusing on the main pain points I’ve discussed and not every aspect of the entire app.
I did however change the bottom shortcuts, replacing the original design with a quick access button to the users personal QR Code that they can use in place of a Smartrider and an option to return to their current journey if presently ongoing.
Search Screen:
My aim was to keep things simple, so this screen does showcase a lot of whitespace to help focus on the action of searching your desired destination; this can be via location, address or place name.
I also kept the microphone to give users options to how they can input destinations, making it more user friendly.
I also included brief outlines of recent searches to make things faster for the user.
I will note I did not add saved or favourites to this page as it was present on the previous screen and users would likely use the quick click then if they so desired that destination, otherwise they can search it or simply use the back button to return to the home page.
Input Destination:
Still aiming to not over complicate things, I’ve kept information about locations minimal on this page only noting places distance, addresses and opening hours here.
This page focuses on bringing up the strongest matches to your search, with the closest locations being listed first.
Users can go back to the homepage or alter their search on this screen.
Journey Details:
On this screen, I tried to implement a tabular design, displaying information in rows; station/bus number, departure & expected arrival times, costs, address, etc.
I also implemented a filter that users can use to edit journeys, implementing detours or changing leave date, time or location if they want to use it to plan for future usage.
You can also add to your favourites on this page.
This page has a simple ‘start’ button at the bottom that users can hit after reading through the journey’s details to begin.
QR Code:
Once a user has begun their journey their QR Code will naturally appear for use in the case that they don’t have their Smart Rider on hand. I also implemented the QR Code’s number beneath in the circumstance of a QR Code reader potentially not working you could manually enter a personal QR number.
Beneath this is previous and ongoing payments in order of recent to oldest so you can easily track your expenditure.
If a user does not wish to use the QR Code because they have another payment method, they can easily click the back button in the top corner to return to their ongoing journey.
Ongoing Journey:
For this screen the user can see their location on the map, highlighting the journey completed so they can differentiate what they’ve completed and how much further until they reach their destination. (Automatic saving of progress).
Using the buttons in the top corners users can return to the homepage and the journey will proceed or save it to their favourites.
(I note I forgot to implement a method to cancel the journey so I will do so in future).
The lower half of the screen displays what’s next on the journey as well as alerts about delays, etc.
At the very bottom of the screen, users can easily pull up their QR Code for when they are ready to tap off of the transport.
Completed Journey:
For this page I wanted a simple way to let users know they had arrived at their destinations, showing a summary of the trip including; prices (payment history) destinations and travel time.
I added again an option to favourite the journey and a return to the homepage.
I also implemented a smart suggestion at the bottom of the screen that offers a return journey plan to help reduce stress for users.
Low-Fidelity Prototype:
Using ‘Justinmind’ I prototyped on an iPhone 16 Max screen size as most users access the Transperth App via their mobile devices.
When prototyping I realized my design was missing some interactions, such as a way to make it to the final page as it would usually be automatic upon completion (based on users live location), but for testing practices I included a blank square that I will evolve during the high-fidelity prototyping phase; making it an option to cancel the journey.
Digital Wireframes:
Low-Fidelity Prototype:
High-Fidelity Prototype:
Font: Montserrat
Yellow: #FFC20E
Dark Grey: #333333
Light Grey: #8A8D8F
Green: #008543
Using Figma, I created a high-fidelity prototype, maintaining the same screen size as in my low-fidelity prototype to ensure consistency. I aimed to preserve elements of the original app’s layout while adhering to its brand palette and typography. Since exact information wasn’t publicly documented, I approximated the Transperth colours and font as closely as possible.
To enhance usability and realism, I added additional screens, including a history screen so users never lose progress, multiple route options, and a payment method via QR code for convenience if a SmartRider is lost. Stops are visible on the map with accessible alerts, creating an interactive experience that closely resembles the actual app.
Key Features:
- Transport icons for quick scanning: I included coloured icons; bus train, walking, etc. to allow users to briefly scan the screen and understand their mode of transport.
- Voice Search: The microphone in the search bar allows users to say their destination aloud to improve accessibility & ease of use.
- Highlight important Information: I emphasized titles and costs to help users quickly find key details.
- Interactive trip Flow: Users can toggle to see more or less information about stops during an ongoing journey (selecting more to see stops already passed).
- Trip management Options: Trips can be cancelled, completed or saved to favourites (via heart icon) with frequently visited trips auto-saving.
- QR Code Accessibility: The QR Code is available on majority of the screens, allowing users to scan on/off transport without interrupting other app interactions.
- Alert and filter elements (non-interactive): I included an alert bell for service updates and a filter icon to refine trip options. Although, these elements are not currently interactive in the prototype, it shows their placement to demonstrate intended functionality.
Learnings:
Challenges & Solutions:
- Branding: Finding the official colours and typography was difficult, so I approximated them as closely as possible.
- Figma limitations: It was not possible for me to implement true live updates, and occasionally my screen flows were inconsistent, but I managed to resolve the errors and create a smooth navigation.
- Layout design: I learned more about implementing tabular layouts for trips and payments which helped me create a clean, simple interface that is easy to navigate, reducing user frustrations.
Key Learnings:
Designing quick-glance information taught me how to use small icons, spacing, and highlighted text so users can absorb details rapidly. Working on an interactive and flexible design helped me understand how giving users control over the amount of trip information improves usability. I also discovered the importance of balancing space on screens to prevent them from feeling too blank or overcrowded, which makes the interface clearer and easier to read. Finally, adding features like history tracking and accessible QR code payments showed me how thoughtful design can enhance convenience and create a more practical, user-friendly experience.
Before & After’s:
Homepage:
Shortcuts:
Search:
Input Destination:
Journey Details:
Journey Progress:
Further Testing:
I decided to reopen this project, making changes to the design to give it a more modern look. I removed majority of the yellow although it’s a brand colour because it was too stark in comparison to the green, giving the app a harsh, outdated appearance. I opted for rounded buttons and removed the highlighted text boxes, realigning text and font styles throughout pages to make it more consistent.
My aim with testing was to gain comparitive feedback from Transperth users to see if my version provided an improved experience or not. I created a survey that would gather data that I could turn into real metrics and facts to show what users prefer and why. I got some friends who have used the original Transperth app to test it out to see if my changes really made a positive impact and I also tired sharing my design with the local facebook group. Unfortunately it was unsuccessful in gaining any progressive data as viewers tried the prototype, but did not fill out the linked feedback survey. Although I recieved comments the only constructive critisim I really obtained was a breif mention that the redesign was a bit cramped and required more spacing.
Thankfully my friends were able to provide me with real data and I was plesantly surprised to see the mixed opinions and great ideas they shared for further development which I have summarised.
Successes:
– Star rating improved by 2 stars
– Everyone was able to complete all the asigned tasks within the redesign with ease
– 50% of users confirmed they would use the redesign over the original Transperth app
– Users found it easier to navigate & enjoyed being able to see history
– Satisfied with the QR Code placement
– Users enjoyed the completed trips overview
– Projects goals were successfully met (simply layout/navigation, access to history and inclusion of a payment method)
Tips:
– Differentiate bus & train better; include a line breakdown including types of fare (concession, student, etc.)
– Include date/day for trips
– Make it possible to relabel a location, e.g., home, work, etc.
– Make the cancel button larger
– Include an option to write notes for oneself like ‘walk on the left side of the road,’ etc.
– One user mentioned that having a completion button is not neccessary and they’d rather it automatically finish as you can cancel
– Include more fonts, simplify layout on homescreen, making it more interactive to find further information to reduce overcramming the screen
– Include remaining credit balance
– Larger headers on the homescreen
Overall, I would consider this project a success as everything I wanted to implement was achieved, this includes features to view history, access a QR Code for payments and minimizing the interface. Moving forwards I would want to include a larger group of people to test out the design.
I would also like to implement majority of the feedback tips; with a paticular focus on showing how users can manage funds. I’d like to better organise content on the homepage; allowing users to select to see more or less information as desrired. I would also like to implement finer details like dates and personalisation features such as renaming locations and leaving self-notes.
I found it really satisfying to get real user feedback as it gave me a sense of achievement and gave me insight into my own design, touching on things I hadn’t even considered myself which really helps expand my knowledge and way of thinking.
Thank you for taking the time to read through my case study.
I’d love to hear your feedback or thoughts on this redesign!
