Public transport app.
Why was I leaving my house when I should have been boarding the bus? A curious case of inconsistency.
The "Departure in" label does not refer to the searched address but to the bus’s departure time.
The layout combines the "Departure in" label with the timeline, which can misleadingly suggest that it indicates when you should leave your searched location. However, it actually refers to when the bus departs, requiring users to do a quick calculation to determine their actual departure time.
The green color, which highlights the searched address and the journey's starting point, is also used for the bus departure time. Color coding should help users match related information, in this case, it creates a misleading visual connection, leading to confusion.
The boxed elements represent the same point in the user journey, yet lack visual cues to indicate they belong together.
• I updated the phrase “Departure in” to “Leave in” for journeys that include walking.
• I repositioned the countdown to the first transport’s departure next to the transport icon for improved clarity.
• I added a location icon to the timeline to indicate that walking is part of the journey.
I used red for the “Leave in,” “Departure in,” and the walk icon and time to alert users if they’re running late. This design choice clearly shows, how late the user is. How much time remains until the bus departs.
I designed this info bar for scenarios when the user is already near the bus stop, and the bus departure time is approaching.
• The phrase “Leave in” reverts to “Departure in” to indicate the planned bus departure time.
• The large time icon is set to green, signaling that the user is on time for the bus.
This info bar state activates once the user is on the bus and on schedule:
• The phrase “Departure in” changes to “Arrival in,” now indicating the arrival time.
• The location icon shifts ahead of the walk icon and time, marking the end of the walking phase.
• I removed the time reference next to the bus icon and ID to reduce information noise.
In the original screen, the walking route is shown in grey, visually separating the searched adres from the journey.
I updated the walking route color from grey to green for consistency with the rest of the route. This unifies the journey visually, allowing users to see it as a cohesive path.
In this segment, the part of the journey where the user is running late is displayed in red. This not only alerts the user but also maintains consistency by using the same color to represent all stages of the trip.
The walking route to the bus stop is now displayed in grey. This indicates the progress of the trip and aligns with the color scheme used in the timeline.
The detailed timeline available from the sidebar does not need to be changed but it does become a lot clear with the new info bar and the corrected Leave in time.
In this view, the user has boarded the bus and is traveling. The walking route is displayed in grey, while the completed portion of the trip is shown in a lighter green.
The departure time displayed was not aligned with the searched journey. I was relieved to confirm that the issue lay with the product, highlighting a basic yet critical inconsistency.
