Art & UX Design
Designing a GPS & data aggregator app to help hikers make the best decisions for their trip by providing them with up-to-date information from trusted and reliable sources
Role: Lead UX Designer/UX Researcher
Time Line: October 22'- March 23"
Tools: Figma, Google Docs , UsabilityHub
Platforms: Android
THE MOUNTAINS ARE CALLING
are you ready?
Hikers, backpackers, and mountaineers all rely on a mix of books, websites, and apps to help them prepare for their adventures in the mountains. To make things more complicated, each mountain range and region comes with its own unique weather patterns and other variables that hikers need to take into consideration. With multiple sources of information to choose from, I wanted to see if there was a way to simplify searching for trip info as well as sharing that info with friends and family in hopes of making backcountry travel safer for everyone in the Pacific Northwest of the US and Canada.
I think we're lost. Do you have a map and compass or a GPS?
I've got a Cliff bar and some chapstick in this fanny pack. We're fine.
"How can we make it easier to find information for a hiking trip without having to scour the internet?"
TrailSafe is a mobile GPS and data aggregator app developed for hikers, mountaineers, and other outdoor enthusiasts. It aims to help users better prepare for the elements and environment and reduce accidents when recreating in the backcountry by providing critical information for trip preparation in a all-in-one app for the Pacific Northwest of the US and Canada.
Problem Statement
Intermediate and advanced hikers are having to seek out information from multiple sources and GPS apps in order to prepare to travel to remote locations with little to no cell service, and hikers struggle to gather, organize and share that info with other party members, friends, and family.
Goals
Create an app that provides:
-
An efficient way to condense, deliver and display weather & environmental data from multiple sources to one app
-
An easy way to submit trip reports on the go
-
A fun and functional file management that allows sharing between friends and family
Design Process
empathize
define
ideate
prototype
test
USER RESEARCH
getting to know the outdoorsperson
The goal of the user research was to better understand user needs and obstacles for collecting and sharing trip information in the hiking community. I conducted an online survey that focused on participant experience level, types of apps and websites used, and phone usage while recreating in the mountains.
​
Based on the survey results, three participants were then selected for interviews to gather more in-depth information on trip preparation. Questions were geared towards app and website usage and how participants go about searching, collecting, storing, and sharing data.
The online survey was conducted using Surveyplanet.com with a mix of 20 hikers, backpackers, and mountaineers that I'd interacted with over Instagram. The survey participants resided in the Pacific Northwest of the US and Canada and varied in age, experience and skill level.
Online Survey
Survey Results
83%
Used a combination of websites and GPS apps to help prepare for a trip
67%
Review trip reports to help with their planning and to learn about trail conditions
87%
Rely on their phone to access downloaded information and for GPS when hiking, backpacking, or mountaineering
Preferred Sites & Apps
-
AllTrails
-
Gaia GPS
-
Google Maps
-
Fatmaps
-
Caltopo.com
-
Mountainforecast.com
-
NOAA.com
-
NWOC.com
-
Avalanche.ca
-
nwhikers.net
-
weather.com
-
summitpost.org
-
peakbagger.com
Three interviews were conducted via Zoom and each session lasted 15 minutes. The participants were selected based on their experience level in the outdoors and their familiarity with GPS trail apps and hiking websites. The goal of the interviews was to discover how users were preparing for the outdoors, what apps and websites they used, and how they used their phone while hiking.
Interviews
Noteworthy Quotes
“When preparing to venture outdoors, the first determining factor is weather. I have a list that I’m slowly checking off in my mind as well for other variables. Books and maps are ways I look for locations. I use recent trip reports from other hikers too. It shows me what’s doable at the current time. I use NOAC for avalanche dangers and road reports from National Forest websites. SNOTEL websites as well.” –Hwei/Beginner mountaineer and outdoor athlete
“Yes, I use the apps on my phone, but it depends on the location. If there is a lot of elevation, I will check the weather on different elevation levels. If its fire season, I’ll use fire maps on WTA. Really depends on the variables. I don’t really need a ton of info on the more difficult terrain because I don’t go solo often” -Ryan/Advanced hiker and backcountry photographer
“I’m a novice. I like to just go hike. I use AllTrails to help me find trails, but that's it. I’m starting to learn how to navigate the outdoors better now though. I should be better prepared when I go outside, but for now I stay close to home and I don’t have to worry about too many hazards.”
- Katherine/Novice hiker
Why was all of this important?
The data from the surveys and the information collected during the interviews highlighted the value of smartphones when recreating in the outdoors, with some participants viewing them as an essential item. All participants relied on some type of GPS app for navigation and most of them used various websites for weather and trail information. Based on the user research I conducted, there is a need to help collect, organize, and share data among users in the outdoor community.
Affinity Map
When asked if they would use a data aggregator app with GPS capabilities, all participants responded positively and said they would try it if there was an app like that on the market. However, there were some noticeable differences between novice hikers' prep work and intermediate/advanced hikers' prep work before their trips, as well as how they use their phones while hiking. I created an affinity map to help better organize the wants and needs of the different experience levels and to make sure the project was on track.
Hwei - beginner mountaineer and outdoor athlete
Katherine - novice hiker
Ryan - advanced hiker and backcountry photographer
The affinity map and the survey results led me to conclude that novice hikers tend to focus on basic trip information like weather and trail info, while intermediate and advanced hikers turn to recent trip reports, advanced weather data, GPS mapping sites, and other various sources.
​
Based on this data, I revised the project to focus more on intermediate and advanced hikers in order to avoid overloading novice hikers with information that they might not know how to use properly for trip planning.
USER PERSONAS, JOURNEY MAPS & USER FLOWS
seeing the full picture
Using the data collected from my survey and interviews, I created three design personas, journey maps, and user flows that represented beginner thru expert skill level hikers.
User Persona
While the project shifted focus to intermediate and advanced hikers, I still utilized the beginner persona, journey map, and user flow to create a fuller picture of the hiking community and ensure I was creating the best user experience possible by not overlooking any dislikes or design improvements.
​
​
TrailSafe Users Need
An all-in-one for navigation and conditions
Offline access to information
Reminders
Up-to-date information from trustworthy and reliable sources
Journey Map
User Flow
Wireframes and Prototyping
using data to craft an experience
I started my wireframing process using pen and paper to sketch out a dashboard and the three core features of TrailSafe. Once I was satisfied with the layouts, Figma was used to create low, mid, and high-fidelity prototypes.
Sitemap
Before I created my sitemap, I conducted a card sort with 10 participants using Optisort. The goal of the card sort was to improve information architecture and navigation for TrailSafe users before beginning prototyping
Wireframing
I always choose pen and paper over digital mediums when starting a project because I feel like it allows more creative freedom when generating ideas and its easy to revise.
Prototyping
As a traditional artist, it was humbling to see that I had much to learn about visual design in app/software creation and how people engage with different design elements in a technical space as I would soon come to find out during useability testing.
Usability Testing
ideate, prototype, test, repeat
Usability testing was conducted using five participants from my initial survey pool, so participants had been screened prior to testing. Two in-person testing sessions were scheduled, and the other three participants completed the testing using Zoom. All testing sessions were administered thru Figma on users mobile phones and recorded on Reflector. Participants were asked to complete a task in three different scenarios to determine functionality of the apps core features.
The initial round of usability testing failed due to the absence of stock maps and copy, resulting in confusion among all the participants about the features being tested. Additionally, navigation was clunky and not intuitive. To improve the results, images and additional copy were added for the second round of usability testing.
“I HATE THE FILE CAROUSEL”-All participants
All participants disliked the visual appearance and the functionality of the file carousel. It was visually unappealing and would be frustrating to use as more folders were added.
“I DON’T KNOW WHAT I’M LOOKING AT”
-Kristin
Participant 1 was anxious receiving the scenario prompts because she couldn’t figure out how the app functioned due to a lack of stock images and copy.
“I HATE THE CURRENT COLOR SCHEME”
-Logan
Participant 3 brought up the color scheme multiple times throughout testing indicating that it was a potential distraction.
“WHY ISN’T THERE A HAMBURGER?”
-Rory
Participant 5 and others wanted increased functionality, specifically a menu, for navigation.
Participants tried different paths for navigation rather than sticking to the initial flows I created.
The TrailSafe prototype went thru five iterations and another round of usability testing before the product was ready for delivery. The revisions focused on designing a new file system, trail info menu, and dashboard to improve navigation and functionality.
File Management
Feature
After the 1st usability test was completed, I quickly realized that I created a nightmare filing system and all participants hated it.
​
Most of the users liked the overall minimalist design, so I worked to simplify my second iteration by removing the 3d file carousel and replacing it with a 2d scrolling file library instead. I replaced the scrolling menu with static buttons to improve ease of use.
Before I started this project, I had little experience with anything design related, so I was unfamiliar with industry standards and style guides. I was unaware of the impact that things like button style, shape, color and its position can shape a users experience and perception of an app or a feature they're using.
The first iteration of TrailSafe was built based on what I thought was intuitive and visually appealing, and I quickly learned that I was misguided in thinking that way as I progressed thru the course. But, once I learned how to apply different visual design techniques like grids and I became familiarized with Google's Materials style guide, I was able to refine my design for my dashboard and my trail info menu to create a clean and visually pleasing app.
Trail Info Feature
TrailSafe Clickable Prototype
let's go outside
tap to start your journey
Summary & Reflection
what I got right, what I did wrong & what I learned
Designing is a rigorous process that requires effort and commitment.
Having well-defined goals and using established UX methodologies helped me stay organized and focused while working on my app. User research came easily to me as I’ve had over 12 years of experience working in sales in marketing. It took time and dedication to develop the other skills that are necessary to succeed in UX, specifically learning the design tools and how to adapt some of the data I had obtained to my design. Visual design was relatively new to me as well, so much of the negative feedback I had received was regarding the appearance of the app, and not its functionality.
Failure can lead to success
Every failure was an opportunity to learn and improve. For example, as a new designer I was unaware of the impact it would have to not provide basic map images to my first prototype when conducting user testing. Many of my participants were confused during the first round of testing because they didn’t know what they were looking at. I was able to use this opportunity to get a first-hand perspective of what users were experiencing with my prototype and pose new questions I hadn’t initially though of prior to starting my wireframes. I learned that it’s important to keep an open mind and be receptive to feedback from both your users and your peers while keeping your feelings and biases out of your design work.
​
Staying current matters
By researching, networking, and keeping up-to-date with the latest developments in UX and design technology has been invaluable. It has enriched my understanding of the industry and led me to discover popular tools such as Figma, Balsamiq and InVision. I am excited to continue contributing to the UX community in the future.