Routes is a concept for a gym-centric climb tracking app, for the climb tracking nerd (like me) who really wants to know how many attempts it took them to finish a “project” (route), and also be exposed to visualizations of trends that can help them advance their skills.
- Are they spending all their time “flashing” routes (completing on the first try)?
- Are they spending too much time in their comfort zone?
- What areas of the gym are they neglecting? Should they be spending more time on the slab wall? or the under-hang of the arch?
- How many climbs do they actually attempt in a single session? Does that number expose the fact that they are spending more time chatting than they think?
This map view allows climbers to organize their climb history spatially, overlaid on a photo of the physical maps typically posted at gym entrances.
Routes are constantly changing in gyms, and so climbers will need to be able to quickly add new ones and setup common identifiers. Gyms typically use colored duct tape to label their routes, which provides easy separation of routes in the same space as well as a removable surface on which to write the route difficulty.
The signature interaction of the app is it’s “attempt tracking” interaction. This is going to be where climbers spend the most time, it is designed to a very fast interaction with snappy and concrete feedback that allows the climber to get back to the route.
The focus of the analytics view is to tell the climber where they're spending their time and how successful they are at various difficulty levels. If they are consistently finishing routes in the first try (flashing), then it's time for them to spend more time more difficult routes.
When the climber first starts a new session, they are assumed to be in “warm-up” mode, which means that they are expected to flash every climb. Once they record their first unsuccessful attempt then “warm-up” mode ends. Warm-up climbs are tracked differently so that they don’t distort a climbers statistics.
I started on paper, outlining the types of problems that I wanted to solve, and then with a writing exercise, writing story frames to help me establish to tone and primary goals of the project.
Sketches & Wireframes
Once I had defined the problem space and the user facing tone of the project I started sketching potential interactions and flows to address those problems.
I also wrote user scenarios based on the experiences and observed habits of friends that I climb with. Those scenarios were a helpful lens to help me focus on a different user points of view and use cases.
Before starting visual design of the screens I had laid out, I experimented in a much more condensed Style Tile format. I knew that I wanted the visual design to be inspired by the classic "The Endless Summer" poster by John Van Hamersveld, because it evoked the outdoors with friends and is built around an aesthetic that is clean, and modern but not overly used these days. Also bold, bright colors are strongly associated with climbing gyms because gyms use brightly colored duct tape to label routes on the wall.
Visual & Motion Design
Once I had settled on an overall style, I started visual and motion design by focusing on a few key interactions.
Iterations on the Map View
Where the user adds/removes routes from the currently active data set and also where they select the route they are currently “projecting” (working on).
Iterations on Attempt Tracking
The other signature interaction is attempt tracking, this needed to be fast & clear. Often when a climber has just finished a climb their fingers are very tired and fine motor dexterity isn't available for a few minutes, with that in mind, I focused on a design that featured large target areas and simple broad motions to enter the outcome of the attempt. In addition to static mockups I used Framer from pretty early on to start prototyping this interaction, you can view that prototype here.