Closing the Gap in Cotral's Ticket Purchase Flow
Industry:
Travel & Transportation
Project type:
UX Design
UI Design
Role:
UX Designer
UI Designer
Deliverables:
Hi-fi prototype
Timeline:
2 weeks
Problem:
Solution:
Process:
Usability Testing
Heuristic Evaluation
Design Decisions
Prototype
Outcomes
& Reflections
Usability Testing
Usability testing sessions were conducted in person using silent observation, allowing natural hesitation and behaviour to surface without interference. Three students who regularly commute by public transport were recruited as participants (none had prior experience with the Cotral app). Each participant was handed a phone with the app opened and asked to finish a single task:
On the first attempt, all three had to leave the ticket screen to find the price and the distance between two destinations to complete the purchase:
Two navigated back to the timetable screen, scrolled to the bottom to locate the price, then returned to complete the purchase
One left the app entirely to search for the route distance on Google Maps and verbalised frustration when she could not locate the correct ticket.
Heuristic Evaluation
Nielsen's framework was used to diagnose why those moments of friction happened.
Three of Nielsen's heuristics are directly violated in the current flows:
Design Decisions
Following the key findings from the Usability Testing and Nielsen's framework, the lo-fi wireframe targets the transition between the Search Results screen and the Ticket Selection screen (the moment where the current flow breaks down).
I came up with 3 redesign decisions:
Final Design
I translated the findings from the heuristic evaluation into a set of targeted design decisions. Given the scope of the project, the prototype focuses on the ticket purchase flow, demonstrating the key interaction from route selection to fare confirmation.
Below is the final design prototyped in Figma:
Outcomes & Reflection
Task efficiency: Steps reduced from a minimum of 6 to 4: a 33.3% reduction in task steps.
Back-navigation eliminated: Back-navigation to verify price drops from a likely occurrence to zero. The route summary is always visible.
Error risk: Fare selection errors reduced by removing the need to match price from memory. Only the correct fare is visible.
Information hierarchy corrected: Price visibility moves from below the fold to above the timetable, ensuring users see the cost before selecting a departure time.
Usability testing with the prototype: Conduct usability testing with real Cotral users to validate whether the redesigned handoff reduces task completion time and error rate in practice.
Localisation: Address the app's inconsistent language mixing between Italian and English (a separate but related usability issue that affects trust and comprehension).
This design project exemplifies how I can benefit your business.
Contact me if you’re interested in collaborating!
Or email me vananh.vivian.ha@gmail.com
See more projects:
