About the Project

DB Streckenagent combines public transport and sharing providers to allow seamless transport in all regions of Germany. As a UX/UI Designer at Mobimeo one of my main areas of expertise was the flow for discovering different transport options on the map.

The Situation

We were facing the problem that our users needed to subsequently select vehicles from the map to compare them. This pattern would sometimes make the search for a specific type of vehicle a lengthy and frustrating task. To speed up this process and enable users to quickly find a satisfying transport option we developed a list view showing vehicles and stations around the user's location.

List, Map and Filters

Based on the results we restructured the list items to contain the most important information. For the public transport category the list item contains all lines that depart from that station. Since the number of departing lines often exceeds the width of a list item, the lines overflow the screen and users can swipe through them horizontally. This maximizes the amout of information per list item. We also emphasized the map as a tool to help users understand what they actually can see in the list and added a circle that shows the average distance that can be walked in 10 minutes. Filters have been added to the map to allow cross-category filtering.

Updating Behavior and Reducing Anxiety

When selecting a vehicle the list needs to be up to date to prevent users from running into a stale selection. Showing a skeleton loader proved as a powerful tool to tell the user that the list is now up to date to reduce anxiety. However, continously showing loading skeletons in an active list view might distract users while browsing vehicles. To solve this, we update the active list in a visually less prominent manner, simply instantly replacing stale items with valid ones. When users change category, we show a skeleton loader to indicate that the new list is up to date.

Selecting Bikes

Bike Sharing typically consists of different bike types that are organised in large stations and also free floating vehicles. Being near to a station that includes a lot of similar bikes would quickly fill up the list with similar vehicles that have the same distance to the user, so we needed to come up with a clustering logic for bikes. To find the correct mental model for this I conducted another small round of research, this time internally. One option clustered the bikes by stations, the other one clustered by bike types. Figma added variables and conditions shortly before I created the protoypes, allowing me to create the whole setup for testing on a single day.