Trailhead App
End-to-end iOS Application Design for Hikers
Hikers need a tool that lets them search for and find hikes based on their specific needs and gives them real-time updates about conditions.
As an outdoor enthusiast and avid hiker, I try to spend as much time as possible on the trails. While there are many apps designed for hikers, several of my hiking peers have expressed frustrations about existing hiking app features and a desire to have a hiking app that meets their individual needs based on their skill level while also providing real time data about trail conditions.
MY ROLE
User Research, UX/UI Design, Wireframes. Branding, Prototyping, User Testing
TIMELINE
80 hours
TOOLS
Figma, Adobe Photoshop, Google Forms
THE CHALLENGE
User needs are not currently being met by existing hiking platforms.
How might we design a hiking tool that is differentiated from market competitors through providing an experience that is personalized to the individual needs of the user while also providing real time data about trail conditions to optimize the user experience?
THE SOLUTION
I will design an end-to-end application that allows users to search for and navigate hiking trails based on their individual skills, interests and needs with access to real-time updates on trail conditions that may impact their hiking plans.
Empathize
RESEARCH RAMP UP
THE ASSUMPTIONS
To begin this design process, I wanted to first understand the target audience. I conducted an electronic survey which I posted in several social media channels including Instagram and Facebook groups related to hiking in order to gather feedback from individuals who enjoy hiking and individuals who have experience using hiking apps.
The survey results allowed me to better gauge the demographics of my target audience, and understand some basic motivations and needs of hikers when searching for, selecting, and navigating a hiking trail.
Based on my personal experience with hiking app frustrations and what I have discussed with peers, my assumptions are as follows:
Safety is the main concern of hikers.
Hikers want a personalized interface to easily find trails that meet their needs.
Hikers need access to a GPS mapping feature with or without service.
HIKER SURVEY RESULTS
I was fortunate enough to have a sample size of 82 hikers participate in my survey to provide me with some foundational understanding of my target audience demographics and their needs and goals. What surprised me and struck me as most interesting about this data was that while safety did play an important role to 36% of hikers, uncrowded trails, good weather, clear trail markings and available parking were some of the most common goals of users.
EXPLORATORY RESEARCH
Next I conducted exploratory research to better understand what main challenges users face, what deciding factors play into choosing a trail, and who the main hiking app competitors are in the market.
This research revealed:
The main challenges hikers face on the trail revolve around safety, getting lost and timing due to poor planning and unexpected weather or trail conditions.
Users choose trails mainly by trail logistics, time, weather conditions, desire for an uncrowded trail, how highly recommended the trail is, and the availability of parking.
Top competitors in the hiking app market include AllTrails, Green Tracks, Gaia GPS, and Komoot
COMPARATIVE ANALYSIS
After identifying top competitors in the hiking app market though secondary research, I conducted a comparative analysis of existing features on successful platforms to identify high-priority features to potentially include in my design.
PRIMARY RESEARCH
Using the survey results as a guide, I generated a user interview guide to ask questions that would allow me to gauge core user needs, pain points, goals and motivations for users during the process of searching for and navigating hikes.
Using the survey responses, I recruited 4 participants for interviews who met the criteria of either enjoying hiking or having experience using hiking apps.
DATA SYNTHESIS
After collecting data from user interviews, I synthesized the data using an affinity map to identify patterns and themes which would help me better understand and empathize with my users. I identified the main user needs, pain points, goals and motivations here which led to key insights.
The patterns identified in my research did not validate my original assumptions but instead pointed to 3 main user needs that were not being met by existing competitors:
KEY INSIGHTS
Define
USER PERSONAS
My interview data yielded two clear user personas which embody the motivations, goals, needs and pain points of my users. Defining these personas allowed me to empathize with my users and served as a guide for design decisions.
MEET “KAI”
Kai is a local hiker who is motivated by convenience and solitude on the trail. She becomes frustrated when she arrives at a trailhead only to find a full parking lot and a crowded trail. She needs a platform that provides up-to-date information on parking availability and trail traffic so she can choose the right trail.
MEET “ADAM”
Adam is a long distance trekker who is motivated by safety, adventure and preparedness on the trail.He becomes frustrated when trails are difficult to find or navigate and when there are unexpected dangerous hazards on the trail. He needs a platform that provides up-to-date information on navigating poorly marked trails and weather conditions so he can plan for any hazard to keep himself safe and on the right path when hiking.
In order to meet the needs of all included personas, the solution will include the following key features:
Filtering trails for available parking and least crowded
Up-to-date trail conditions based on collaborative user input and GPS data averages
Information on trail traffic, parking availability, and trail conditions (including weather, hazards, directions, etc.)
KEY FEATURES
SITEMAP
Using FigJam, I created a sitemap for the hiking app. Starting with the Login and Navigation Menu through the primary screens and working all the way down to tertiary screens using the feature prioritization roadmap based on research and successful competitor features. View full sitemap here.
USER FLOW
Taking all of the needs and goals of my users into consideration, I compiled a stacked user flow using FigJam to allow me to embody the user journey. View full User Flow here.
TASK FLOWS
Next I created four task flows in order to visualize the main functions of the app that will address the needs of my user personas. View full Task Flows here.
Ideate
WIREFRAMES
Using the user and task flows as guides and my identified key features of filtering trails for available parking and least crowded, up-to-date trail conditions based on collaborative input and GPS data averages, and information on trail conditions, I created mid-fidelity wireframes in Figma for the key screens of the desired flow.
Design
Branding
Using my brand values of confidence, adventure, safety and passion, I began designing logos that conveyed the feeling of the brand and chose a color palette that feels very natural to align with the mountains users will be hiking with this app. I designed a few logos and moved forward with the logo that felt most simplistic, natural and aligned with brand values.
UI Kit
With my branding in place, I developed a UI kit to easily and cohesively apply the branding across the app.
Prototype
Experience 1 - Filtering
To allow users to filter their search for trails by trails with available parking and low trail traffic, I included these options in the filtering screen to generate a list of trails that meets the users specific needs for parking and uncrowded trails.
Experience 2 - Conditions
To allow users to see real-time conditions for parking availability, trail traffic and weather for their selected trail, I included a ‘Conditions’ tab for each trail which will be broken into the three aforementioned categories.
Up-to-date conditions data will be generated by using collaborative updates provided by users as well as live GPS data from cell phones in the area to determine average estimates by date and time.
I had to be creative in determining quantification and data points for parking availability and trail crowdedness. With the help of group crit and user feedback, I opted to use multiple graphs, charts and measurements at different time points to best convey this information to the user in an easily digestible manner.
Parking Conditions
Weather Conditions
Trail Traffic Conditions
Experience 3 - Adding Updates
To ensure users were receiving the most up-to-date information on conditions possible, I implemented a collaborative system that allows each user to add updates to conditions in real time. Users expressed a desire for a communal interface and confirmed feeling more confident when following recommendations and reviews from peers.
Experience 4 - Map Pin Updates
To allow users to navigate the trails more easily, especially in poorly marked areas or areas with hazardous conditions, I incorporated user added pins onto the navigation map that allow you to view user-added updates related to that specific GPS location.
Test
Usability Testing
In order to validate my proposed solutions, I asked 3 users in the target audience to test the interactive prototype to determine if the app was intuitive, easily navigable, and the features met user needs. Users were asked to complete the following tasks:
Task Flow 1: Filtering trail search by trails with available parking and trails that are not crowded.
Task Flow 2: Checking the trail conditions for a specific trail to determine likelihood of parking availability, potential crowdedness, and if there are any hazardous conditions to plan for.
Task Flow 3: Add an update to parking conditions for a trail.
Task Flow 4: Use user-added Map Pins to navigate the trail.
TEST FEEDBACK
All participants were able to successfully complete the outlined tasks with ease and provided some excellent feedback on what worked well and what could be improved upon.
PRIORITIZATION GRID
In order to determine next steps in the iteration phase, I created a prioritization grid where I placed user feedback from testing onto a matrix of frequency and severity. This allowed me to identify which potential iterations were of the highest priority.
Iterate
Prioritizing Next Steps
HIGH PRIORITY ITERATIONS:
66% of users felt the low-high trail traffic slider was not intuitive and would prefer a simple filter feature to filter the search for uncrowded trails. To address this, I will replace the trail traffic slider with a ‘Least Crowded’ filter.
66% of users felt the terms ‘a lot’ or ‘a little’ were too subjective in quantifying parking availability and felt the use of percentage increments would be more intuitive. To address this, I will iterate on the ‘Add Parking Update’ screens with quantification measurements of parking availability and have users vote on which measurement is the most intuitive.
66% of users wanted to click on the pins on the elevation map in addition to the pins on the navigation map. To address this, I will add an additional pathway to open pin information from the pins on the elevation map.
MID PRIORITY ITERATIONS:
33% of users felt an option to add live photos when adding updates to the map would improve their experience. To address this, I added an option for adding live photos when adding trail condition updates on the map.
33% of users felt an option to add live photos of the parking lot when adding parking conditions updates would improve their experience. I addressed this by adding an option for adding live photos when adding parking condition updates.
LOW PRIORITY ITERATIONS:
33% of users requested an option for adding wildlife spotting updates. This is a great idea though not integral to user needs via research. This is not an iteration that will be implemented during this round given the timeline for this project, though it would be great to focus on in the future.
33% of users would prefer to use this app in dark mode. This is another great idea, though not integral to user needs via research. This is not an iteration that will be implemented during this round given the timeline for this project, though it would be great to focus on in the future.
ITERATIONS
Iteration decisions were made based on the level of frequency and severity of feedback provided with the most frequent and most severe iterations being tackled first.
Least Crowded Sort Feature
User’s felt that a sort option to prioritize search results by ‘least crowded’ made more sense than an adjustable slider to filter by different increments of trail traffic as users did not know why anyone would choose to filter for ‘high traffic’. I moved this filtering feature into a selectable sort option and removed the slider filter feature for trail traffic.
To address this, I added ‘Least Crowded’ as a sort option and removed the ‘Trail Traffic’ slider option on the Filter Search screen.
Parking Availability Quantification
User’s felt that the terms ‘a lot’ or ‘a little’ available parking was too vague and requested block percentages by 25% increments as a way to quantify available parking in a more easily understandable way.
To address this, I iterated three potential options of quantification copy and reached out to users for feedback on which design made the most sense to them.
Iteration 3 was the most intuitive iteration with 50% of users selecting this layout out of the three available.
Adding Photos to Updates
On the Map: Users requested the option for live photos to be added to and included in user updates.
To address this, I included a live photo of the fork in the trail on the map pin update at the GPS location where the fork exists. This photo will allow users to close the gap between what they see on their screens and what they see in front of them on the trail to more easily navigate at poorly marked or hazardous areas.
Adding Photos to Updates
In Conditions: Users requested the option for live photos to be added to and included in user updates.
To address this, I included a set of new screens which provide a prompt to add a live photo when the user in the process of adding an update to a condition. In this task flow, the prompt appears when a user is adding an update to the parking availability conditions allowing the user to take a photo of the parking lot to include in their update for other users to see.
Final Prototype
Reflection
I really enjoyed working on this project and am really pleased with not only how the design turned out, but with how much I was able to learn throughout this process. As I reflect on this project, some of my biggest takeaways were:
Biases: Conducting thorough research and keeping the user at the forefront throughout the entire process is key to providing the right solutions. Although I am an avid hiker and use hiking apps regularly, my initial assumptions about what users need based on my own experience and biases were ultimately invalidated by my research.
Atoms: Although it can be tedious to spend the time developing the smallest building blocks of your product, doing so will ultimately lead to a stronger design. The design process is complex and breaking it down into smaller parts at the start will help you stay organized and develop a cohesive, well-rounded product.
Passion: This self-initiated project was my favorite one to tackle because the content was something I am so passionate about. During this project, I felt inspired and excited during every step of the process to deliver something meaningful in an industry that means so much to me.
KEY
TAKEAWAYS
If I had more time, I would add a feature for users to filter for wildlife and add updates whenever wildlife was spotted on the trail. I would also add additional filtering options for accessibility on the trail, which was something that was brought to my attention as a major industry gap when discussing with peers in a social hiking group only after I had moved into the late stages of this product and the timeline did not permit adding additional research and features.
Thank you for taking the time to read my case study! If you have any feedback or would like to get in touch, please don’t hesitate to reach out.