A screenshot of the final Topo app's Start Hiking screen in an iPhone. The iPhone is angled backwards and towards the right, and appears to be floating in space. The screen shows an overview of the user's day, including a map of the planned route, a button to start hiking, and an alert card showing a trail advisory from Kennedy Meadows.

Topo

Making thru-hiking easier to plan, safer, and more approachable for first-time trekkers

Coursework, 2019—Stay tuned for an update!

Outcomes

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

Role

Research, UX Strategy, UI, Icon Development

Tools

Photoshop, Illustrator, XD, InDesign

Values

Adventure and Exploration, Conservation and Sustainability

Take a (better, safer, smoother) hike

Thru-hiking involves a lot of moving parts. Even before you leave, there’s the planning phase—dealing with permits, scheduling 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 dirt. The goal in designing Topo was to 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 project was made up of a two pieces—the design of the app itself, 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 helped me decide to complete my own thru-hike once it’s safe to do so (stay tuned).

Choose your own adventure

One app, many (optional) tools

The biggest challenge in 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. I eventually settled designing it around a handful of specific tools; each can be used independently—so more experienced hikers can just use Topo for logging their daily miles, for example—or together for more guidance. That way, first-time trekkers can feel more confident in navigating the road ahead, and trekking pros aren’t tied down.

Tools shown in gray are optional—hikers can use them if they’d like, but Topo’s tracking works just as well without them.

Tracking

The only Topo feature that’s always on by default. It keeps track of your daily mileage and helps you follow a planned route, if you’re using one.

Backpack

Keep tabs on your equipment—what you packed, where you bought it, and where you swapped it in or out of your pack.

Trail Guide

Explore what’s ahead for several of the most popular thru-hikes in the United States with route information, packing lists, tips, and more.

Maps

Know where you’re at with an offline topographic map, or route from here to there along nearby trails with Topo’s Sunangle navigation.

Log

Send and receive updates on trail conditions or pass along words of encouragement with other hikers ahead of and behind you.

Camp

Looking to take a zero day? Explore nearby campsites, amenities, and cheap motels, or find other hikers to split the cost with for a night.

Resupply

Plan out your resupply stops before you hike, or remind yourself of what you’re getting when and where during your trek.

Food

For the data nerds among you, Topo also supports keeping track of what you eat each day, macros, calorie intake, and other diet metrics.

Water

Get one-tap access to information on the location and quality of nearby water sources, and see updates on water caches from nearby hikers.

Designing an app that fades away

Following the same line of thinking—keeping Topo's features available, but not distracting—I designed the rest of the on-trail app experience to be one that fades away. Start Topo’s tracking with one tap in the morning, then stow your phone 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.

Little graphics with a big job

A large part 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 gives you as much (or as little) help as you’d like.

Topo’s design leans into the feeling of being outside—from its color palette to the iconography—and intentionally shows you only 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.

Topos's Today, Start Hiking and Statistics screens displayed in three iPhones, lined up side-by-side

Keep tabs on your days and track of your miles

Topo’s automatic tracking records your distance and time—just tap it to start, then put your phone away. It’ll only nudge you if you get a little too far off route.

Know before you go with route previews and alerts

Before you start your each day, Topo gives you a one-page briefing with your planned mileage, route details, and updates on any trail problems you’ll be impacted by.

All your metrics, logged automatically

Topo automatically logs your distance, elevation, moving and stationary time, and calories, and can sync with Apple Health to register weight and body changes.

Topo's Trail Log screen displayed in an iPhone against a green background

Easily communicate with other trekkers, even without cell service

Just like an analog trail register, Topo’s Trail Log lets trekkers send and receive updates to other hikers in front of or behind them, or leave public location-based updates on closures, conditions, and more. Even better, it works without cell service thanks to Topo's Walkietalkie feature.

Topo's Tools screen displayed in an iPhone against a green background

Extra tools and information are just a tap away when needed

While Topo’s tracking is always on by default, everything else is up to you. Pick just which tools you feel you need and ignore the rest, or use Topo’s full toolset to go from planning to trekking to reliving your hike post-trail. And keep your favorites in reach with a customizable tab bar.

Redesigning a café with a focus on its values and strengthening its ties to artists and the community

Designing and illustrating a collaborative, family-sourced digital cookbook