overview
Client
AllTrails
Scope of work
Address AllTrails members' biggest pain points when it comes to exploring routes on the map on mobile and web platforms as a way to increase the number of users who save an item from the map.
Outcome
Mobile map adoption more than doubled, from 12% to 28%. More over, the number of mobile users saving routes from the map view increased by 15%.
the problem
A frustrating discovery experience
AllTrails members found the existing experience challenging to navigate. As a result, members were four times less likely to save routes from the map view as compared to the list view of the same content.
The trail card carousel obscured a lot of the map, and hid focused content on mobile. Moreover, swiping the carousel often caused the map to pan to an unrelated location.
It was hard to choose different routes that started at the same trailhead. On web, a cluster would break into a large spiderweb of pins. On mobile, the user would need to zoom in very close to see every individual pin for a route starting from the same location as the others.
The map and list view were not one-to-one, in spite of members treating them as two views of the same content.
A content carousel that monopolizes the map view
On mobile, users found the existing trail card carousel not only frustrating because it took up so much map space, but confusing because it appeared unprompted and moved the map viewport if it was swiped.
On desktop, the trail cards on the map appeared only on hover, and clicking on them took the user to a completely separate view, making it incredibly difficult to preview a route before committing to looking at the route in detail.
The most popular route starting points are the hardest to view
It was hard to choose different routes that started at the same trailhead. On web, a cluster would break into a large spiderweb of pins. On mobile, the user would need to zoom in very close to see every individual pin for a route starting from the same location as the others.
the approach
Create a more intentional relationship between the map and list views, and lean on user intent as the driving factor for content on the map
The existing discovery map view was suffering because the relationships between different types of content were unclear; Content on the map was not clearly related to content in the list, and carousel items were not clearly related to the map view. That’s why the focus of my approach was in defining those relationships, and then running moderated usability tests to see if the defined relationships aligned with user expectations.
Align the map and list views
From qualitative research, most members using the mobile product expected the map view and the list view to be two views of the same content, which was not true of the existing experience. After working with developers to reconcile the two views from the backend side, I proposed introducing a stronger relationship between the map and the list by creating a hybrid experience where members could easily move between list and map more seamlessly.
Design prototype showing the transition from list to map, with the content staying constant
Introduce trailheads
To make it easier to select routes that started from the same location, I proposed introducing the concept of ‘trailheads’; numbered pins that would denote a popular starting point for multiple routes. This not only made it easier to tap on these types of areas, but had the added benefit of showing members where they could access the most options.
Change the trail card behavior to support map interaction
To create a more predictable experience on mobile, I recommended that trail card content should be controlled via the map. We would only show trail card content in response to a user choosing a pin on the map, and limit that content to match what had been selected. That meant that for singular route pins, we’d only show one card. For trailhead pins, we’d show a carousel.
To further ease exploration on the map, I updated the carousel to use a smaller trail card, bounded the route line to the viewport, and specified that the route no longer be de-selected if the pin leaves the viewport to make it easier to preview a given route.
On desktop, I introduced a few small changes to make previewing a route easier. First, I added a click state for the route pins, so that members could click, zoom, pan, and otherwise explore routes without fear of losing their selections. Second, I specified card positioning on the map to not collide with the route line when possible. Third, I introduced a hover state for list items on the left side of the screen, which allowed members to see the routes they are hovering over on the map without a trail card.
I tested the web changes in the same way as I had for mobile updates; via task-based moderated sessions with current AllTrails users.
The result
With these updates, mobile map adoption more than doubled, from 12% to 28%. More over, the number of mobile users saving routes from the map view increased by 15%. Additionally, the volume of unprompted feedback on the map experience for discovering routes decreased exponentially, showing that the new experience better met the expectations of members.
Even with that, I recognized that this solution would and likely should be a stepping stone toward more sophisticated map-based exploration using key points of interest and segment selection as future tools for route discovery. That work, however, is still in progress.