Topo

Stats and safety for thru-hikers.

Main screen of the Topo app in an iPhone X

Topo

Research, UX, UI Design, Icon Set Development  /  Coursework  /  2019

Project Goals

How can we make long-distance thru hiking easier to plan, safer, and more approachable for first-timers?

Project Outcomes

Topo guides hikers throughout their entire journey, from planning a trip to on-trail safety, navigation, and tracking.

Project Values

Adventure and Exploration, Conservation and Sustainability

About the project

Go take a hike

Thru-hiking involves a lot of moving parts. Even before you leave, there's the planning phase—dealing with permits, planning resupply, and sorting out equipment and maps—and the trail itself is certain to throw complications at you the moment you get your boots on the ground. The goal in designing Topo was to have it step in to fill some of those gaps (especially for first-timers) with tools to help plan your next hike, keep track of your equipment, and automatically log your progress each day on your trek.

The Topo project was made up of a couple parts—the design of the app itself, of course, as well as a custom set of graphics to go along with it. Even better, it gave me an excuse to pour through topographic maps for a while; not everyone's idea of a good time, to be sure, but it certainly helped me in deciding to complete my own thru-hike next year (stay tuned).

Wireframing and Refining

Designing an app that fades away

The biggest challenge with designing Topo was incorporating the tools it needed to do its job—help keep hikers safe and on-track—in a package that didn't force you to be tied to your phone the entire trek. What resulted is the Topo you see the beginnings of below: one that you start in the morning, then stow away in your pack or pocket the rest of the day. It'll do its thing (automatically tracking your progress) while you do yours, and the rest of its features are there should you need them.

A grayscale wireframe of Topo's Home screen displayed in an iPhone mockup, featuring an overview of the day's planned hiking route A grayscale wireframe of Topo's Start screen displayed in an iPhone mockup, featuring options to start hiking or add a rest, or zero, day. A grayscale wireframe of Topo's Trail Update screen displayed in an iPhone mockup, featuring an alert about a trail closure on the day's planned route.
Here when you need it, hidden when you don't

Start tracking before you head out, then put your phone away. Topo will let you know if something important comes up—otherwise, it'll stay out of your way.

Designing the icon set

Little graphics with a big job

One big component of creating Topo was designing an icon set of the key items and elements essential to thru-hikers (unfortunately, most existing icon sets don't have graphics for ultralight stoves). When planning the app, I distilled the icons needed down to the eight essential functions they would represent: the hiker's backpack, trail signage, food information, camping information and regulations, a topographic map, water supply information, a trail log, and resupply information.

While there were initially several styles on the table, I landed on the one that was the simplest and most closely met what users would expect from existing apps out there. All three styles are shown below, with the topmost being the style I eventually settled on.

Each icon set, shown in the three different styles I designed when planning the app: colored single line weight, NPS signage, and 3D geometric
Teeny icons that help your hike go smoother

Each icon set, shown in the three different styles I designed when planning the app: colored single line weight, NPS signage, and 3D geometric.

Final Experience

Ready to get you trail-ready.

Part of the allure of the backcountry is going it alone, but that doesn't mean you shouldn't have help when you need it: Topo makes sure you get back safely, thanks to updates about trail closures and issues from fellow hikers, and reminds you to take it easy or up the pace a little to keep you on track with your planned route. And with quick access to trail maps, permits, and information about water supplies, food, and resupply, Topo's there to give you as much (or as little) help as you'd like.

Topo’s final design elements lean heavily on the feeling of being outside—from its color palette to the iconography—and it’s designed intentionally to only show you what you need to know, when you need to know it. After all, you don’t take on a thru-hike to spend months with your nose buried in your cell phone.

Topo screens displayed in three iPhones, stacked on top of each other Topo's Start screen displayed in an iPhone Topo's Today screen displayed in an iPhone

Previous project

Next up