Add A Feature

AllTrails Map Pinning

Role

UI/UX Designer

Tools

Figma, Maze, FigJam

Timeline

Aug 2024 - Nov 2024 (16 weeks)

Final Deliverable

View Prototype

Research

See Research
Define

See Define
Design & Test

See Design & Test
Final Thoughts

See Final Thoughts

Introduction

~

Introduction ~

Picking a destination

Background / Problem / Goals

Background

This "Add a Feature" project focused on designing a new feature for AllTrails, a leading outdoor recreation app with over 20 million users. Against the backdrop of the outdoor industry’s rapid growth—driven by health awareness, tech advancements, and the COVID-19 pandemic—this project aimed to address user pain points and improve the outdoor exploration experience through a seamless, intuitive addition to the app.

Click to enlarge

Problem

AllTrails provides detailed trail guides but lacks the ability for users to mark and share key amenities like benches, scenic viewpoints, and picnic tables. This limitation creates accessibility challenges for users with varying physical abilities or specific needs, as they cannot anticipate rest stops or points of interest along trails. This project aims to address this gap by introducing a feature that allows users to add and view trail details, improving accessibility and inclusivity for all outdoor enthusiasts.

Goals

Understand user needs by identifying the most valuable amenities and points of interest for trail planning.
Assess current pain points by evaluating how the lack of amenity markers impacts trail planning and on-trail experiences.
Explore feature usability by determining intuitive ways for users to add, edit, and view amenity markers.
Ensure the feature aligns with AllTrails’ brand and user experience standards.

To achieve these goals, I conducted research to gather insights directly from users and analyze existing behaviors and pain points. By combining user feedback with competitive analysis, I aimed to identify opportunities to enhance the app’s functionality while maintaining its core values and user experience.

Deliverables

UX Design:

Competitor Analysis
HMWs
User Persona
Feature Set & Prioritization
Task Flow

UI Design:

Wireframes
Integration & Applying Branding
User Testing Reports
Prototypes

Research

~

Research ~

Planning the trip

Competitor Analysis / Interviews / Insights

Competitor Analysis

I analyzed 3 competitors. Gaia GPS, Avenza Maps, and Google Maps. I chose these services because they already had some level of pinning already available.

While Gaia GPS had the most features I was looking for in regards to both community and pinning, Avenza Maps had a better system for the pinning feature itself. An indirect competitor, Google Maps, actually measured up better than the direct competitor Avenza Maps due to its community aspect. However, not all trails are properly mapped or named on Google Maps.

They all had three things in common:

Ability to pin details
Pin customization
Pinning details available offline

Click to enlarge

I conducted 5 interviews with current members of the AllTrails community to gather insights directly from users.

In these interviews, I wanted to…

Understand user needs and decision-making
Analyze user behavior and engagement
Learn which trail features are valuable

Interviews

“Is it sandy, rocky, dirt? That will affect the shoe that I wear.”

Interview 4

“When I discover something beautiful, I want to share with other people.”

Interview 1

“I look at pictures from others so I kind of know what to expect.”

Interview 2

Insights

Through my user interviews, I uncovered 5 key insights to guide the rapid design of a new feature for AllTrails. Overall, it appeared that users crave more indepth trail information and value social connectivity in sharing their adventures.

- 5/5 users value community-driven reviews and insights for trail planning
- 4/5 users like viewing pictures from other trailgoers so they can know what to expect
- 5/5 users are inclined to share beautiful trails with others, particularly friends and family
- 5/5 users frequently encounter issues with both park-provided and digital maps due to insufficient detail
- 4/5 users need detailed maps that provide comprehensive information including trail length, difficulty, and elevation
- 5/5 users frequently encounter issues with both park-provided and digital maps due to insufficient detail
- 4/5 users desire practical details from maps about obstacles, current weather conditions, amenities, rest areas, and notable features such a scenic spots or wildlife sightings
- 5/5 users prefer digital maps with a strong appreciation for offline capabilities in tools like AllTrails
- 5/5 users are frequently hiking in areas without service and rely on offline maps to guide them
- 4/5 users are more reserved about sharing cherished or secluded spots to limit human impact
- 3/5 users prioritize observing wildlife and biodiversity

Define

~

Define ~

Packing the gear

Problem Statements & HMWs / User Persona / Feature Set & Prioritization / Task Flow

Problem Statements & HMWs

I wanted to tackle two key challenges faced by AllTrails users, centered around improving trip planning through better knowledge-sharing.

Problem: AllTrails users need more comprehensive and practical knowledge about trails because being prepared builds confidence.
- How might we enhance AllTrails trail maps with user-informed practical details for others to better understand trail conditions and improve the user’s planning experience?
Problem: AllTrails users need a way to easily access and weigh in on community wisdom because it improves trip planning.

How might we design a feature that fosters collaboration and knowledge-sharing among AllTrails users to enhance trip planning efficiency?

User Persona

From my user interviews and insights, I created Erika Thompson, my user persona from which I would draw my design flow inspirations.

Erika is a 27-year-old living in Boulder, Colorado. With a love for nature, she frequently takes time to travel and hike. She likes to pre-plan, and finds herself frustrated bouncing from app to app trying to find comprehensive information on the trails she’s interested in.

Click to enlarge

Feature Set & Prioritization

Using the information I gathered from my competitive analysis about common features and insights I gained from interviews with AllTrails users, I put together a feature set complete with prioritization. Knowing that I was working on a rapid design project, I wanted to keep my focus on features that would require less effort while being more impactful, such as seeing pictures of trail details, sharing, categorizing, and seeing the exact location, and allowing users to view commonly reported details.

While adding trail details is an essential step to this feature’s functionality, the users I interviewed were more focused on the research aspect of hike planning and less on contributing to community engagement, so I wanted to prioritize designing with my user’s actions in mind. “Add Trail Detail” pages would require more effort in comparison and would be a project for another time.

Click to enlarge

Task Flow

To give me an idea of which pages I would need to design for, I created 2 task flows for my main task: User research to view commonly reported features. AllTrails itself had several avenues for users to reach certain goals, such as seeing reviews through the trail overview or directly from the bottom sheet of the trail’s map. Similarly, I wanted to account for at least two different ways for users to reach the goal page.

Click to enlarge

While designing later, I realized I could start my flow from the map of a trail’s bottom drawer with an option that would lead directly to the pin map. My goal screen was also adjusted to find a specific pin and view it on the map, not just view the pin map.

Test

~

Design

&

Test ~ Design &

Setting off

Low to High Fidelity Iterations & Testing / Prototype

Low to High Fidelity Iterations & Testing

I sketched some screens: Pin map, search results, and category results. The results in the bottom drawer would look very similar to reviews. I was still playing around with what I wanted to actually call the items people would report. I’d seen other apps and physical maps refer to them as pins, marks, points, features, details, and more. You will see me use all of those nomenclatures before settling on “pin” thanks to feedback from user testing.

Reported Feature Pages

Click to enlarge

Reported features: Map with all pins, search bar, category pills, bottom drawer with title of trail shown and latest reports
Search results: Can filter results by old or new, each result shows important information (title, description, pictures, location), shows how many people agree with the pin
Category results: Filters only pins in that category to show on the map, similar to search results

Integration

Click to enlarge

Map of trail: Above live sharing bottom right, add pin icon
Bottom sheet on map page: Added 5th option for “commonly reported”
Trail overview page reviews: Lists commonly reported categories w/ numbers of spots seen, extra button to view commonly reported features below “review trail”
Reviews: Underneath number of reviews is number of reports, “view reported features” button, number of reports in review next to activity

Throughout my design, I used screenshots from the AllTrails app to save me time on designing and create a more cohesive product. Maps, elevation graph, and the parts of trail overview irrelevant to my feature would have been too time consuming for me to design with my limited skill set, so I used the resources I had at my disposal.

Iteration 1

Click to enlarge

Testing

I had 5 participants make their way through this flow under moderated testing. While my goal was to have all of my participants be AllTrails users, I did test with 2 participants who were users of other trail and hiking apps. For this flow, I wanted to discover:

Is this flow functional and intuitive to users?
Which paths do users take to perform this action?
Are there any areas of confusion?

Click to enlarge

Red: Adjusted wording to consistently use “pins” throughout

Orange: Additional way to get from trail map to pin map by clicking “14 pins”

Yellow: Added ability to filter options in search bar and filter page

Green: Made search bar more straightforward

Blue: Removed search bar and category pills in results and highlighted pin page

I added a filter page with the ability to sort by category and with different metrics. At this iteration, I was asked by my mentor why I would design for something that users did not seem to need. The filter option seemed like a good idea in general, but not pertinent in what my users were asking for.

Task

You’re researching a trail in a park that a friend told you has a cool native plant species. You’d like to view the trail details on the map and find where the cool native plant has been spotted.

Key Findings

100%

completion rate

60%

took unexpected paths

60%

confused by ambiguous wording

80%

prefer the term “pin”

Different paths to success:

Getting from trail map to pin map

3/5 trail overview
4/5 reported details

Getting from pin map to goal screen

3/5 search
2/5 category pill

Alternate paths attempted

2/5 commonly reported
2/5 pin on map
2/5 all pins in drawer

Moving forward:

Use the term “pin” where applicable
Revise wording to be more straightforward
Build out multiple paths towards completion

Designing to have the pins on the map clickable and all of the pins in the bottom drawer viewable felt like a great task to tackle. Even though users were using this avenue towards completion, I was not keen to spend the time on it.

Iteration 1 ➜ Iteration 2

Applying Branding

I was lucky enough to find an indepth style guide for Alltrails. Even though I didn’t agree with all of it, such as the filter icon being a different color than the rest of the search bar or using pure white in places, it made my job a lot easier to be able to pull the typography styles and color palette without putting too much thought into it.

AllTrails Style Guide

Iteration 3

Click to enlarge

General:

Applied branding
Added pictures and more detailed content

Red:

Changed “common pins” to “trailgoers marked pins for” to see breakdown by category
Made categories clickable to view on map

Orange: Moved number of pins in bottom drawer to a pill on the right side

Yellow: Added ability to get to goal screen by clicking on the individual pin

Green: Typing in search brings up suggestions

Blue: Redesigned hierarchy for pins in results

Purple:

Redesigned individual pin pages to appear similar to review pages
Made page more interactive by viewing pictures

I abandoned designing the filter page but kept the icon to see if users would be interested in using it. You may notice that the filter icon is a slightly different color from the search bar. This follows the existing UI of the app.

By adding the ability to make the goal pin clickable on the map, I took baby steps towards making pins on the map interactive, hoping to assuage users that choose this path.