ui ux web
Academy Xi - UX/UI Design Elevate Certificate
UI UX Personal Project
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.
- Competitors Analysis - Comparing application from Route Planning Applications and Events / Logistics Planning Applications
- Online Surveys - mainly targeting trail walking, hiking community, and enthusiast.
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.
Given the prototype idea does not have a preexisted reference, the analysis is separated into two categories of:
- Route planning applications, and
- Event / logistics / planning or documenting applications
- 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.
This mapping organises facts from research into related groups and categories.
This mapping reflects the findings and draw possible solutions.
A fictional profile to represent a potential user type for the prototype app.
This maps out the insights about user experiences prior to the prototype
This diagram show how each of the features evaluated.
8 quick mockups on responding a particular feature.
A fictional story of using the new prototyped app.
Source Sans Pro (Bold)
Source Sans Pro
Barrenjoey Head Lighthouse, Palm Beach, NSW, Australia (Photographed in Dec 2018)
With flow indications
Group event invite
Place search result details
Trail plan completed
Add event details
Event summary screen
Overall logistics plan
Screen of Adding personalised logisics details
Event stop preview
Screen of Travel arrangement and carpooling option
Prototype (via Adobe XD)
- 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.