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. Topo steps 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. 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.

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). 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. 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 Each icon set, shown in the three different styles I designed when planning the app: colored single line weight, NPS signage, and 3D geometric