SPENSER GARDEN
OUTERLAND
A mapping and directional tool made specifically for the wilderness
Navigate any wilderness with one app, online or off the grid.
Trekking is a passion of mine, and Outerland is a personal project created out of observational needs on the trail. The product uses 3D terrain, directional, and place data to create the most true, up-to-date map available of the outdoors. Through the use of AR mapping, Outerland provides human-scale wayfinding in an unforgiving world.
PROBLEMS
Unfamiliar terrain is difficult to navigate, and the tools we have aren't helping.
I've hiked all over the world, and while I consider myself well-adept at orienteering myself, at some point I'll get lost. I'll also wildly misjudge distance and elevation. Why? Because the tools I have at my disposal are not uniform, nor are they human-scale. The problems outlined below are examples of systems that express data but do not adress a hiker's needs.
Backcountry wayfinding systems are not accurate, nor are they universal.
Grisons, Switzerland
Kings Canyon National Park, USA
Annapurna Circuit, Nepal
Maps aren't universal either. Nor are they a reliable representation of reality.
Sagarmatha National Park, Nepal
Scale: 1 : 75,000
Contour Interval: 50m
Language: English
Mont Blanc, France
Scale: 1 : 50,000
Contour Interval: 20m
Language: French
Sequoia National Park, USA
Scale: 1 : 125,000
Contour Interval: 200ft
Language: English
Elevation variance is the most important metric, and our current tools make it hard to visualize.
Annapurna Circuit Elevation Profile
SOLUTION
Hike smarter and safer with
a trusted, universal source.
The idea for Outerland was fostered by a need to solve the problems outlined above—problems that have occurred on every single backpacking trip I've been on. My solution was to create a tool where anywhere in Earth's wilderness, a universal map could be used to help a hiker to find their way. With the use of GPS and augmented reality, I could display distance, time, and elevation in a way a traditional map couldn't, with the hopes of helping hikers make better decisions on the trail.
USER EXPERIENCE
Center on the map and create experiences that optimize
for real-time orientation.
Two of my product principles going into the design of Outerland were that orientation is paramount, and to focus on what lies ahead. I determined that the best (and rather obvious) way to solve for this was to display the map at the center of the app, with a navigation structure that optimized for those principles. I treated the navigation as a way to reveal useful layers rather than a way to pivot to other sections (wireframe above).
The goals I had for the app were simple enough, so I decided to create an entire app user flow (shown below) before diving into specific journeys. In this way, I set the structure for an app where one could quickly find, discover, save, and load information within a tap or two. During this process I was conscious of the fact that screen time on the trail would be experienced in short bursts, so having the right information at one's fingertips was vital.
Map view modes
The topographic and AR map view modes provide the same function—to orient yourself in your environment. They are different views on the same map and therefore were designed with the same interface.
Create Routes
Route creation follows similar UX to Google Maps, with two appropriate differences. First, destination types are provided when searching for a location. Secondly, distance, time, and elevation data is provided in order to make more informed decision on the trail.
Access your route data
Once in the Route mode, a mini progress indicator with relevant data replaces the Create Route button in the navigation. Tapping on this indicator brings up a route data sheet with all information related to the route.
Know what lies ahead
One of my goals for the app was to provide hikers with better decision-making on the trail. Route Segments help hikers pace themselves by knowing the difficulty in their immediate future. Each route path is split up by difficulty, and the segment data can be viewed on its own.
Save offline map areas
An obvious need for the app was the ability to operate offline. Hikers are able to download map areas by either setting their own coordinates or by designated area (parks, forests) by search. These map areas can be toggled on/off in the Library. On the trail, an indicator will confirm you are operating inside the saved map area.
VISUAL DESIGN
Usability is the prerequisite.
Simplicity is the result.
I approached the UI design of Outerland through the lens of usability. How information is organized, displayed, and visualized is a direct result of designing for the user. More often than not, the right solutions were the simplest ones. This simplicity gives the app a very minimal presentation, and therefore one where information can be understood very quickly.
In order to design for growth, I created a style guide early in the process. With this design language in place, the app could expand while keeping a cohesive look-and-feel.
Route difficulty is visualized within the path itself.
One of Outerland's biggest differentiators is the visualization of difficulty in the route's path. The change in colors provides a better idea of difficulty than a traditional topo map. I chose bright colors and tested their legibility on both the Mapbox topo map and through the camera via AR.Â
Map interactions designed to work between view modes.
All map elements (including the navigation) were designed for both the topo and AR map modes. The example displayed here shows the solution for a non-descript search query. Rather than listing out the 3 campsites, I chose to highlight their pins and surface the closest option. This design keeps most of the camera visible in AR mode, where orientation is more important than POI details.
A map library that offers a sense of scale.
Rather than listing out the saved map areas in a table (a la Google Maps), I designed cards that showed the complete saved area. This offers visual context and a better sense of scale when determining which maps to toggle on/off. Tapping the options button enlarges the map area and lists the appropriate actions one can take.
More context at
a higher levelÂ
The Saved Routes section of the Library provides users the ability to catalog and plan their journeys. Route Collections (shown here) display routes on a page with a split map and list view. The list surfaces distance, time, elevation, and the elevation profile of the route. By exposing this metadata, users are able to digest trip information without having to load a specific route.
A custom icon set that is identifiable at multiple levels.
The map icons have to be legible in on different interfaces. They need to work on the topo map, AR view, and as options in search. Instead of scaling the same icons for all instances, I designed the set with large and small variants. The large set exists in search and map layers. They are stroke-weight, which levels out the visual hierarchy between them. The small map variants are color-coordinated and went through rigorous testing to make sure they were legible on both the topo map (shown below) and in AR.Â
A focused style guide guided by utility.
As stated above, I created a style guide early in the UI design process as a reference point for the rest of the app. Where situations required them, additions were made. But the overall intent was to stay simple and work with foundation I had already set. Shown here are the text styles palette, color palette, and basic UI element library.
PROJECT DETAILS
Client
Personal Project
Â
Creative Director
Spenser Garden
UX Design
Spenser Garden
Â
UI Design
Spenser Garden
Â
Branding & Copywriting
Spenser Garden
Next Project
