Overview

Role: UI/UX Design

Year: 2024

Timeline: 14 weeks

Tools Used: Figma, GIMP, MapBox

The following project is fictional however based on real-life scenarios.

Background

The idea for this project began from my growing fascination with the outdoors. As hiking grows in popularity, the need for resources becomes paramount. Through my analysis, I found a need to create a robust solution that encompasses navigation, safety, and fitness that’s supported by the community.

Problem

According to the Washington Post, 22 people died from falls while hiking in the U.S. in 2023. This doesn’t include mountain bike accidents, animal attacks, weather-related accidents, and accidents to pets. Although some accidents are inevitable, the lack of reliable and affordable resources to help prepare and anticipate these conditions have led to some of these preventable accidents. Additionally, there are even fewer forums for the hiking community to share updates, thoughts, and opinions to parks they’ve recently visited.

Solution

Create a comprehensive navigation app for the community that shares real-time updates to end users during their hikes, while keeping the integrity and feeling of a fitness app.

Research

To start, I did some research on the best navigation and hiking resources Here are some points I wanted to research:

  • How/what end users search for new places to visit
  • Identifying similar/familiar components to how others navigate
  • What are the motivating factors to working out
  • Identify pain points that are met with navigation systems

For this study I compared and contrasted the top navigation apps: Google Maps, Apple Maps, Waze, and Maps.Me.

Feature
Google Maps
Apple Maps
Waze
Maps.Me
Real-Time Map Updates
Trip Scheduling
Routes for different vehicles
Offline Functionality*
Music Compatibility
Web Version**
Location Sharing
Community App***
* Ability to display a route after Internet connectivity is lost
** A website version with similar functionality (i.e. routes)
*** End users have input on visual components of map and routes

Although our solution will be navigation-based, there are plenty of hiking apps available. I compared and contrasted these apps: GaiaGPS, AllTrails, Cairn, and HikingProject.

Features
GaiaGPS
AllTrails
Cairn
Hiking Project
Distance Tracking
Fitness Data
Community App***
Trail Sharing
Difficulty Rating
Route Planning
Web Version
Cost
Free, with Premium Version available
Free, with Pro Version available
Free, with Premium Version available
Free
* Ability to display a route after Internet connectivity is lost
** A website version with similar functionality (i.e. routes)
*** End users have input on visual components of map and routes

At first glance, the navigation apps offered free featured services, while the hiking apps offered very limited free features. Collectively, these apps offered insight to how useful flexibility can be for our solution. Most of these apps offered commute times for different modes of transportation, offline functionality, and sharing options. A community product that’s designed around peer-to-peer interactivity will be important to address the needs of the end users. 

For more analysis, I interviewed 7 hikers whose ages ranged from 20 to 54 to get their thoughts on the elements that are missing with the products they use. There were a few topics that stood out the most.

Safety

Only 2 out of the 7 interviewees felt like the hiking navigation apps help them feel safer. Most emphasized that the trails/maps they use are not updated on a frequent basis. Some offered solutions to this such as embedding news articles linked to the appropriate park, adding weather updates, and allowing end users to update maps.

“Hiking is a fun hobby of my dog and I, but we want it to be a safe one as well. I think there are resources to help prepare to be safe, but not enough to keep us safe. Physical maps help me best, but I would still like to know which trails are pet-friendly before I choose a park.”

Lack of Flexibility

During my prior research, I discovered that most hiking apps do not offer the ability to track an activity other than traditional hiking, unlike how a traditional navigation app can track different commuting methods. 5 out of the 7 users say that they would prefer to identify which parks are pet and biker-friendly before they start a trail to better prepare for their activity.

“I enjoy running a lot, so a platform that can keep me safe, while tracking my workout would be super convenient. I don’t really need all of the bells and whistles…a time and calorie tracker should do. I would like the convenience of tracking my workout without having to use multiple apps or devices for it.”

Social Interactivity

Each user that I interviewed liked the option to rate and review trails they’ve visited before. Additionally, 4 out of the 7 users would also like the option to share and connect with other users on a hiking app.

“I often like hiking with my friends during the weekends, so it would be a treat to be able to share directions with them while on a new trail.”

In summary, I discovered that the participants’ need to cultivate a community that helps organize and prepare hiking enthusiasts is important to the success of a new and inclusive solution. 

Define

I have created a persona that mainly defines the model user of our new solution.

Ultimately, this app should have these elements as its priority:

  • Safety
  • Feature Flexibility
  • Community Based

Ideation

In order to properly define the features for this app, I decided to do a chart to sort out specific features of the app to build on. This app should not only be well-rounded, but it should have a similar feel to other navigation apps for ease of use.

Least Effort, Big Impact

Mapping offline capabilities
Community map reviews and threads
Ratings/recommendations for trails
Searching capabilities for maps
Interactivity w/ music apps
Ease of access
Most Effort, Big Impact

Creating an Interactive Map Design
P2P navigation (map sharing)
Publishing frequent updates/reports on trails
Fitness tracking data (distance, speed, calories burned)
Web version of application
Least Effort, Little Impact

Hike Planning, Notifications
Badges, Points for Goals met
Guest user capabilities
Most Effort, Little Impact

Personalize ads (if necessary)
Map Display/Modes (satellite VS topographic map; dark mode)
Weather updates

After properly ranking and specifying our features, I created some task flows for our app.

To view the user flow, task flow, and map, click here.

I was then able to create my lo-fi wireframes.

Overline

Lo-fi Wireframe

To view the full lo-fi wireframe, click the button below.

After completing a usability test, I determined that there were parts of the interface that I could include to make this app feel more familiar to other popular navigation apps. These include: 

  • Allow music apps to be used during navigation
  • Allow users to rate and review hikes 
  • Include a difficulty ranking to each trail 

Branding

I wanted the UI Kit to represent a natural, earthy, and contemporary look. The name and logo ‘Tabei’ originates from the great Japanese mountaineer Junko Tabei, also known as the first woman to climb Mount Everest. The logo is in the shape of an ellipse as homage to the Japanese flag.

Original Photo

Photo by Jaan Kunnap

Logo

Colour Palette

Fonts

Raleway SemiBold, Size 24 

Raleway SemiBold, Size 20

Raleway, SemiBold, Size 14

PT Sans Caption, Normal, Size 16

Prototype

To view full hi-fi prototype, please click here.

Testing

I had 3 participants partake in the usability testing for my first iteration of the prototype. All 3 were able to understand the basis of the app while one user found the app to be ‘seamlessly designed’. Here are some recommendations/improvements I was given:

Result: I have included all of the detailed recommendations to the edited hi-fi prototype.

Conclusion

Upon reflection on this project, I did not anticipate the amount of roadblocks that I was going to face. These roadblocks included finding and using licensed photos for free use, tracing and editing maps with a trusted provider, and finding users to participate in this project (to name a few).

Creating a well-rounded project while ensuring the fundamental elements of the app were implemented was more difficult than expected. Ultimately, I trusted and relied on the purpose of this project: to create a familiar and robust app that highlights safety, community, and accessibility. All in all, I believe the goal of this project was sustained and executed with the research and resources afforded to me to complete this under the time constraints.