Hiking Project Case Study

Project Overview

Hiking Project app is an extensive collection of trails in the U.S. and around the world. This project centered on adding a filtering feature to the app to allow users a way to see only the trails that met their individual hiking needs. The goal was to come up with appropriate design solutions while working with the constraints of an existing user interface.

Roles

UX Research

UX Design

Tools

Maze, Useberry, Google Forms

Figma

Project Duration

April- May 2022

3 Weeks

The Challenge

Problem Overview

Hiking can be dangerous when users are not fully informed about trail conditions and challenges before setting out.

Informed trail selection is important for both enjoyment and safety while outdoors
Exploring new areas can be daunting for hikers who prefer specific types of trail experiences

Design Challenge

Hiking Project users would benefit from being able to filter the types of trails they see. How do we seamlessly integrate a new filtering feature into Hiking Project app while working with the design of the existing user interface?

Goals

Research

Competitive Analysis

Hiking Project is a hiking app with a mapping feature, and many competitors in the field have similar content and functions.

Most competitors require a paid yearly subscription to access features such as trail map downloads and offline access
Many of these apps rely on user input for the creation of in-app content such as ratings, photos, or GPS mapping
Some competitors have various filtering options, some only have a search feature

Hiking Project: Competitive Analysis

User Experience Survey

An anonymous UX Survey was completed by 30 respondents and conducted using Google Forms.

Respondents qualified by answered YES to both screening questions.

Do you regularly use hiking trails?
Do you use apps or websites to plan hikes or research trails?

User Motivations

These are the top factors that influence hikers to try a new trail.

User Pain Points

These are the top factors that influence hikers to avoid a particular trail.

See full UX Research Summary here

Conclusions

How users decide which trails to hike and which trails to avoid will allow us to prioritize specific trail features in the Hiking Project trail sorting feature. Unexpected challenges encountered by users give us further insight into which filter options should be prioritized to help users make safer decisions when planning their hikes.

Priority Filters to Include

These filters will both address user frustrations and meet user needs. Users will be able to include or exclude parameters.

Persona

Information Architecture

Sitemap

Hiking Project has details for over 70,000 trails, sorted by area. The existing user interface encourages users to scroll along an interactive map to find their desired location, then zoom in further to see trails in that area on the map. Users can also type in an area into the search field, then zoom into the map to see a more specific list.

While these functions are useful for those familiar with the area they’d like to hike in, users who want to see only specific trail
categories will be able to do so with the addition of the filtering feature.

The filtering feature will be integrated into the UI to be accessible from the home screen, the Top Hikes list in each area, and from the user’s Downloaded Areas.

Task Flow: Filtering Trails

This task flow takes a user through the task of filtering trails in their hike area by difficulty. Hiking Project uses a rating scale with six levels of difficulty, and during this flow the user can include or exclude any of those six parameters.

The task flows allows us to visualize where the filtering feature will integrate into the existing UI of Hiking Project, and to confirm which additional screens will need to be designed for this new feature.

Implementing a New Feature Within Existing UI Constraints

Working within the existing user interface of Hiking Project meant spending considerable time learning the functions and features that already exist in the app. Since we cannot change the existing features, the new feature will have to float on top of Hiking Project’s current functionality.

This aspect of the project led to some frustration, because portions of the app functionality and existing design had room for improvement. It was important to re-orient the focus onto how the new feature could improve the app’s functionality without
having the option to improve the existing design.

The existing UI and limitations on types of available app content also meant that some of the priority filters we discovered in the research phase can not actually be included at this time.

Overcrowding

Trails that are too popular can easily become overcrowded, and many users want to avoid these. However, Hiking Project does not have a way to indicate how popular or busy a trail is. There is a 5-star rating scale compiled by input from other users, however this seems to indicate trail quality rather than popularity.

Distance From Home

Hiking Project has interactive map functionality, so users can scroll around on the map in the area near them to see trails. Driving directions to each trailhead can only be accessed from the individual trail details page, but this opens up Google Maps app. Thus, filtering group of trails by driving distance is not possible at this time.

Trail Safety

Hiking Project allows users to input trail “Conditions” based on their recent experience at these locations. Because this relies on user input for updated content, it is impossible to know how recently conditions have been updated. Weather events, for example, can create unexpected water crossings or downed trees. While we can include the “Conditions” filter, users must use a combination of available filters and their own experience and discernment to gauge trail safety.

Priority Filters with Existing App Constraints

Wireframes

Sketches

My main goals with sketching were to:

Visualize where the new Filter icon or button would integrate into the existing homescreen (the map)

Explore how the four filters would fit onto the screen when a list view of trails was shown

Visualize how the new filters themselves would look and function

Explore how the parameters for each filter would be set by the user

Understand the existing user interface and the spacial constraints thereof

Sketching allowed me to work through different options for each of the design challenges above. Peer and mentor feedback directed me towards the first version of my design solutions for each.

High Fidelity Interface Designs

Adding the Filter Feature to Existing Screens

The left side shows an example of the original UI, the right side shows the addition of the new filter feature.

Original Design

Added Filter Feature

Original Design

Added Filter Feature

New Filter Overlay Feature

The designs below show the addition of filter overlays over the existing UI of Hiking Project. These newly designed overlays allow the user to set filter parameters.

All Filters Overlay

All Filters Overlay, Filled In

Single Filter Overlay: Difficulty

Single Filter Overlay: Length

Single Filter Overlay: Ascent

Single Filter Overlay: Conditions

Prototype

Usability Testing

Overview

Unmoderated Usability testing was conducted using the existing Figma prototype on the Useberry platform. Testers were assigned to complete four tasks involving the new filtering features.

Limitations

The free version of the Useberry platform only allowed for 10 testers, so the sample size for the testing was smaller than ideal. Nevertheless, we found enough patterns to confirm the success of some features and the need for iterations in others.

Usability Testing Welcome Screen

Results Summary

Successful Task Completion

Unsuccessful Task Completion

The heatmap and 84% misclick rate reveals user confusion about the meaning of the icon chosen to represent the filters, as well as the location of the filter function on the homescreen.

Iteration

High Priority Changes

Replacing the filter icon with a ‘Filter Hikes’ CTA button. Moving filter button location next to Top Hikes button at the bottom of the screen, where it is more visible, easily accessible, and easy to reach.

Original Design with Filter Icon

Iteration with CTA Filter Button

Conclusion

Reflection

This project was a great opportunity to practice design within the constraints of an existing project. Much can be discovered and improved upon without changing anything about the original user interface or user flows. It is somewhat liberating to be able to focus work on a particular design challenge without getting bogged down in the details of the app as a whole.

Working so closely with Hiking Project app for several weeks allowed me to become familiar with the workings of the app. I was able to find a design solution to adding a filtering feature that both meets the needs of users and maintains design pattern consistency within the Hiking Project user experience.

Next Steps

Next steps for this project would be to test the iterations of the filter function with a larger testing group, consider how to make quantitative filter parameters more easy to select and specify, and consider adding other filters that would address
the remaining user pain points discovered during the researach phase.