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.

Currently, 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 for ourselves — 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


Revised task flow + initial screen concepts

  1. Information overload: Screen tightly packed with a massive amount of visual information (text and symbol heavy), seems to be enough data to crash your phone and take up undesired amounts of memory.

  2. General navigation: No logical hierarchy, or “home” to return to (currently this is the map). Steep learning curve to learn how the app works.

  3. Ambiguity of marks, symbols, colors: Lengthy “map legend” is difficult to read and requires excessive scrolling. The large number of icons puts significant strain on the user. Color schemes also compete. 

  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, which relates back to its utilitarian function. It’s text heavy and does not include any images beyond the map.  


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 these mobile apps (from left to right): Strava, Washington Trails Association, AllTrails, Mountain Bike Project, Airbnb


User Research
We interviewed two participants, Rick, an active outdoorsman, and Caitlin, a casual hiker. We also spoke with Trevor May, the main Trailforks developer to get a feel for his intent in creating the app.

user research.png


My Role


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

Trail Info
The trail info solution incorporates a fixed tool bar at the bottom of the screen 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 the mountain biking associations that maintain the trails for riders. 



The settings screen is fairly straightforward, displaying common language and logistical settings within the app. The main feature of the settings screen is the emergency information, and how that was made more accessible. It visually displays map location while giving concrete coordinates and a ‘Call 911’ button, providing all the information necessary in the event of low battery during any emergency.



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

The segmented control at the top allows for a quick overview of the selected trail’s elevation. The animation shows how users can ‘scrub’ the graph to see how the elevation changes as the distance changes.