Timeframe:
200 hours, ongoing
Role:
UX Designer, UI Designer, UX Researcher
Tools:
Figma, Optimal Workshop, Miro, Whimsical
Deliverables:
End-to-End Mobile App MVP, Branding
The project owner expressed frustrations at the lack of thru-hiking app options. The main competitor app has a clunky interface that impedes usability and lacks features. It’s focused on a narrow use case which doesn’t accommodate the diverse needs of the hikers. Poor heuristics lead to uncertainty of what symbols mean and therefore discourage further discovery.
Strategize a scalable and intuitive app that serves diverse hikers to help them navigate with certainty.
I would consider myself a novice hiker and that would be a generous description. I wasn't aware of the thru-hiking niche so preliminary research was crucial. I needed to understand when, how, why, where, and who was participating in this activity.
I performed an in-depth audit of the main competitor app to examine their design solutions. I noticed that un-labeled icons and low-contrast color pairings negatively impacted the usability and accessibility of the app. With key low-contrast components averaging 1.44:1 - they do not meet WCAG AA compliance.
Through the generosity of friends and colleagues, I was connected with 4 different thru-hikers that agreed to be interviewed. 3 of them had used our competitor thru-hiking app and one was an old-school hiker who used paper maps and improvisation. The interviews provided me with a much deeper understanding of why people loved the activity, and what people were looking for -- most of which were the antithesis of what technological products can provide.
Due to the pandemic, I conducted interviews over Zoom, each lasting 45 minutes.
What role does the hiking app play in user’s hiking trips?
How do people interact with hiking apps? Do they rely on them or use them as a fallback reference?
What are some frustrations users have about their hiking app, or what information are they looking for?
All participants needed to see current location in relation to the main trail. Useful when exploring off-trail.
Water waypoints are important stops hikers make daily, and dry water sources was a common obstacle all hikers had faced.
3 out of 5 hikers wanted map layers, and more hike info than just where the trail was in relation to them.
All hikers listed connecting with nature, and to varying extents - discovery; as a primary motivator for hiking
4 out of 5 hikers said comments were one of the most valuable hiking app features
4 out of 5 hikers wanted info about landmarks & potential points of interest for exploration
I realized we realistically couldn't create an app to solve all user problems, but I also got the sense that hikers don't want us to anyway. Personal growth that comes from facing and overcoming obstacles, connecting with nature, and resourcefulness are essential parts of the experience.
I want to highlight this unique situation because my goal shouldn’t be to solve my users' problems, but rather provide them with information that helps remove concerns around navigation only. We want our product to amplify the experience by allowing users to easily scale their dependence on the app in line with their own hiking preferences.
I performed an open card sort to gain insight into user's associations to help group items effectively.
.png)
I requested brand keywords from the stakeholder and worked off the terms he provided to come up with a few different logo directions and names.
Some of the final options:
I presented the winnowed down list to my mentor after the stakeholder meeting and he gave me feedback from a visual design and technical standpoint. I then put together a few style tiles for the stakeholder.
.png)
I took some inspiration from established navigation apps: Google and Apple Maps (Apple Maps has its flaws, but the UI elements are surprisingly solid). I showed my ideas to my stakeholder, as well as various friends and family members to get some outside perspective for quick iterations
.png)
A minimum viable product for this project was extensive because we were starting from scratch. I designed dozens of screens for edge cases and onboarding in addition to the prototype MVP. Here are the main screens and features:
.png)
I recruited 4 experienced hikers to participants in my moderated usability testing which I conducted via Zoom, using a hi-fi prototype in Figma.
"You’ve been hiking for a while and want to double check where you are. Open up and check the map. If you would continue interacting with the app after checking your position, please walk me through your next steps."
"You’re planning your day ahead, and you know you want to bookmark a cool viewpoint for today. Check the waypoints list, and navigate to the waypoint card for a viewpoint. "
"You’re spending the night in town and want to download the next sections of the trail while you have wifi access."
"You see a notice of a wildfire ahead. Go into the app and begin a a re-route log."
All 4 participants were able to deduce what was happening on the map screen, even if unfamiliar with the particular waypoint icons. (The first task flow was largely exploratory.)
All participants were able to complete the task in minimal steps, with few issues. 2 participants went through the list view, and 2 participants through the map view.
3 out of 4 participants had difficulty with the search function. The reasons varied: two participants assumed it would only search within their current hike, and one more similarly assumed but labeling didn’t clarify for them.
None of the participants correctly guessed the purpose of the orange caution icon. While some were close, the iconography is currently misleading.
3 out of 4 participants (all tasked with this flow) assumed “routes” had to do with downloading a new map section, not re-routes.
All participants struggled with labels and titles in at least one instance. The most frequent examples: copying coordinates action and search scope: current section/choose section
For V2 I updated a lot of my labels to more precisely reflect capabilities. I also added additional screens: full hike map, waypoint pages that are editable (for custom created waypoints), and more.
I designed a dozen or so additional screens for the developer that I didn't include in the MVP prototype including: the login screen, versions of the map and waypoint screens when you haven't downloaded a map yet, searching for maps when you don't have service, etc.
I didn't end up using a third party platform for handoff as my developer is comfortable using Figma. Handoff was a multi-part process.
We plan to continue fine-tuning and expanding the app's capabilities as resources and time permits. We're hoping to do more research about how best to optimize within our resources. Aside from feature refinement based on user feedback, we've also discussed:
Building a tool and the constraints around maps and scraping data was new for me. I gained experience designing for a product aimed at amplifying an already complex experience.
I like to get into the details and minutiae of the research and anticipate weird use cases, no doubt. But I need to be mindful of project scope ensuring feature implementation was realistic within the specified timeline.
I think we took on an incredibly ambitious project (creating a whole brand identity, brand styling, documentation, prototype, additional screens for dev) that would generally take a design team months to complete – and delivered on a very tight timeline.
.png){kind=small}
.png)
.png)
