TrailTales
Leveraging the power of community to find the perfect hiking trail
Role: UX/UI Designer
Timeline: 01/12/2024 - 6/10/2024
Background
Hiking is an engaging, healthy, and relaxing activity for casual walkers and outdoor enthusiasts alike. However, finding a trail at the appropriate difficulty level in the desired environment can be a huge source of frustration, leading some to forgo a stroll in the woods altogether. TrailTales is a conceptual mobile app that leverages the power of social media to bring the perfect trail right to the user’s homepage. As the UX/UI designer, I carried out the user research, design, and testing of this prototype.
Secondary Research
I began my foray into this project by gathering secondary research to better understand the state of the outdoor recreation space and difficulties within. According to the Outdoor Industry Association, participation in hiking and other outdoor recreational activities had been growing over the previous 10 years with nearly 60 million Americans going hiking in 2022. Despite the increase in numbers, I was surprised to find that the frequency at which people were getting outdoors had decreased. These insights confirmed that hiking was a ripe topic to look into with plenty of room to grow.
Interviews
Moving into my qualitative primary research, I hoped to answer some of the more subjective questions that remained such as what do people enjoy about hiking and what barriers prevent people from doing so more often?
From my screener surveys, I began to see answers to these questions emerge. Respondents primarily participated in outdoor recreational activities for their mental health, physical health, and to observe nature. Their main barriers to participating were time and location.
From these respondents, I selected 5 people who regularly hike to participate in semi-structured interviews. When formulating my discussion guide, I aimed to write questions that would help me dive deeper into my participants’ process and internal experience of going hiking. I wanted to learn about what a successful versus a failed excursion was in their own words. The primary queries I asked my participants were:
Are you happy with the amount of time you spend hiking? If yes, what motivates you? If not, what is preventing you?
Walk me through the steps you take from deciding you want to go hiking through getting to the trail.
Describe what you are doing, thinking, and feeling as you walk along your trail.
Describe your favorite hike and why it’s your favorite.
Tell me about a time when you were disappointed in or surprised by a trail.
After my interviews, I pulled insights from each one and recorded these findings on virtual sticky notes. I then carried out a thematic analysis to find commonalities.
3 out of 5 of my interviewees described multi-step processes across multiple apps for finding a trail. All of my interviewees were quick to tell me about a time (or two) when they were disappointed in a trail. This confirmed that searching for trails is a common difficulty and that the consequences for choosing the wrong trail could range from mild annoyance to acute fear.
When asked about the amount of time spent outdoors, all of my interviewees expressed a desire to get outside more frequently than they were able to. This aligned with prior data claiming that people were getting outside less frequently and confirmed that it is a problem. I took note of this to make sure that whatever form my finished product took, it should be motivating and encouraging to my users.
Personas
Further insights from my thematic analysis hinted towards 2 separate personas that demonstrate my target audience. While everyone shared the desire to connect with nature, the ways in which they sought out that connection differed.
Those dubbed “Adventurers” are interested in being challenged. They want to travel and explore new environments. They’re seeking stimulation from their surroundings and a lack of stimulation can be disappointing due to all the effort they’ve put in.
Meditators on the other hand enjoy hiking as part of a regular routine for the sense of peace and relaxation it brings. They appreciate the mental health benefits of taking the time to pause and reflect on a trail, therefore being rushed or surprised are disruptions.
How Might We…
Rounding out my research, I wanted to concisely synthesize what I’d learned about my audience and their needs thus far into a few How Might We statements to guide me into the ideation phase.
How might we make it easier for hikers to find trails that suit their needs?
How might we motivate hikers to get outside more?
How might we increase hikers’ confidence in new trails?
How might we help people connect with the natural environment?
Ideating
To begin generating ideas, I pulled strong verbs - “search,” “motivate,” and “connect” - from my How Might We statements and created word association maps based around them.
The branches of these maps helped me expand beyond some of my initial ideas while maintaining a connection to my main goal. In order to narrow down my options, I considered my How Might We statements, the needs of my target audience, and my initial goal.
The concept I chose at the final round of convergence was an app that would track users’ hikes while they’re on them. They could photograph points of interest, take notes, and share this information with other users in their network. This concept would help users pick the perfect trail by showing them accurate, detailed information based on user generated content.
User Stories & User Flows
Once I had all of my proposed features laid out in the form of user stories, I used the MoSCoW method to narrow them down. I had dozens of user stories outlining several key features, but since I could only choose 3 features for my minimum viable product, I had to consider functional dependencies and which ones supported my goal. This process helped me realize that while the tracking feature could solve the problem of having incorrect information about trails, it was not as crucial to the goal of finding a trail as the ability to share and search for that information. Thus, when selecting the top 3 features for my MVP, I chose the abilities to make a post, follow other users, and save a trail. Here, I began to conceptualize my app as a form of social media.
To get a better idea of how these features would work and what information users would need to see at every step of the process, I created user flows for each one in Miro. As an example, the flow below demonstrates the process for searching for and saving a trail.
Click to enlarge
Sketches & Wireframes
With the concept of a social media app in mind and my 3 red routes outlined, I was ready to start sketching out my screens. I focused primarily on the major components necessary to the app’s function. I utilized a navigation bar to give users easy access to three primary pages regardless of where they are in the app, and I placed primary CTAs along the Z pattern of eye scanning.
Once I put these pieces together, I transferred them to low-fidelity wireframes. During this process, I kept principles of visual hierarchy in mind by placing the search bar used in my red routes at the top of the screen and allowing user-generated content to take up the bulk of the space. Remembering that location was a main concern of my interviewees from my research, I included a segmented button to allow users to toggle between posts by people they’re following and highlighted local trails.
Style Guide
With the basic structure of the app outlined, it was time to put some more thought into the app’s personality. I wanted TrailTales to be thought of as a trusted friend encouraging users to go explore the outdoors and share their stories. The UI of the app itself should be familiar and inviting.
I then developed a style guide to formalize the brand personality and to keep my design consistent.
I created a monochromatic color palette based around forest green to communicate the natural and trustworthy nature of TrailTales. Knowing I wanted a light UI, I chose forest green as the primary color so it would be in high contrast to the background.
I used Roboto for the typeface as it conveys simplicity and familiarity, and has several different fonts including both serif and sans serif.
Creating a Prototype
Next, I created my high fidelity prototype in Figma using the outlines of my wireframes and the rules laid out in my style guide.
From the homepage, users have three ways to find trails - see local posts, see posts by people they’re following, and search for trails. I chose to present posts with more than 3 lines of text as automatically collapsed so the UI is not overcrowded with words. Imagery should be the focus to make for an easy viewing and scrolling experience.
Activity tags on users’ profiles allow others to see what they commonly post about at a glance. I used an 8 pt grid with 24 pt margins and 16 pt gutters to ensure I had consistent alignment and spacing across the app.
On the trail profile page, users can see what a trail looks like and what others are saying about it. Gestalt principles of proximity and similarity helped to clarify the layout by directing users’ attention to one section - such as posts or tags - at a time. Consistently using terms such as “Bookmarks,” “Journal,” and “Journal Entries” characterize the app as a space for users to record their thoughts.
Validate
Finally, using my prototypes, I conducted 2 rounds of usability testing with 10 different participants. I asked my testers to carry out 3 tasks:
Take a look at [username’s] profile and follow them.
Find and save [location] in the app.
Make a post about a hike you went on. For now, you only want this post to be visible to you.
Usability testing allowed me another chance to empathize with my potential users and revealed a handful of issues with my initial designs. Below are my initial designs compared to my second iteration after my usability testing.
Removed the Friends button next to the search bar since its function was integrated into the Search page. Added a floating action button to easily create a new post
Integrated the Search for Friends page into one general Search page where users can toggle between searching for Trails or for People
Combined the 2 post buttons which confused users into one post button with a dropdown option to post publicly or privately
What worked:
Users stated that the journal-related copy used consistently throughout the app helped them understand how to navigate the app and where to find certain actions.
By taking inspiration from popular social media platforms, users were able to easily recognize the pattern of a post.
Users liked seeing a lot of pictures as part of their social media experience and appreciated being able to see what a trail will look like in advance.
Improvements made:
In my first round of usability testing, 4 out of 5 participants struggled to start the first task. This was likely because the Friends search bar was on the Friends page, separate from the Trails search bar. In my second iteration, I combined the two search bars into one main search bar that led to a shared Search page. In my second round of usability testing, only 1 out of 5 participants struggled to complete this same flow.
Most participants were able to figure out that they could make posts from the Journal page based on context clues, but it was not always their first choice. To reduce confusion, I added a floating action button on the homepage. On my second usability test, every participant used this button to initiate the Make a Post task without a hitch.
Having two separate but similar post buttons next to each other on the Preview Entry page was confusing and caused users to second guess which button to select. Consolidating these into one post button with a dropdown helped users make a more confident selection.
Through iteration, I realized the importance of pushing crucial features to the homepage when possible to make them more accessible, and the benefit of consolidating pathways to create simpler, more intuitive flows. Overall, I saw increased success rates across all three flows tested after iterating on my initial designs.
Outcomes
My process had many unexpected trials and I struggled to keep my app simple. As I designed, I continued to think of more ideas of ways to expand and struggled to stick to my MVP. In future projects, I will be certain to have more foresight and ensure every feature is beneficial and functionally supported.
Ultimately, by continuously referring back to my primary objective and the research I carried out, I aimed to design an easy and encouraging way for hikers to find a trail. Through ideation and iteration, I created a prototype that test participants enjoyed using and successfully navigated. The result was TrailTales, the app that uses social media to bring its users’ new favorite hiking trail to their homepage.