TRAILHOUND CASE STUDY

Left side reads "TrailHound" in blue with an orange button below reading "Get out and explore". Right side has iPhones at a diagonal, showing the app on screen.
TrailHound is a machine learning outdoor exploration app that recommends areas to you based on your unique preferences. The more you use the app, the more accurate the recommended trails become.
View Figma Protoype

ROLES

Research
Design
Prototyping
User Testing
Branding

TOOLS

Google Forms
Figma
Google Docs
Canva
Adobe XD

THE PROBLEM

Most hiking and outdoor apps are designed for avid hikers. This approach to designing for hiking apps alienates users who just want to go for a walk or connect with nature for the first time.
Two iPhones showing portions of the onboarding process. They both feature the app mascot, Scout. On the left screen he has a speech bubble saying "Hi, welcome to trailhound! I'm Scout, your adventuring guide! First things first, what should I call you?". The user input reads "Sadie". Scout can then be seen typing. The right screen is a continuation of the conversation, with Scout's response reading "Nice to meet you Sadie! I have a few questions in order to personalize TrailHound to your specific tastes."

THE SOLUTION

A hiking app that learns about you the more you use it. Not everyone is going to need the same things out of an app. Utilizing the same machine learning as apps like Netflix and UberEats, TrailHound learns about its users and shows them trails they would enjoy.

USER SURVEY

I created a survey and asked people who enjoy hiking or would like to go hiking to fill it out. One of the most insightful questions I asked users was
“What feature would you most like to see in a hiking app?”

50%

TRAFFIC GAUGE

40%

SAFETY ALERTS

30%

SEARCH FILTERS
RATING SYSTEM
INFO & RULES

20%

NEARBY TRAILS

The most requested feature was a traffic gauge. Users wanted to know how busy each trail was at any given time. The second most requested feature was a danger alert system, which would inform users about potential safety issues like a broken bridge.

I found these were interesting choices, as things like a rating or review system and trail rules were ranked relatively low. 

The least wanted feature was to locate nearby trails, suggesting users didn’t really care about the convenience and were willing to go out of their way to visit an area that met their needs.

USER INTERVIEW

Following up with participants, I learned the reasons for the choices in features. First, the traffic gauge. They wanted the peace and quiet of nature and stated this as one of their main reasons for hiking in the first place. If the trail is too busy, the serenity of the forest is lost. Second, users were worried about social distancing. They didn’t want to be in close contact with other hikers and would much rather choose an empty path.
The danger alert system, being the second highest requested feature, was also chosen by quite a few people. When talking about this with those that I interviewed, the reasons were obvious. Not everyone is an experienced outdoorsman. In an app designed for novice hikers, it makes sense to steer users away from things that they aren’t equipped for, such as wild animals, flooding or a broken path.
I also asked about my hypothesis on why users didn’t care about locating trails closer to them. The interviewed participants confirmed that they would rather go further to get to a better trail, and expected the app wouldn’t show them an area absurdly far anyways. Compared to the other features, it wasn’t as useful or necessary to just have a map of trails, which could be obtained on any other app.

COMPETITIVE ANALYSIS

ALLTRAILS

AllTrails is one of the most popular hiking apps on the app store. It is a nicely designed app that shows users trails based on categories such as popular, nearby or dog-friendly. It also has a very unique feature that allows the hiker to record and create their own trail if it is not available on the app.

Unfortunately this feature was inaccurate and I found several user-created recordings that were not linked to the correct location.

STRAVA

I really liked the idea of Strava. It combined the connectivity of social media by allowing users to create their own profile, share their activity and even compete in challenges.

The reason this app does not work for me in practice comes down to safety. By creating an account, I could see any user’s profile. I could view their photos, where they had been with exact GPS location and date and time. I was easily able to find people near me who had a routine and predict exactly when they would next be at a specific area.

For these reasons, I didn’t think including a social media aspect was a great idea, but I still explored it through the project.

GAIA

Gaia was the most simple app I evaluated. I was surprised when signing up, it did let me customize my needs and preferences.

My excitement quickly evaporated when I made it to the main portion of the app, seeing that my customizations had not done much. I was shown all the same places I had been on the other two apps, in a proximity based order.  It was also a very confusing app, with a lack of hierarchy and didn’t seem to do anything more specific to hiking than an app like google maps could.

PERSONAS

ANDREA

Older woman facing away from the camera walking in a park
  • Hasn't gone walking outdoors in a while
  • Never been hiking
  • Wants to plan a day trip with her family

SADIE

Woman standing at edge of woods
  • Goes on hikes sometimes
  • Has friends that she likes to bring along
  • Planning a picnick

MICHAEL

Man sitting on ground holding metal teapot.
  • Could thrive in a survival situation
  • Solo adventurer
  • Regularly goes on long camping trips
I created three tiers of personas to represent different levels of experience with the outdoors. This seemed like a logical step to me, in order to design for different types of users. Due to the short time frame of this design, I needed to narrow it down and focus on one persona in particular.
Left side is a column describing the persona, Sadie.
Sadie
Goes on hikes sometimes.
Has friends that she likes to bring along.
Planning a picnick.

Right side has a quote "How often do you go hiking?". There is a circular bar graph showing 70%. It is labeled as "a few times a year".
I chose Sadie for the focus of this design for a few reasons. First, she fit in the most with the users I surveyed and interviewed. She was a casual hiker who only went out a few times a year and just wanted to enjoy nature for a little while before returning to the comforts of her regular life. It also made the most sense to design for the user that was the most neutral and then move out to other personas from there.

USER STORIES

With Sadie selected as my persona I thought about a few user stories for her.
As a new user I want to save my needs so that I can personalize my feed.

As a casual hiker I want to view alerts so that I can stay safe.

As a nature lover I want to locate interesting trails so that I can explore.

USER FLOW

Having narrowed down the needs and wants of the users, I used Sadie to create a flow illustrating how a typical hike might work.
Main user flow navigating through the app

CONTENT STRATEGY

I was happy with this flow and after getting some feedback, was confident it made sense. With this as my base, I created a sitemap to decide which screens were necessary for the flow to work correctly.
Content Strategy highlighting nav bar, for you, recommendations, trail details, safety notifs, nearby, saved and profile.
I mapped out a lot of features that a finished version of this app would require, but for this project I mainly wanted to explore the features that were requested in the research phase. I highlighted the necessary features to make the process quicker.

INITIAL SKETCHES

A piece of paper with a few screens sketched on it and a black pen resting on top of it.
Based on the chosen name for the app, I already knew I wanted a small dog as a guide through the app. He was designed to be small and cute and bring joy to users as they navigate through the app. I sketched out some ideas for the onboarding screens. These screens would become very important, since the app is machine learning based and needs starter information about each user.

WIREFRAMES

Black and white wireframes showing two onboarding screens, a for you screen, trail preview screen and safety alert screen
With my sketches in front of me, I began my first wireframes. I wanted to get the main screens thought out and used a few different wireframe kits in Figma to get this process done efficiently. This gave me the freedom to try out different layouts without spending time on the small details. I made sure to keep the text and buttons large enough for people with visibility or mobility impairments.
View Figma Wireframes

BRANDING

Moodboard showing the name TrailHound in three different fonts. There are also a few colors sampled from the collage of photos next to it. These photos include; a person standing in a grassy valley, a snowy forest through an open tent door, a beagle sitting, an RV parked in a pine forest under a starry sky, a person on the edge of a cliff overlooking a lake, a person walking across a log and a beagle standing in some tall grass.
I created a moodboard from photos on Unsplash. The goal was to create an app with the feelings of adventure and exploration without being intimidating. It needed a friendly and even cute atmosphere to help users who aren’t as experienced feel welcome.

Color picking from my chosen photos, I created three color palettes. The middle version with the orange and blue ended up being the one I felt matched my desired brand.
For you page showing original design colors
For you screen showing accessible colors
Next I tested my color choice out on one of my screens. Making sure my design had enough contrast for visually impaired and colorblind people, I ran my colors through the WebAim contrast checker. The orange was too bright on the white background and the blue wasn’t dark enough either. I altered the colors until they worked. I also resized the welcoming text as an extra measure and added some styling to the navigation bar. The contrast between the orange and blue would be subtle for colorblind users so I pulled the tab higher to ensure they would be able to tell which screen they were on.
App mascot Scout, a brown and white dog with floppy ears wearing an orange bandana. He looks content with a relaxed smile.
App mascot Scout, a brown and white dog with floppy ears wearing an orange bandana. He looks happy with his eyes closed and tongue sticking out.
App mascot Scout, a brown and white dog with floppy ears wearing an orange bandana. He looks shocked with his eyes wide and mouth open.
Another part of branding was designing my app mascot, Scout. I did not want him to resemble any specific breed, but his main inspiration was of course a kind of hound to reflect the app name, TrailHound. Giving him different expressions was very fun and I’d love to animate him as well.
A circle with a profile silhouette of a dog. There are action lines near his face to indicate barking.
A circle with a tree trunk snapped in half
A circle with three boards on top of it. The middle board is broken.
I also designed a few icons for the safety alert feature of the app. I matched them with the app colors, and in the final prototype they are labeled with text to avoid any confusion, since things like “loose dog” are not typical icons that users are accustomed to.

PROTOTYPING

I took my wireframes and applied the same styling to them as my branding testing screen. It was also in this stage that I linked my screens together to be clickable.
Five iPhones, each showing a different screen of the app; For you, trail details, navigating trail, safety alert and alert resolved.View Figma Prototype
There were a few differences between the original layout and the final version. I added a horizontal scroll to the main feed to add categories within the personal recommendations.
Black and white wireframe showing a "For you" tab of the app.
For you screen showing accessible colors
Even within personalized machine learning apps, there are typically categories because what you like may be broad and varied. It makes sense to allow users to narrow this down.
I also created a working slider for the onboarding screens, with the mascot Scout bringing a little bit of fun to this portion.
Screen showing a stylized hound dog asking "How often do you go outdoors?" The slider is to the left, indicating "I'd like to get out more." The dog looks content and is smiling.
Screen showing a stylized hound dog asking "How often do you go outdoors?" The slider is in the middle, indicating "I go walking pretty regularly." The dog looks happy and is sticking his tongue out.
Screen showing a stylized hound dog asking "How often do you go outdoors?" The slider is to the right, indicating "I basically live in the wilderness." The dog looks shocked with wide eyes and an open mouth.

USER TESTING

For user testing, I did virtual testing. 

Responses such as “Scout would make me go hiking!” and “"I really like the option to make sure trails are wheelchair accessible, it keeps different people in mind" were great to hear as users navigated through their fictional hike through Wolf Canyon.

There were also helpful critiques such as one participant stating "I don't think I would want to scroll through all that to have to get to the bottom every time." I agreed wholeheartedly with this specific comment, and added another button to the very top of the trail details screen. This meant that users familiar with the trail, or who simply did not care for all the information, could get on with their hike.
Two iPhones showing a trail details screen. The one on the right has a large button near the top to "Begin hike". The one on the left does not.

FINAL THOUGHTS

This case study was so fun to work on and I definitely learned a lot, especially about machine learning. Designing an app that changes based on the user’s needs is not something I have done before. Going into the design, I was unsure about this idea and didn't know if it would work out the way I had invisioned.
Scout was my first character design done entirely in vector shapes. In my next project I would love to have more time exploring animation and micro-interactions. It's not something I have had the chance to experiment with much, but did get to test out with things like the slider animation. With my background in art and illustration, this part of UX is especially intriguing to me. 
I was also one of the millions of Texans affected by power outages during the time I worked on this project. Losing power for an entire week to the winter storm, there are definitely things I would have done differently, given more time. I would have loved to design more screens for the other tabs in the navigation bar. Creating layouts for a hike overview or sharing to social screen both sound like they would be fun challenges. I plan to work on these more and continue iterating on this project in the future.
Thank you for taking the time to look at my case study! If you like my work, you can connect with me on LinkedIn or follow me on Behance. If you think we’d work well together, feel free to send me a message through my contact form and I’ll get back to you as soon as I can.
View Figma PrototypeBack to Case Studies