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
Screenshots of Trailforks interface as of January 27, 2017.
Overall information overload
No navigational hierarchy
Ambiguity of marks, symbols, colors
Lack of customization
Missing the cool/fun factor
- Improve existing onboarding
- Build a homepage, employ tab or navigation bars (currently missing)
- Create additional layers of customization based on specific user inputs, for example: filtering what symbols/icons are seen
To understand how outdoor apps and review services function, we examined Strava, Washington Trails Association, AllTrails, Mountain Bike Project, and Airbnb.
To understand how new users would use the app, we interviewed Rick, an active outdoorsman, and Caitlin, a casual hiker.
I was responsible for the design of the trail info screens and settings screen, along with animating two microinteractions.
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.