Image of trail-n-plan



ux ui web

Trail-n-Plan is a personal User Experience (UX) & User Interface (UI) project. It is prototyped in response to my friend’s request who want to see a single-app that can plan and manage both trail route and logistics to collect user preferences and automate summaries for this trail running community. Unfortunately, there is yet any similar single-app that achieve it.

“An amateur trail / marathon runner feels complicated to manage manually entered logistic planning data for each group trail running exercises. How may we simplify and automate the planning and data & collection management?”


  • Create a mobile integrated app for the group and other like-minded users to create and edit their personalised trail routes and logistic arrangements for a group of people.
  • The platform will replace the group’s existing method of using an online trail planner and spreadsheet to manage complex activity planning data.

Research Methods

  • Competitors Analysis - Comparing application from Route Planning Applications and Events / Logistics Planning Applications
  • Online Surveys - mainly targeting trail walking, hiking community, and enthusiast.

Project Timeline


Online Survey

A Google Form online survey is conducted, and received 27 responses.

Others include: Local or cities’ Trail Map, Viewranger, AllTrails.

Reasons of using the apps or websites that responses selected for the activities includes:
  • GPS and navigation
  • Route planning
  • Convenient, straightforward to use applications to get estimated time, distances
  • Locate supplies, facilities, entrances and exits
  • Understand the route with images already included
  • Useful technical information such as track info, rating, difficulty
  • Free Applications
Challenges on using the selected applications:
  • Limited network coverage in the hiking routes
  • Some advanced functions are not free
  • Insufficient trail info on Google Map
  • Complex management to handle members’ information on a spreadsheet
  • Some inaccurate or too much information
  • Navigation occasionally becomes inaccurate on some tracks

Others include: Other comments from trail runners on specific route, Others’ performance on the track, Photograph of landmakrs or markes and recommended gear to bring.d

Competitor Analysis

Given the prototype idea does not have a preexisted reference, the analysis is separated into two categories of:

  1. Route planning applications, and
  2. Event / logistics / planning or documenting applications

Key Findings

  • Google Map is one of the most popular route planning app.
  • It is mostly used to plan hiking, trail running, cycling and camping.
  • However some map technical info is missing for mobile app version.
  • Social Media or messenger app platforms are the most convenient option (to date) to collaborate, chat with members / other people for planning events or activities.
  • Having technical info of the route would help to understand the difficulty of completing the trips.
  • Custom features such as adding notes, logistics planning along the route on the map are highly recommended.

Affinity Mapping

This mapping organises facts from research into related groups and categories.

Empathy Mapping

This mapping reflects the findings and draw possible solutions.


A fictional profile to represent a potential user type for the prototype app.

Customer Journey

This maps out the insights about user experiences prior to the prototype


This diagram show how each of the features evaluated.

Crazy 8

8 quick mockups on responding a particular feature.


A fictional story of using the new prototyped app.

User Flow

Font, colours



Source Sans Pro (Bold)

Source Sans Pro

Colour Inspiration

Barrenjoey Head Lighthouse, Palm Beach, NSW, Australia (Photographed in Dec 2018)

Final Prototype


With flow indications

Selected preview

Picture of Login screen
Login screen
Picture of Home screen
Home screen
Picture of Group event invite
Group event invite
Picture of Place search result details
Place search result details
Picture of Stop added
Stop added
Picture of Trail plan completed
Trail plan completed
Picture of Add event details
Add event details
Picture of Event summary screen
Event summary screen
Picture of Overall logistics plan
Overall logistics plan
Picture of Screen of Adding personalised logisics details
Screen of Adding personalised logisics details
Picture of Event stop preview
Event stop preview
Picture of Screen of Travel arrangement and carpooling option
Screen of Travel arrangement and carpooling option

Possible Future Development

  • Make a web-based platform to see every planned details on larger screens.
  • More custom functionality, fields, unit controls.
  • Multiple route branches.
  • Use open-source maps for more customisations (when it becomes a real project sent to development).
  • Long-term: Develop solutions on exporting entire event planning as PDF from any devices.


A heartfelt thanks to UI UX Course mentor Julio Castellano and the classmates of Academy Xi for all the valuable feedback to the project.