Visual & Interaction Designer
Hero.jpg

Routes Case Study

Routes Overview

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.

  1. Are they spending all their time “flashing” routes (completing on the first try)?
  2. Are they spending too much time in their comfort zone?
  3. 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?
  4. 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?

Route Mapping

This map view allows climbers to organize their climb history spatially, overlaid on a photo of the physical maps typically posted at gym entrances.

Route Setup

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.

Route Tracking

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.

Analytics

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.

Process

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.

Storyframes:

Hi and welcome to Projects.

We’re here to help you keep track of routes you’re projecting, flashing and sending.

Do you want to know how many routes you flashed last time? We can tell you that.

Want to know how many attempts it really took before you finally sent that one route? We got you.

Are you spending all day flashing routes? We can let you know that maybe you should take it up a notch or two.

Want to know where you’re at compared to last year? Ask us in a year and we can tell you that ;D.

Can’t remember if you finished that one v6 in the back-left corner of the gym? We’ve got all your climbs mapped to their location in the gym, so don’t even worry about walking over there to try and remember what it looked like.

We know rock climbing is something you do for you and you don’t need another social network. Think of us as your climbing log book, but like the encrypted, local only kind. We don’t data mine, require a sign up or send any data off your phone. Climbing is what you do for you and we get that.

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.

User Scenarios

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.

Routes Usage Scenario #1

She gets to the climbing gym early, she is always climbing before work when it’s quiet. In the evenings it’s too crowded and she doesn’t like to wait in line to get on a route. She also prefers to work out in the mornings as the way to start her day, that way she can just relax in the evenings.

When she walks into the gym, she keeps an eye open for where the new routes are. She spots the section that has just been reset about mid-way into the gym, but she has a few projects she’s been working on that she wants to finish before getting onto the new stuff.

She finds a locker, and deposits her backpack and sneakers but takes out her climbing shoes, a chalk bag and her phone, in airplane mode. No headphones, she doesn’t like the way they hang off her head when she’s climbing.

She walks over to the front area of the gym, which typically has the most beginning routes, puts down the chalk bag and her phone, and puts on her climbing shoes.

She climbs 3 v0’s in that section before she remembers that she was supposed to be tracking her climbs. She walks back to where her phone/chalk bag are and pulls up Projects to enter the 3 warm-up climbs. She always forgets first thing in the morning.

Next she climbs a v1, v2 and v3 in sequence, walking back to her phone between the v2 and v3 to enter the climbs. During her warm up period she’s flashing everything, and wants to keep moving quickly so she often groups climbs together and records the group altogether. It’s a little annoying to take the time to record climbs while she’s warming up and moving so quickly, but she knows she won’t remember later.

After she’s warmed up, she moves onto the v5 she’s been projecting for the last week. She has made many attempts, and has slowly worked through most of the problems, but she can’t get the last 2 moves yet. Today might be the day though, she knows it’s going to be super satisfying to finish it and to finally record a successful attempt in Routes.

Four attempts later she’s still getting stuck at the same spot, but she dutifully records the new failures and reviews her climbing stats for the route while she recovers between attempts. She is encouraged to be reminded that it took her a couple of days to make it past the halfway point on the route, even if she has been hovering in the “homestretch” section for the last two sessions.

Sighing, she notices the time, she only has time for one more attempt before she has to get ready for work. She locks the screen, puts down her phone, closes her eyes and takes a deep breath to clear her mind.

She gets on the route one last time, she tries not to think about the time and just think about the move at hand. Before she knows it she’s at the final problem, but this time her right foot is providing the balance she needs via toe-hook and the crimpy hold that kept throwing her off is comfortable. she reaches the top, easily this time, and just hangs there for a few seconds, stretching out and trying to internalize what she did differently that made such a difference. She drops to the mat, and rolls in the direction of her stuff. After she settles, she reaches for her phone and when Routes asks her how the finish was, she selects “Crushed It!”. (As opposed to “jump and pray”, “stretch”, “decent”)

Style Tiles

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.

tracking-flashes.gif