ALLTRAILS ICON SYSTEM

The Opportunity

AllTrails was in the midst of an incremental product overhaul to address product debt and reskin the dated design system and components across the app. As part of that process we needed to develop a visual system for icons to establish styling for symbos across the app.

Implementing the IBM weather API was a lightweight integration into the product, and gave us the opportunity to build out a robust icon system as it required required a set of 47 weather icons to display the range of weather conditions.

Result

Building out the weather feature served to keep our users on our app throughout the planning process. Users come to AllTrails primary as a planning tool for a range of outdoor activities including hiking, running and biking. A key part of planning outdoor activities is knowing the weather forecast. By building out a weather section on the trail information page we saw users stay in the app rather than switching out to see that data on external eater apps.

Medium weight line icons in the brand palette won out as it the styling was scannable and matched the visual weight of the other screen elements.

Drawing a set of icons for the 47 different weather forecasts built into the IBM weather API meant trying to figure out the difference between ‘Wintry Mix’ and ‘Snow Showers’ as the API had 12 distinctions for snowy conditions. It was a fun little design challenge to draw subtile distinctions for the different types of precipitation.