Wireframes and Usability Testing
After the research phase and defining the functionalities and goals for the new app, we started drawing wireframes. We didn’t design the entire application, as that would have been unnecessary at this stage. Instead, we focused on the main flows of the app, such as ticket purchasing, route search, and extended registration for purchasing a tram ticket, as well as all the new functionalities like adding a favorite address.
Usability Testing
Usability testing of wireframes is more efficient and cost-effective than fixing design or development errors later on. The testing involved a large number of users from different target groups, such as tourists in Bratislava, elderly individuals who buy paper tickets, and regular users of the tram ticket app.
Goals of usability testing:
- Achieving main goals – to verify whether the new application helps users quickly and efficiently accomplish their primary objectives, such as purchasing a ticket, travel cards, or searching for a route
- Identification of issues – to identify problems and frustrations that users experience when interacting with the product
- Testing new features – to assess how users respond to the new functionalities of the application.
Results of Usability Testing
User testing exceeded our expectations. Users generally found the application to be simple, logical, and were able to use it without major issues. Of course, we did uncover a few interesting findings:
The Magic Link Works
For faster login/registration, we decided to implement the magic link. The user doesn’t have to remember a password, eliminating frustration if they forget it and the time spent resetting it. However, we were concerned about how older users would react.
The result? Older users are familiar with magic link login, know how to use it, prefer it, and are happy they don’t have to remember another password.
Respondents Added Tickets for Later Use
When purchasing a single ticket, the user can add tickets for a companion, luggage, or pet. These tickets are for the same route and time. However, this wasn’t clear from the wireframes. 50% of respondents thought the ticket was for "later use" and could be used at another time. This would have led to frustration and wasted money.
In the design phase, we added a prominent banner to the screen to explain this functionality.
Disclaimer: During design testing, this functionality achieved 100% success.
Tourists Might Have Issues with the QR Code
A small detail we wouldn't have noticed without the respondents. The QR code on the active ticket is intended for the inspector to scan, and the user doesn't need to do anything else with it. However, during testing, we discovered that for users, especially tourists who are used to different forms of travel, this may not be clear. Respondents were unsure whether they had to scan the QR code at the entrance, show it to the driver, or what to do with it.
In the final version, you can now see that the QR code is accompanied by a small badge explaining that the QR code is for the inspector.
Stop, Platform or Route Name?
During initial interviews, we learned that respondents primarily use Google Maps to search for routes. Therefore, in the route details, we chose to replicate familiar patterns and element layouts from this product.
But how did it turn out?Although users knew the bus number and the time of arrival, most of them were confused by the written data - the stop name and route name. They often swapped them, confused them with street names, or simply didn’t understand what the data meant.
During the design phase, we reorganized this information based on UX principles to improve clarity and the overall user experience.
Disclaimer: This functionality had a 100% success rate during design testing.
Assistance with Zone Selection
This issue has been apparent from the start of the project. People simply don't understand the zones – they don't know how they're distributed, how they relate to tickets, and often end up purchasing the wrong tickets because of it. This problem continued to appear during the usability testing as well. While users could select or remove zones, they still weren’t sure which zones they needed when purchasing a travel card.
Originally, we considered creating an interactive map to help users understand and select zones. However, this solution turned out to be too complicated, time-consuming, and financially demanding. Instead, we decided on a simpler version. Using a banner, users are directed to a screen where, by entering the start and end stops of their route, the system displays all the zones the route passes through. With one click, they can add them to their tram pass purchase.
