Trailforks Mobile App Redesign


5 weeks, Feb/March 2017

Karen Cheng, Audrey DesJardins

Trailforks is a platform for riding associations to keep track of trail conditions, builders to log work & riders to share and plan their rides.

The Trailforks mobile app is extremely utilitarian. It has a steep learning curve and is difficult to understand for non-mountain bikers, such as myself. In collaboration with Coreen Callister, Monica Niehaus, and Jen Strong, we aimed to simplify the Trailforks app by focusing on trail location/discovery and sharing the experience.



Current Design → Redesign



Map Navigation

Trail Info


Pain Points

Screenshots of Trailforks interface as of January 27, 2017.


Initial map view

Map legend

  1. Overall information overload

  2. No navigational hierarchy

  3. Ambiguity of marks, symbols, colors

  4. Lack of customization

  5. Missing the cool/fun factor


Design opportunities

  1. Improve existing onboarding

  2. Build a homepage, employ tab or navigation bars (currently missing)

  3. Create additional layers of customization based on specific user inputs, for example: filtering what symbols/icons are seen




Competing Apps
To understand how outdoor apps and review services function, we examined Strava, Washington Trails Association, AllTrails, Mountain Bike Project, and Airbnb.


User Research
To understand how new users would use the app, we interviewed Rick, an active outdoorsman, and Caitlin, a casual hiker.

user research.png

My Role


I was responsible for the design of the trail info screens and settings screen, along with animating two microinteractions.

Trail Info
The trail info screen incorporates a fixed tool bar at the bottom for quick access of potential tasks. Aligning with our focus on personalization, I opted to make the ‘Donate’ feature more visible, as donations go to associations that maintain the trails. 


The main feature of the settings screen is emergency information. It displays map location, coordinates, and a ‘Call 911’ button, providing the information necessary in the event of an emergency.


The microinteractions I animated include movement of the elevation chart and a payment processing animation.

The segmented control allows for an overview and the selected trail’s elevation. The animation shows how users can ‘scrub’ the graph to see how the elevation changes as the distance changes.