With 300,000+ hand curated trails in over 100 countries AllTrails is the leading source for hiking, biking, and running trails. My role: Half of a small in-house design team I worked with the Design Director to identify opportunities and build out solutions.
AllTrails was undergoing a significant product overhaul to address design debt and refresh its outdated design system and components. A crucial part of this process was developing a new visual system for icons to unify and modernize the app's symbolic language. Integrating the IBM Weather API presented an ideal opportunity to create a comprehensive set of weather icons, as it required 47 distinct icons to represent a wide range of weather conditions.
Our goal was to keep users engaged within the AllTrails app by integrating a weather feature that would enhance their planning experience. Users rely on AllTrails for planning various outdoor activities such as hiking, running, and biking, and accurate weather information is vital for their plans. By incorporating a weather section into the trail information page, we aimed to reduce the need for users to switch to external weather apps.
.jpeg){kind=icon}
To achieve this, I designed a set of medium-weight line icons in the brand’s color palette. This design choice ensured that the icons were both visually consistent with other app elements and easy to scan. The challenge involved differentiating between closely related weather conditions, such as 'Wintry Mix' and 'Snow Showers,' which required careful attention to detail and creativity in illustrating subtle variations in precipitation.
The new weather feature successfully kept users engaged within the AllTrails app during their planning process. By providing essential weather information directly in the app, users no longer needed to leave the platform to check external weather apps. The redesigned icon system, with its clear and cohesive styling, contributed to a more seamless and user-friendly experience, aligning well with the app’s overall aesthetic and functionality.
