Cataloging the World's Climbing Information
Sole designer working with the small team that runs theCrag (2018)
Research, User Stories, Information Architecture, Interaction Design, Mobile Design, Visual Design, Information Design, Data Visualization
theCrag is a popular website documenting nearly a million climbing routes covering the globe. I designed an iOS app to make this content more accessible to climbers while at the cliff. I incorporated design decisions into the website resulting in improved site structure, navigation, usability, and aesthetics.
The first step of this project was to narrow down the scope and define which stories would be most important for climbers on their phones. Three stories made the cut.
All three stories use a location for context, so my next step is to collect examples of mobile apps that use the common location-based mapping paradigm.
Navigation & Information Architecture
The next step is to determine the top-level structure of the app. Based on the user’s needs and similar apps I came up with four primary tabs.
- Search or browse crags on a map
- Search or browse crags in a list
- View recent or favorite crags
- View personal data and ticked routes
Route grades are at the core of every climbing experience. The existing design lacked detail and wasn’t very useful. My design shows the distribution of grades for a given crag at a glance.
The first user story requires the ability to pick suitable crags from a list. The three most important questions a climber needs to answer to determine if a crag meets their requirements are:
- How many routes are there that I could climb? (grade, type)
- How long will it take to get there? (driving + walking)
- Is it appropriate for the season/weather? (sunny/shady)
Route Lists & Topos
User stories two and three revolve around finding routes. A climber needs to match up a route name and grade with the physical location on the cliff. This is typically done using a combination of photos, and counting routes from an obvious landmark.
Climbers love checking boxes, but how a route is climbed is incredibly important. Sometimes, a simple wireframe can be misleading because it’s easy to gloss over the details. Designing this interface to handle the actual data proved to be a significant challenge.
- I needed to support around 30 ascent types
- Present the common ones by default and hide the obscure ones
- Accommodate newer climbers who don’t know the jargon
- Fit everything on one mobile screen
A dev ready prototype of the iOS app, and a refreshed website design with vastly improved navigation, information hierarchy, and visual design.