Trailforks Mobile App Redesign

5 weeks, Feb/March 2017

Karen Cheng, Audrey DesJardins

Trailforks is a mountain biking trail database & management system, supplemented with Pinkbike content. 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 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 posed this challenge — How might we redesign the Trailforks app experience in support of the full mountain biker journey – from locating and learning about a trail, to riding it, and sharing the experience with other Trailforks users?



Final prototype



Pain Points

  1. Information overload: Screen tightly packed with a massive amount of visual information (text and symbol heavy).

  2. General navigation: No logical hierarchy, or “home” to return to (currently, it's a map). Steep learning curve.

  3. Ambiguity of marks, symbols, colors: “Map legend” is difficult to read and requires excessive scrolling. The large number of icons and colors put significant strain on the user.

  4. Lack of customization: Can’t filter by user motivation/constraints.

  5. Missing the “stoke” and cool/fun factor: The app is very rigid in style. It’s text heavy and does not include any images.  


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.