Range Right

Description

Range Right is a trail guide app that focuses on connecting users with their natural surroundings through educational resources and community.

Project Challenges

1) Design a trail guide app that encourages safe engagement with flora and fauna

2) Create a UI that's easy for both familiar and unfamiliar users to navigate

3) Design a cohesive visual brand identity that aligns with app material

Timeline

October 2024

Role

UX/UI Designer
Branding
Product Designer

Responsibilities

Research, wireframing, persona creation, information architecture, low and high-fidelity prototyping, conducting usability studies, branding and visual design

Getting Started

A cornerstone of Range Right is connecting users with their natural surroundings in a mindful and meaningful way. When exploring and selecting a trail, related articles to wildlife, flora, and natural features pertaining to the set location are suggested to the user. Users can click on feature tags that appear on trail selection screens and in field notes to access information and resources relating to the tag. For example, "deer" are tagged as a feature at a local park, and the user can click on that tag to learn more about the deer in their area.

"What does this product aim to achieve?

"Who are the primary users?"

"What are the users' wants?"

"What don't our competitors have?"

"What are potential challenges moving forward?"

After conducting interviews, it became apparent our primary user group consisted of outdoor hobbyists who wanted to share their findings and experiences, as initially anticipated. Other user groups consisted of people looking to get more involved outdoors and those who wanted to preview trail conditions prior to starting their hike.

Competitor Research

When analyzing other trail guide apps, they all primarily focus on navigation and new trail discovery. Very little information, if any, is provided about the surrounding ecosystem and natural features. Range Right is unique in its educational and community aspects, allowing users to share specific sights and on-trail locations.

Information Architecture

I designed a basic user flow of the key features of the app. Users are encouraged to share their on-trail experiences through easy access to their Field Notes, a digital trail diary, and by having the option to upload trail sightings on multiple pages.

Wireframing and Refining

Starting to Iterate

After creating multiple paper wireframe variations, I began to digitize the designs and enforce the user flow. Once the low-fidelity wireframes were finalized, I conducted a usability test consisting of ten participants in order to better identify and address pain points. The findings were as follows:

Too Small

Users often tried to zoom in to see trail and sighting pictures. Many of the visuals were too small to catch users' attention, and sections such as "star sightings" were often ignored.

Limited Preferences

When landing on the app for the first time, users felt they had limited preference options and that their chosen preferences would not alter their app experience.

Distracting Design

The Field Notes notebook design was too ambitious and wound up hindering the users' ability to effectively navigate their notes. Most users avoided the Field Notes.

Addressing Challenges

Educational and Engaging Trail Experience

A cornerstone of Range Right is connecting users with their natural surroundings in a mindful and meaningful way. When exploring and selecting a trail, related articles to wildlife, flora, and natural features pertaining to the set location are suggested to the user. Users can click on feature tags that appear on trail selection screens and in field notes to access information and resources relating to the tag. For example, "deer" are tagged as a feature at a local park, and the user can click on that tag to learn more about the deer in their area.

Accessible and Easy to Navigate UI

After usability testing, the navigation bar was simplified to showcase the four most important features of Range Right: the user profile, trail selection, field notes, and the homepage. This allows users to switch between pages with ease. The Field Notes section was also simplified, with a search bar and advanced contents selection screen implemented. Users also have the ability to access their bookmarked trail notes much faster.

Cohesive Visual Identity

Naturalistic color choices combined with a sleek design created an accessible, yet inviting brand identity. Green is used to accent selected buttons and screens, while white and beige backgrounds prevent the app interfaces from feeling overwhelming. Dark brown directs the user to points of interest and engagement.

Style Guide

Range Right uses an earthy color palette and naturalistic imagery to relate to the wilderness it helps users appreciate and navigate, incorporating a rustic twist to an otherwise modern design. White and dark brown are used to create high contrast buttons that grab the user's eye, while beige adds a softer touch to the Field Notes screens.

Key Takeaways

This project was a great exercise in designing an educational and community-centered app that also provides a functional service. I learned how to balance multiple diverse product features without overwhelming or confusing the user, allowing for all app services to work cohesively. Moving forward, I would work to partner with local parks and conservation organizations to better improve educational insights and community conservation recommendations.

Thank you!

LinkedIn