Making it easier to understand a hike's difficulty level
iOS app
health and fitness
ROLE
Research, interaction design, UI design
TOOLS
Figma, Figjam, Google Workspace, Zoom, Fathom AI
when
Summer 2023
CONTEXT
AllTrails is a top rated health and fitness app used for hiking and other outdoor activities. AllTrails makes outdoor spaces easier to access for beginner hikers. Users can discover new trails, use crowd-sourced information, and immerse themselves in nature while staying safe with features like guided trial information and navigation.
problem
Planning and preparation are an important part of outdoor safety. The beginner hiker loves the outdoors, but hasn’t built up enough knowledge to fully understand their own ability and context yet. This can lead to choosing hikes that are are not only just outside of the comfort zone, but potentially dangerous.
solution
A new feature to AllTrails that:
Utilizes user fitness data and predictive machine learning models to predict the difficulty level of a hike
Gives users easy-to-understand personalized context to help them understand the level of their hike
Makes comments easier to scan by reorganizing content
research
How do hikers plan enjoyable and safe outdoor adventures?
Planning and preparation is an important part of an enjoyable and safe outdoor adventure. Inadequate trip planning is hazardous to trail goers and can even stretch the resources of search and rescue teams.
research
“
The ranger had said, you could always try to call 911 and just recognize it's gonna be hours before they get you.
User interviews
Hearing harrowing hiker stories about big adventures and being scared
I conducted user interviews with hikers to learn how they planned their hikes. For study recruitment, I made a screener to ensure that I spoke with hikers across skill levels.
My research questions to be answered via user interviews were:
What kind of information do hikers look for before going on a hike?
What personal considerations do hikers make when they plan their hikes?
What happens to hikers when they are adequately prepared for their hikes? Inadequately prepared?
How do hikers problem solve when hikes do not go according to their plans? How does this impact their experience?
What gaps in planning/knowledge exist between planning and going on a hike?
Hikers have harrowing stories; I probed into their adventures about big mountains, snakes, getting lost, and being scared.
Interview synthesis
Inconsistent difficulty ratings can lead to unanticipated slogs or unsafe hikes
After analyzing my user interviews, I synthesized data into the hapless hiker archetype. I continually iterated on the language and intent behind its motivations, needs, and pain points by bringing the archetype to design critiques. I wanted to create a valuable archetype that could serve as a meaningful asset for stakeholders jumping into the project.
The archetype encompassed many of the problems I found during user interviews, and could also give room for future ideation and problem finding/defining for the app.
Heuristic evaluation of The AllTrails solution
Need to know more about the difficulty level? AllTrails recommends the user reviews
To help their users understand if a hike is within their difficulty level, AllTrails encourages users to scroll down to the comments and get more context via the user reviews.
I conducted a heuristic review of their comment box structuring. As of the summer 2023 design, information was scattered, making it difficult to understand what went together and what the function of the elements were. There was room for improvement in simplicity and efficiency of the design while also adding ways to provide feedback for unhelpful reviews.
Scattered content in the AllTrails comments
How might we provide hapless hikers with a better frame of reference for improved understanding of a hike’s difficulty level so that they go on fewer above-level hikes?
Ideate
Getting quick wins in the comments, closing feedback loops, and reimagining context
I used crazy 8s to ideate and sketch ways that the app could provide a better frame of reference for understanding hiking difficulty. I went through each idea and connected it back to the original problem. If it didn’t actually address the problem, then I didn’t move forward with ideating further on that idea.
Ideate
The Quick Win
Reorganize comment content for quicker scanning
One of the simpler ways to address the problem was to meet it where the solution currently was: the comments section. AllTrails already encourages its users to “Scroll down the page” and “read the comments for additional context.” How could I make the appropriate content jump out while hikers were picking between different trails?
I reorganized the comment block with better information architecture, grouping similar content together.
What I could expand more in the future:
ability to filter by people who are the same difficulty level
Including badges or indicators that show what difficulty level a hiker is at
Fragmented understanding
I tried a version where I placed trail conditions near the trail reviews. I got feedback in design critiques that the placement of this conditions section was hard to understand and confusing. I then tried a version that grouped the star ratings and user review together instead (see right).
Iteration version 2
Condense and simplify ratings
Currently, AllTrails users cannot give ratings on reviews, which can make it difficult to fully trust a review according to hikers. Using other products as inspiration, I tried different versions of user ratings that allowed hikers to give feedback on reviews. Some versions, such as the above, were clunky.
AllTrails version (as of summer 2023)
Proposed version
Capitalize on an existing feature
Close the fitness data feedback loop
Users can record their fitness data while using AllTrails. Aside from showing yearly and monthly stats, there weren’t other ways that AllTrails closed the fitness data feedback loop on the preciously provided activity data.
I did a competitive analysis of other apps and how they used fitness data and where AllTrails could similarly leverage this info in the context of hiking. What if it could gauge relative effort compared to all of your past data and give you a custom difficulty score and time prediction using predictive machine learning models? Similar to their competitors like Strava, Garmin, and Apple Fitness.
Strava
Relative effort scores
Apple health
Run pacer
Garmin
Race time predictions
The Crux
Compare past trails to inform your future hike
How could I use the existing design language to meaningfully convey context? Where would I need to expand the design system? Figuring out how to compare a future hike with a hiker’s own context was the visual crux.
This was a very iterative process. I sketched different graphs and charts that could show the complexity of the mountain the hiker would be up against.
I took sketches and quick mid fidelity mockups to design critiques and asked designers for input. In the early stages, the feedback was consistent: make the graphs and information more explicit.
I iterated until I found data visuals and interactions that were intuitive, utilizing the existing AllTrails elevation charts the users knew and loved.
Medium fidelity explorations of trail comparisons
Early explorations of mountain comparisons
I started plotting out different visualizations of the graph comparing two datasets: mountain 1 vs mountain 2.
Showing the mountain and the climb
Elevation graphs show the profile of the mountain. The steepness of the line showed higher effort sections as a hiker climbed. But I had trouble figuring out how to overlay the comparison. How could I show two mountains on one plot?
Simplified mountain overlays
I tried versions that showed the two mountains on the same chart. The comparison felt clearer. I also played around with placement of the graph toggles, deciding to keep the toggles over the mountain to follow the users continuous path of interactions from the top of the screen to the bottom.
Information architecture and interactions
Providing users with their own context on a new page
Because these features would provide a different type of content than already existed, it didn’t make sense to place it on the trail page. Users would be using the trail page to understand the hike, and then would use the new feature to see their own information against the hike. I decided to separate the information into its own new page. I created a new button for "Predict and Compare" that would lead to the new page.
prototype + test
Does the new concept give hikers a better frame of reference for understanding the hike difficulty level?
I recruited both beginner and experienced hikers for moderated usability tests through 3 main tasks. Because of the nature of my research question, I created an interactive and believable prototype. I wanted to understand the question of “frame of reference” and whether or not the hiker could use the feature to guide future trip decisions and preparation.
prototype + test
Usability testing
Using the visualization of context to guide future trip decisions
I conducted moderated usability tests with 5 hikers. Tests were recorded and transcribed using Fathom AI or Otter AI. As the sole researcher, these recordings allowed me to be fully present with the tests for probing deeper into behaviors and reactions.
I created a scorecard for each of the tasks on a simple 1-3 Likert scale. I wrote a rubric for what each point on the scale meant for each task.
Task 1: Current mental models and discoverability
How would you usually figure out if this trail is within your abilities? Show how you would figure out if the hike is within your difficulty level.
Task 2: Intuitiveness of interaction; interpretation of graph
Show how you would compare these hikes. Which hike you think will be more difficult?
Task 3: Ability to utilize current information to guide future trip decisions
Learn about the trail and then see what the predictor says about your ability to do the hike. Then decide: Based on this information, would you go on this hike?
Test results
Less experienced hikers would prepare differently because of the new frame of reference
All participants understood the graph itself, but many paused at the numeric summary or ignored the summary altogether. They were more drawn to the graph. For revisions, I could find ways to make the graph stand out more, while disclosing some pieces of information.
Newer hikers used the graph to inform a future trip decision, many deciding to not go on a hike based on the visualization.
Experienced hikers relied on their past experience to decide if they would go on the hike; did not need the new feature, but found the visualization to be informative for planning and would use this earlier on in their trip research.
New and experienced hikers were able to interpret the graphs
New hikers relied on graph comparisons to make future trip decisions
Experienced hikers would likely use the graphs earlier on in the process before they narrow in on a trail
Revisions
Simplifying the graphs to make the trail comparisons even easier
During testing, I observed that all participants beelined to the graphs and color meanings immediately. The written content was ignored, or used later on to corroborate what the hiker already knew. To make the graphs easier to consume, I decided to use progressive disclosure to hide some information and to simplify the color palette.
Revisions
Tested Version
Confusing placement
The summary was useful for confirming users interpretation of the graph, but placing the content on the bottom left users confused.
Iterated Version
Make it even simpler
Even with better grouping, users still beelined to the graph visual. The descriptive text was useful, but not the most important information. I could explore reducing its hierarchy even more.
Final Version
Hold for an existing AllTrails interaction
I opted to hide the information and let the visuals do the communicating. If users needed more explicit information, they could tap+hold the icon, which follows an existing interaction pattern with AllTrails elevation graphs.
.
Using color with better intention
I introduced semantic colors to the Predictor Meter to convey meaning behind difficulty level, which I later tested. I added an orange and red that were used in other ways throughout the app, but I adjusted to make more harmonious with the current color palette.
While usability test participants were quickly able to discern meaning from the colors in the Predictor Meter, there was a moment of confusion for one participant who hesitated on the colors of the Comparison graphs. Using the same color to show contrasting mountains and sharing meaning on difficulty level was inconsistent.
Tested Version
Does this color mean something?
I introduced semantic colors in the predictor meter that cohesively tied back to the AllTrails color palette. Users were quickly able to gauge difficulty based on color. However, using the color in a different way in the graph below would dilute its meaning.
Final Version
Reduce the number of colors
With the brand green in place, users could still understand the predictor meter. I also decided to remove the orange color from the graph; this would follow an existing color pattern in AllTrails maps.
The expanded UI kit for trail comparisons
I tried to use the existing UI as often as possible, but I found that I needed to add new components for this feature. I added:
A predictor meter with 5 different states
Toggles, showing selected and unselected states
Rearranged comment box
Null comparison for instances where the hiker doesn't have logged hikes
Icons for the new feature
Final Mobile Screens
WHAT’S NEXT?
Bringing value to experienced users by adding the feature earlier on in the trail discovery journey
Contextualizing a future hike is what experienced hikers already do. Frequent AllTrails users or more experienced hikers rely on comparison earlier on in their trail discovery process, rather than at the time of honing in on a trail (where this feature is currently prototyped).
I could explore incorporating the comparison feature to help hikers filter and compare graphs based on their previous hikes when they are earlier in their discovery process. This will make their trail discovery easier and more efficient, saving time and effort for hikers.
WHAT’S NEXT?
WHAT I LEARNED
Iterate, iterate, iterate to get to clearer communication
I looked for feedback early and often when creating research synthesis assets and wireframes. As a designer, I’m receptive to feedback and its ability to improve solutions along with my craft. Through this process, I got better at improving my own communication in providing enough context and honing in on my feedback asks.
WHAT I LEARNED
