ELEVATING ALLTRAILS

Enhancing the Planning and Hiking Experience

Vectary texture (1).png
Vectary texture.png

OVERVIEW

 

AllTrails is a crowdsourced, outdoor enthusiasts application with 559,492+ customer reviews and a 4.9 star rating out of 5 on both Apple Store and Google Play. Their mission is to kindle the spirit of adventure by connecting people to the outdoors and to each other.

THE CHALLENGE: Upgrade a highly regarded app to enhance the experience for their existing users.

MY ROLE: Product Designer

I was responsible for the strategic direction, new concept designs, and business research. My team included a visual designer, UX designer and consulting engineer. 

PLATFORM: Mobile Application 

Team Icon

TEAM: 4 People 

DURATION: 4 weeks

iphone mockup gallery 1.png

TOOLS & METHODS

 
  • Competitive Analysis

  • Comparative Analysis 

  • Heuristic Evaluation

  • Surveys

  • Interviews

  • Storyboarding

  • Value Matrix

  • ​Wireframing

  • Prototyping

  • Usability Testing 

  • Canva

  • Figma

  • Maze

  • Miro

THE CHALLENGE

 

The Focused Problem Space

Users enjoy using AllTrails to plan their hikes, but question the accuracy and quality of the information provided, requiring extra time researching and potential frustration.

How do we exceed user expectations on a platform that is considered 'best-in-class' according to online reviews? 

Understand
Understand Icon

I had to fully understanding the value proposition for current users in order to identify the strategic direction that the team would to move towards. While there was a surplus of satisfied users, there were also several repeated pain points that needed to be addressed. 

TITLE

Identifying the greatest value adds and contemplating trade-offs helped me prioritize the needs for this sprint. 

Identify

Identify Icon

Execute

Execute Icon

With limited time, we had to divide and conquer! Each team member was responsible for different "value adds," with my focus on incorporating 2 new concept additions based off identified user wants from interviews and surveys. 

PROPOSED CONCEPTS

 
Mountain Lake Reflection
Accuracy Icon
ACCURACY

Improve the accuracy and ability to identify crowdsourced information to gain relevant information faster

Update Icons

LIVE UPDATES

Incorporate live updates on trail status for a safer hiking experience

Tailored Suggestons Icon

TAILORED SUGGESTIONS

Provide tailored trail suggestions based off expanded user profiles to speed the planning process

Goal Metrics for Measuring Success

Brush Stroke

20%

Reduction in time to required to plan a hike

Brush Stroke

25%

Reduction in number of clicks required to complete a task

Brush stroke

10%

Increase in satisfaction with the accuracy of trail information

THE RESEARCH

 

Determining Their Strengths

Having not being super familiar with the app, I embarked on some generative research by combing through articles, reviews, blog posts, and the website to understand their value to their users. I categorized findings into a SWOT Analysis to quickly determine areas of improvement. This gave me the footing before delving deeper into research and comparing them to other direct competitors currently occupying market. 

Image by Rohit Tandon

STRENGTHS

  • Easy to use interface

  • Large user base

  • Robust searching/filtering capabilities

Image by Flavio Gasperini

OPPORTUNITIES

  • Product innovation and expansion 

  • Capitalize on what they do well - searching for trails and utilize that in other aspects

Image by Nathan Anderson

WEAKNESSES

  • Dependent on crowd-sourced information 

  • Lack of options to create new trails

Image by Charl Folscher

THREATS

  • Greater trail and GPS accuracy reported on other mobile apps

  • Covid-19 - group hiking no longer an option

So What Can We Add and What Are the Trade-offs?  

Since AllTrails is crowd-sourced, I decided to "turn to the crowd" and transferred all the reviews from the Apple Store and Google Play from the past year onto sticky notes.

 

I wanted to gain an understanding of the suggestions and frustrations from users who that were passionate enough to write a review and planned on verifying those assumptions and biases through a publicly posted survey and in depth interviews.

Value matrix of synthesized affinity map
Large brushstoke

After several rounds of affinity mapping, several opportunities emerged. However, due to number of prospects, we needed to focus and collaborated to created a value matrix, balancing the risk versus impact to users. 

This Value Matrix helped determine the MVPs. 

Brushstroke
Brushstroke
Brushstroke

We checked the implementability of proposed ideas with our engineer to help us gage the technical feasibility of features. We took these constraints into account when and ranking the potential solutions. 

Let's Go Deeper!

I collaborated with the team to send out a focused, user survey to our networks (Slack, LinkedIn, and Facebook) with the intention of discovering user habits and to confirm our identified MVPs. We collected 28 responses and 5 respondents left their information to be interviewed. 

Image by Kalen Emsley
Image by Kalen Emsley
Image by Kalen Emsley
Image by Kalen Emsley
Image by Kalen Emsley
Image by Kalen Emsley

Survey Insights 

Most Wanted New  Feature:

Live Updates 

Most Used Sources to Determine Which Trail to Hike: 

Photos & Reviews

Typically usage:

Look at reviews to find trail conditions

Top Motivations: 

Be in Nature : 96.4%

Stress Relief: 82.1% 

Exercise: 82.1%%

AllTrails is used predominantly for planning purposes 

Greatest Frustrations:

 

Not knowing if a trail is closed, record  feature, and nonintuitive planning

Understanding Habits

I typically spend over an hour flipping back and forth between trail cards to determine the path I want to go on. 

While the survey provided some great quantitative data, I still wanted to understand the user more and gain additional qualitative data that addressed the "why's"  behind the actions. Five unique hikers provided their perspectives through 40-min, Zoom interviews that focused on their experience with the app. 

Creating Their Journey

Hiking Adventure Storyboard v2A.png

Based off the responses of the survey and interviews, I created two storyboards to help visualize the overarching interaction between the users and the app. 

*click to enlarge

The first storyboard was representative of the planning stage of the hiking journey and the second was indicative of the hike itself. It was important to understand the different phases of interaction with the app and why users weren't currently utilizing some of the features. 

Hiking Adventure Storyboard v2B.png

*click to enlarge

THE DESIGNS

 

Divide and Conquer

Each member of the team was responsible for a different  sector of the designs, but collaborated throughout every phase of our process. I owned the new concepts expansion via comparison feature and live update feature. Another teammate worked on the search filter capabilities and updating the UI, while the other worked on the streamlining the record function and review flow. 

iPhone 11 Pro.png
iPhone 11 Pro.png
iPhone 11 Pro.png

But wait! How did we get there?

Thinking Through New Concepts

I was tasked with two separate new concept flows to work through.

 

For the live update screens, it was important to pinpoint how much relevant information one would need to understand the given situation in a time-sensitive fashion and how they would want that information presented. 

Live updates sketches 02
Live update sketches 01
Brush stroke

Examples of questions I needed to answer: 

 

  1. How would you write an update and how would newer updates stack?

  2. How would someone edit an update that was no longer accurate?

  3. What's the most important information and why? 

  4. When would people update and how do we prevent duplicates? 

  5. How would other hikers get notified if there was a new update on their trail?

Deciding how to stack the updates took me several attempts. I looked at how Slack, Reddit, and Waze showcased asynchronous communication for inspiration. Since users turned to recent reviews to look for trail updates, I wanted to incorporate and feature time in the updates. Having quickly identifiable icons and a real time feed layout also assisted in goal of delivering information in a timely manner.  

Wire : 1st round : 06.png
Wire : 1st round : 03.png
Wire : 1st round : 04.png

Making Comparisons on a Small Screen

The compare feature needed to present trail data in a logical and concise way for users to easily scan details from several trails at once. 

Aside from photos, users chose hikes based on difficulty levels. So I broke down the factors in determining hiking difficulty into easily understandable categories (distance, estimated time, elevation, etc.). This way users could validate for themselves if the hike was appropriate for them. I used an adjustable comparison table so users could customize which factors they wanted to compare. 

Testing the Theories 

Learning how to scale my design process was one of my goals for this project, so I ventured out to usability testing via two methods. One test was unmoderated through Maze where the link was posted on public platforms in an attempt to garner unbiased feedback. The second method was a moderated and conducted virtually through zoom with our previous interviewees. 

 

They yielded slightly different results despite using the same script for consistency.

Unmoderated

Mountains in Clouds

WHAT PEOPLE SAID

Instructions were overwhelming and lacked clarity

*click arrows for more insights 

Moderated

Foggy Lake

KEY TAKEAWAY

Users preferred the least amount of actions to accomplish a task

*click arrows for more insights 

Adjusting the Compare Screens

BEFORE

AFTER

1

X - 16.png

2

3

1

3

iPhone 11 Pro.png

1

2

1) Despite the navigation bar not changing from the original app, users were unable to navigate to the 'Plan' tab without assistance, nor did they know that their previously saved trails were housed there. This led me to believe that people either don’t use the function or don’t relate the heart, labeled as 'Plan,' refers to their saved favorites. I changed the terminology to reflect a more familiar pattern taken from social media.

2) The larger compare button was also moved to the bottom to create a more natural, fluid flow of selection, then comparing. 

 

3) The icon used for compare was not intuitive and most users didn’t even see them. So that was changed to a button that said 'compare' for clarity. 

Brush stroke
Brush stroke
Brush stroke
Brush stroke

Because we tested a phone device on a desktop, many people did not utilize or take note of the navigation options that might have been more familiar when holding the phones, themselves.

X - 13.png

4

5

iPhone 11 Pro.png

4) Again, the icons tested here were not intuitive and didn't relay a natural function, so throughout the designs, icons were removed/exchanged and features were simplified.  

 

5) The carrot to indicate the that another trail was available to compare was also not well understood by users. A horizontal scroll replaced this function, since this pattern is utilize that in other areas. 

 

Several frivolous interactions that users did not find intuitive were also removed to simplify, like the ability to reorder, add, or remove comparison criteria. 

Adjusting the Update Screens

The update feature focused primarily on the five dimensions of interaction design. This flow was heavily deliberated upon internally by the team prior to testing and as a result, was very positively received. The UI was updated to reflect stylistic patterns that were more aligned with the other areas of app. And the hierarchy of information was reversed to reflect more instinctual interactions. 

BEFORE

*click to play

AFTER

*click to play

PROTOTYPE WALKTHROUGH

REFLECTIONS & NEXT STEPS 

 

Some of my biggest take aways from this project:

 

  • Icons are not universal, so utilize the with care

  • Unmoderated, mid-fi testing is extremely challenging when testing highly complex issues

  • Collaboration is key, especially when things don't go to plan 

This project allowed my team and I to try things we hadn't previously attempted in other projects. We dedicated time to creating a design system that worked for us and gained practice with variants and complex wireflows. 

Even though our engineer left the project the week before our submission date, we were able to establish a great dialog and relationship that helped dictate our design direction and constraints we had to work between. 

If this project were to continue, I'd like to test our hi-fi prototype on a new group of users and continue the iteration process. I would want to streamline the UI for consistency throughout and reexamine some of the features that we did not get a chance to work on, as well.