TRAILHOUND CASE STUDY
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
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.
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.
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?”
INFO & RULES
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.
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.
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.
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 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.
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.
Having narrowed down the needs and wants of the users, I used Sadie to create a flow illustrating how a typical hike might work.
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.
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.
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.
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
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.
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.
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.
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.
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.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.
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.
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.
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.
View Figma PrototypeBack to Case Studies
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.