AllTrails Maps Redesign
Alltrails is a community-driven hub of global information regarding trail maps with a user base of over 20 million people in over 100 countries.
As a leading platform for outdoor trail access research, it also has a value renewal problem, there is a standing reputation within outdoor athletic culture regarding the app being unreliable and problematic when it comes to trail information and trip planning. There is also an issue with the landing page inundating a user with too many options that can lead to decision paralysis. With targeted changes, this colloquial shorthand of unreliability will shift for the positive.
Modifying the existing Alltrails apps by redesigning the landing page, map view, building a customizable profile page and customizable itinerary page.
Figma, Adobe Photoshop, Adobe Illustrator, InVision.
UX Designer (Research, Visual Design, Interaction Design, User Testing).
Features Prioritization Matrix
Low Fidelity Prototype
High Fidelity Prototype
Four users were interviewed twice. Each user has diverse experience with trail use and the Alltrails app, which ranged from using the app less than ten times cumulatively in a year to using the app for every outdoor trail experience hundreds of times across a year. These interviews provide a breadth and depth into pain points and blind spots of the existing app.
User 1, 35, Chicago, Illinois, experienced user
User 2, 33, Seattle, Washington, novice user
User 3, 33, Santa Barbara, California, experienced user
User 4, 40, Chicago, Illinois, moderate user
Experienced user: Uses Alltrails 90% of the time when researching a trail. Traverses between 100-200 trails a year.
Moderate user: Uses Alltrails between 50-30% of the time when researching a trail. Traverses between 50-80 trails a year.
Novice user: Uses Alltrails less than 10 times in a year. Traverses a trail less than 5 times a year.
To cull the qualitative data gathered from my user interviews, I created empathy maps to understand patterns across my users, glean insights into their pain points, and distill high priority from low priority needs.
I like an interface that is more personalized like I want to see what I have done in life."
“Getting to trailheads is difficult and unclear on Alltrails, so I usually check google maps too.”
“You open the app and it is just “bam” here is everything and like, I don’t want to think about all the options they show.”
“When you first enter the app it can be really overwhelming like they hit you with so much."
“Parking, there is no information on where parking is in relation to the start of a trail head.”
After analyzing my research, I created two user personas to represent key audience segments and their major needs.
FEATURES PRIORITIZATION MAPPING
Given the number of existing features on the Alltrails app, it was important to identify the key modifications that offer high value impact for the user and low value impact to the business.
Through this culling process, I narrowed the focus into five areas for improvement:
1. Redesigning the landing page
2. Developing a trailhead page
3. Developing a parking page
4. Creating a multi-trail itinerary page
5. Creating a customizable user profile
After understanding what functions will afford Alltrails the lowest business impact with the highest value to users, I created my information architecture. This architecture allowed me to see how my new functions will integrate into the current app structure.
I created task flows to better identify how to create an effective user experience and streamline the process of completing a task. The task flow process allowed me to think through my user's steps and create a clear and simple process.
Task Flow One: User wants to search for a park and view a trail
Task Flow Two: User views trailhead information within trail page
Task Flow Three: User wants to save a trail to a new list
After reviewing my user flows and research data I sketched low-fidelity screens to capture my ideas quickly before starting the process of digitization. After sketching multiple landing page and profile page design I also started to sketch out interaction design elements and how a user would interact with the interface.
Wireframing allowed me to move efficiently through many iterations and layout options. I wireframed a range of profile page and landing page designs before settling on three options to present to users for their thoughts. Wireframing the user flow for my user tasks also started to give insights into how to organize my information architecture and streamline the user experience.
After completing user testing on my low-fidelity wireframes I made shifts to the information hierarchy, design layout, and usability layout of my work.
Iteration One: Trail Search Page
Iteration Two: Trail Search Page
Iteration One: Viewing parking to trailhead directions
Iteration Two: Viewing parking to trailhead directions
Map view was expanded to full bleed
Trail tiles were re-sized
Ranking was given higher priority
Header made into overlay and skill level moved into the header
Parking to trailhead view was expanded to full bleed
Written directions drop down and expanded
A well-crafted style guide helped create a unified integration between Alltrails existing model and the new additions. Typeface and color choices created a clean and streamlined display with style nods to outdoor culture.
After many iterations of wireframing and user testing-based revisions, I began the process of high-fidelity wireframing. Incorporating details and precisions to my sketches allowed for continuous iterating and reworking of each design choice. In these wireframes, I incorporated existing design patterns of Alltrails found within the app to create a seamless integration of my newly added features. I completed a series of three more user tests on my high-fidelity wireframes, which allowed for agile revisions and changes throughout the process.
Prototype of user searching for a trail and viewing the trailhead information as well as parking information.
Prototype of user creating a new multi-trail itinerary list, selecting two trails to add to their list, viewing their itinerary in map mode and then changing the order of what trail they do first.
Reflecting on the final prototype, I believe that I met the goals set out at the beginning of the project. Responding to my user needs and experiences when using Alltrails, I was able to develop a less overwhelming landing page, integrate new trailhead and parking pages into the existing app and build a new multi-trail itinerary page with minimal friction for existing users.
With more time, I would expand the multi-trail itinerary to including information for planning where a user can camp while on their trip. I would also execute usability testing out in the field to better understand if the trailhead and parking information provide the correct context to prevent a user from getting lost at the start of their trip.