CHALLENGE
 

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. 

 

PROJECT SCOPE


Modifying the existing Alltrails apps by redesigning the landing page, map view, building a customizable profile page and customizable itinerary page.

TOOLS


Figma, Adobe Photoshop, Adobe Illustrator, InVision. 

ROLE


UX Designer (Research, Visual Design, Interaction Design, User Testing).

RESEARCH

User Interviews
Empathy Map
User Personas

STRATEGY

Features Prioritization Matrix
Application Mapping

DESIGN

Task Flow
Wireframes
Branding
Responsive UI

PROTOTYPE 

Low Fidelity Prototype 
High Fidelity Prototype
Usability Testing

 

RESEARCH

USER INTERVIEWS
 
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. 

EMPATHY MAPS:

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. 

User Interview Insights

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.”

USER PERSONAS

After analyzing my research, I created two user personas to represent key audience segments and their major needs. 

Persona Template SAM .jpg
Charlie.jpg

STRATEGY

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 

Alltrails Prioritization Mapping copy.jp

INFORMATION ARCHITECTURE 

 

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. 
 


 

DESIGN

TASK FLOWS
 

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 1


 

Task Flow Two: User views trailhead information within trail page


 

Task Flow Three: User wants to save a trail to a new list 

SKETCHES 

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. 

Picture4.jpg

WIREFRAME

 

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 

Trail Head Maps.jpg
Choose a list.jpg

Map view was expanded to full bleed 

Trail tiles were re-sized

Ranking was given higher priority

Trail%20Head%20Parking_edited.jpg
New%20Trail%20Head25_edited.jpg

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

STYLEGUIDE

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.

PROTOYPE

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.  

Frame 4.jpg

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.  

CONCLUSION 

 

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.