Trailforks Mobile App Redesign

Duration
5 weeks, Feb/March 2017

Advisors
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

 
 

     Onboarding

     Map navigation

     Trail info


 
 

Final prototype

 
 
 

 
 

Pain Points

Screenshots of Trailforks interface as of January 27, 2017.

 Onboarding

Onboarding

 Initial map view

Initial map view

 Map legend

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
 
 

 

Research

 

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. 

 
 

 
 

Settings
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.

 

 
 

Microinteractions
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.