← Back

Cataloging the World's Climbing Information

My Role

Sole designer working with the small team that runs theCrag (2018)

Skills Used

Research, User Stories, Information Architecture, Interaction Design, Mobile Design, Visual Design, Information Design, Data Visualization

Brief

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.


User Stories

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.

User Stories

Competitive Analysis

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.

Map states from a variety of apps Map Screens Search and filter examples from those apps Search Screens

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.

  1. Search or browse crags on a map
  2. Search or browse crags in a list
  3. View recent or favorite crags
  4. View personal data and ticked routes
Four primary sections of the app: map, crags, saved, you Wireframes

Information Design

Route Grades

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.

I updated the website layout to use my new grade design Grades

Crag Summaries

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:

Climbers can quickly scan and find crags that suit their needs Summaries

Interaction Design

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 spend a lot of time standing in front of the cliff trying to identify routes Routes

Ticking Routes

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.

The wireframe precipitated a lively discussion about the data Ascent Types
The evolution of the design following an oversimplified wireframe Tick a Route

Outcome

A dev ready prototype of the iOS app, and a refreshed website design with vastly improved navigation, information hierarchy, and visual design.

The shiny new website design and companion mobile app App and Website


← Back