Project Overview
Challenge: Lisbon’s public transport system lacked a digital solution for managing and recharging travel passes, forcing users to rely on physical kiosks and enduring long queues.
Solution: Designed a mobile app prototype that allows users to recharge passes, access real-time schedules, and navigate with ease through a multilingual interface.
Key Results: Usability tests with 6 participants showed high satisfaction and confirmed the app's intuitive design.
The first step was to understand the current state of Lisbon transportation system. Let's see some data!
Users report long queues for pass recharges, overcrowding, cleanliness issues, frequent machine malfunctions, lack of digital renewal options, and unpredictable schedules. For a more in-depth look at the research, click here.
With all this in hand, I created our Persona to guide the decisions regarding features and interface, allowing me to align with the needs.
Here, I'll be presenting just one of these personas as a case illustration, you can see the full version here.
So, now let's see what the competition offers…
Our objective was to study similar apps and solutions that users know. We aimed to analyze four competitors to understand their services, gather important information for our app's design and functionality, and ensure our solution includes schedule checking, trip planning, and ticket management features.
If you're interested, you can see the benchmarking in detail here
The decision was to prioritize the development of the pass purchase flow within the app
Let's focus on João, as an example. João's goal is to quickly recharge and validate his pass through a convenient method, enabling him to avoid queues and ensure that he arrives on time for his activities.
User Journey
🎟️ Selection: João selects the type of pass that best fits his busy schedule with the app instantly providing the schedules and routes for his convenience.
🔢 Quantity: He specifies the quantity of passes he needs, using the app's simulator to determine the best value for daily or monthly usage.
✅ Confirmation: The app instantly confirms the recharge and provides him with a digital pass, ensuring he has a stress-free start to his day.
💰 Payment: João securely pays for his pass using his preferred digital payment method, enjoying a quick and queue-free experience.
Now, let's move on to the design phase, starting with low-fidelity wireframe sketches.
Wireframes — First Proposal for the App
After finalizing the steps of João's user journey,I created low-fidelity wireframes using a "Crazy 8" exercise to generate diverse ideas quickly. Selected screens and elements were chosen for further refinement and development.
Prototype in Figma to Test the Idea
For concept validation, particularly for the validation of tickets idea, prototypes in Figma were created. This allowed me to focus on the solution's core concept and test its practicality before delving into detailed interface design.
User Testing
For concept validation, particularly for the validation of tickets idea, prototypes were developed in Figma in higher fidelity. Explore the full results here.
During 2 days, we’ve conducted individual tests with six people, remotely via Zoom. Here are the user testing results:
Here are some quotes from those interviews ⬇️
These testing sessions have proven to be really insightful about the positives of the app. However, some negatives were also mentioned, which we took as suggestions for improvements. Some of those suggestions were:
👁️ Making filter options more visible on the search screen.
🛑 Adding a feature to show/collapse stops on the route, would be particularly useful when there are many.
📱 Provide more informative instructions on how to use the QR code for validation.
🕝 Showing chosen departure and arrival stations in the purchase summary.
App Screen Redesigned Post User Test
After conducting the user test, we identified that one of our application screens required adjustments to enhance the user experience, ensuring inclusivity to people who are used to non-digital passes. Due to time constraints we were unable to complete a comprehensive review of all screens. However we prioritized this screen to ensure a smoother and more intuitive transition for users to the digital passes. We added a prominently placed “how to use it?” link at the bottom of the page, directing users to an animated short film that could clearly demonstrate the usage of the QR code.
Meet, Navegante (Final Result)
With these suggestions and the time running short, we’ve decided to quickly redesign the app and get all screens (from the chosen flow) ready for being showcased to the “public”. Here are some of the screens we’ve designed:
Additionally, we’ve also created a working prototype that you can play here.
What would I have done if I had more time?
Given additional time, my focus would have expanded to include the following strategic enhancements:
Expand Usability Testing Sample Size: To ensure a broad spectrum of feedback, I would have increased the diversity and number of participants in usability tests. I believe that this expansion would cater to a wider range of user behaviors and preferences, providing a richer dataset for analysis and subsequent design iterations.
Refine Design Clarity and Intuitiveness: My goal would be to revisit the application's design framework, streamlining navigation and interactions to ensure clarity and ease of use. This would involve a systematic review and redesign of user interfaces, particularly those highlighted by users as needing improvement.
Identify Friction Points and Redesign UI: Conducting a deeper investigation into potential areas of user friction would be a priority. By utilizing advanced analytic tools and techniques such as heat maps and journey analytics, I would ensure that improvements are user-driven and directly address the areas identified as critical by our user base to redesign UI.
Implement Live Tracking Features: To elevate the real-time utility of the app, I would introduce a live tracking feature. This would empower users with the ability to monitor their transportation options in real-time, significantly enhancing journey planning and reliability.
Multilingual Development: Recognizing the diverse linguistic needs of our user community, I would initiate the development of the application in additional languages. This inclusive design approach would not only cater to non-native speakers but also align with the global accessibility standards.
Establish a Collaborative "Delay Reporting" System: Inspired by community-driven platforms like Waze, I would create a mechanism for users to report and share updates on transportation delays. This feature would foster a collaborative environment, enabling users to contri
Thanks for reading this case study. If you have any questions or simply want to learn more about it, please reach out by email to hey@uxleticia.com or through LinkedIn.