AllTrails Feature Add

Role: Research, UX Design, UI Design, Prototyping
Timeline: 2 Weeks
Background
AllTrails is a fitness and travel mobile app used in outdoor recreational activities such as hiking, mountain biking, climbing and snow sports. The service allows users to access a database of trail maps, which includes crowdsourced reviews and images. Maps are a necessity for hikers, along with others using the trail, and trail conditions can vary from day to day, hour to hour. This can impact what route a user chooses to take and what to wear and pack.
Problem
The application doesn’t feature live, real-time maps with trail conditions, obstacles, or immediate closures.

Discover

📑

Research Plan

First I needed to understand how and why trail users use available apps on the market and the features within said apps. Learning this will help plan the best approach to design the feature addition.
  • When and how do people use these apps?
  • What types of features currently solve this problem?
  • How helpful would this feature be and what is the best way to incorporate it?
  • What possible problems could we encounter?
🔍

Benchmark Competitive Analysis

Here I compared the Alltrails app to 4 direct and 4 indirect competitors, evaluating all of them on 10 key features which relate to solving our problem.
Benchmark Analysis for AllTrails
benchmark competitive analysis
Key Findings
  • All direct competitors offer downloadable maps, live gps maps with user location shown.
  • Only one competitor allows users to submit amenities or hazards which provides a great opportunity for this feature and improve on how FarOut designed theirs.
  • Amenities being displayed on routes was hit and miss with half our competitors.
  • No apps (direct and indirect) allow for a user to clear incidents. Since this was important to users for this feature to be relevant, this needs to be of focus in the design.
📃

Survey

I started by writing questions for the survey to gather insights around how and why the app was used for recreational activities. I also included open-ended questions about adding a new feature to discover how they would respond. I requested only people who have used a navigation app to complete the survey to rule out unrelated responses. Using Google Forms I asked the main questions:

  • What features do you use in those apps?
  • If you use the maps feature, do you expect to see where amenities are available for public use? (Bathroom, Water stop, Shelter, etc)
  • On the map would you expect to see where temporary hazards are?
  • Where would you expect to see a hazard alert displayed within the app?
  • Would this hazard alert feature be helpful to you?
Key findings:
  • Participants used both types of maps (downloaded and live) but downloaded was 27% more popular.
  • Trail information and tracking an activity were the next most common features used within the apps, then finding new trails and lastly reading and submitting reviews with the lowest usage.
  • 2/3 of participants expect to see amenities and hazards on maps, which are expected to be seen largely on the trail overview page, then while looking on a map. 82% of participants would find these features helpful.
😎

Design Decisions

  • Have an “update maps” button or alert for users to update their downloaded maps if information has changed.
  • On the trail information screen include an alert section which displays the number of current alerts pertaining to that trail.
  • Include icons with each hazard when a user is on the add hazard page. These icons can also be the same used on the maps. Ex: a broken tree icon for fallen trees. This also applies to each amenity.
  • Once a user presses on the hazard show the type, timestamp with day and time, details if applicable, and the ability to “edit” the hazard to mark it as cleared.
  • Emphasize once a hazard has been marked as cleared by more than one user it is removed from the map.

Define

🌄

User Journey Map

Creating a user journey was helpful to understand not only the interaction points, but the thoughts and emotions from start to finish of using the app. This also created possible design opportunities I had not thought of before.

User Journey for Samantha
user journey map
💪

Hero Flow

From the journey map I created a hero flow for the pages that would be necessary to change or create to add this feature, indicating what the key interaction on each screen is.
Hero Flow for Samantha
hero flow
🖌️

Sketches

The next step in my design process was to sketch out wireframes for screens the feature needs to be added to. I created a few versions of the main trail overview screen since that screen contains the most information and serves as the first point of interaction. Since I wasn't able to change any existing UI, I added a section where the user could find these hazard notifications right away without having to scroll looking for updates. I then sketched two hazard add forms to show the important elements for those forms based on what information a user would want to see.
sketches

Develop

🎨

UI Mockup

My next step was designing the necessary screens to incorporate this new feature while matching the existing AllTrails UI. Using Figma I designed the screens a user would interact with during the entire process of using this feature to use them in my prototype. Finding icons for visual aids for the hazards and amenities was the most difficult because nothing matched the current UI. Some options were also hard to define with an icon (like muddy area) so I had to broaden my search to find imagery.
User Interface Sample
UI mockup

Deliver

🤔

Usability Tests

I developed an unmonitored usability test using Maze to observe how users interacted with the screens and discover what errors or areas of confusion there are. To complete this I had participants test the following:

Task: Browse trail overview & map hazards
Description: Browse the trail overview page to see the current hazards, then look at the map for more details.

Task: Add a hazard to the map
Description: Pretend you are in the middle of a hike and come across a wild animal. You want to report this to future users, how do you do this?

Task: Edit Hazard
Description: You want to add a note saying it was a coyote you just saw. How do you do this?

Task: Delete Hazard
Description: Oops! Turn out the coyote was just someone's dog. Go to that report and delete it.
Findings
Overall, participants enjoyed the feature and thought it was easy to understand. The main pain point was confusion on how to add a hazard to the map. Additionally, participants felt a direct link from the overview screen hazard list to the corresponding hazard on the map would be helpful. This was my first test where I got to see heat mapping for the task flow, which I felt was very eye-opening to learn how users interacted with the elements on the screen.
usability test results

😎

Design Decisions

  • Add more touch space around the Edit Report message so users don’t click outside the popup and exit out of the hazard on accident
  • Have a “view hazard on map” link on trail overview page under the dropdown of current hazards
  • Icon for adding a hazard – change the icon, color to be more obvious. Also, integrate add in the menu popup from icon with three dots in lower right
📽️

Prototype

prototype

Learnings

🤩

Conclusion

I’d say my largest struggle was during the research phase with the surveys. To get the most pertinent information I need to focus more narrowly on the one task at hand, teaching me the importance of being hyper-focused! My other struggle was determining what can be researched through secondary research versus surveys and when to take participants' opinions into play.

I enjoyed the usability testing the most since it was a new experience creating a remote unmonitored test. Analyzing the results was interesting and seeing the heat maps was cool!

Now that this project is finished I wish it was available for use. It was surprising to see no apps have incorporated this feature in the recreational navigation category, especially when it’s done so well by Waze, Google, and Apple.
Back to top arrow