Tension Climbing

Tension Climbing produces an app-driven, illuminating climbing wall called Tension Board. It is used to train athletes such as Olympian, Kyra Condie. Climbers use the wall and app to create, review, and train on routes from anywhere in the world, giving them familiarity and consistency. Being an avid climber myself, it was an inspiring project to improve the international and diverse climbing community as a UX consultant. I researched competitors, interviewed users, and worked with software developers to help implement new performance tracking features for pro-athletes and casual climbers. I am grateful that I gained experience in creating a physical relation between software and hardware from this project because I usually exclusively

 

I was a UX consultant for the refresh of their iOS app. I worked with the owner, stakeholders, and developers to envision the next step of their app. I also created some mockups for them as seen below.

 
 
 

Skillscape

A new feature that I enjoyed working on the most was Skillscape. It involves a complex "tree" called Skillscape that is comprised of nodes. If you're familiar with video games, think of it as a skill tree.

How Skillscape works:

  • Each node represents a skill that a user can acquire. The more the user progresses in skill/strength, the more nodes they will acquire.

  • A skill is connected to another skill by a line. It shows possible paths of progress to a new skill.

  • A user can tap on a skill to reveal more details about climbs they can do to acquire it.

  • Skillscape will only be accessible once a user has logged at least 10 climbs. This is because data is needed to calculate the skills acquired based on the difficulty of the climbs completed.

As you can see, it's extremely dense. It's so tightly packed that it's impossible to see the nodes and the paths connecting them. It's like having a map that's so full of information that you can't interpret anything.

The experience is worse because it's on a small mobile screen, although it's not ideal for a large desktop screen either. I was afraid this would either scare users away or be a cause of frustration.

Skillscape

Skillscape

Exploring Solutions

I tried to find ways to simplify the tree. I started with the four main sections:

  • Novice

  • Intermediate

  • Advanced

  • Elite

Skillscape Groups.jpg

I envisioned a UI/UX approach inspired by the functionality of Google Maps. Imagine searching for "Seattle" and being presented with a general overview of the city. From this initial view, users would have the ability to zoom in, gradually revealing more specific details such as main street names and points of interest. Further zooming would unveil even finer details like smaller street names, cafes, and even footpaths. This hierarchical zooming concept would provide users with a seamless and intuitive experience, allowing them to explore the content at various levels of granularity.

So I planned to show the groups of Novice, Intermediate, Advanced, and Elite. Once a user zooms in, they will start to see major cluster nodes and if they zoom in more, they can see all the nodes and paths. This minimizes clutter and only shows information that is relevant to the user.

Example zoom

Example zoom

Regrettably, finding a viable solution proved to be a challenge. The tree structure was initially constructed using R, a programming language, and then imported into the app. As R generated the tree as a vector, it lacked the capability to generate different versions of the tree based on the zoom level. Additionally, the extensive amount of data and complex coding involved in generating the tree within R made it impractical to replicate the process in another programming language or design program.

Given these constraints, I shifted my focus towards exploring methods to reduce the amount of information presented to the user without compromising the overall user experience.


I dedicated efforts to find effective ways of displaying only the nodes relevant to users' acquired skills and their corresponding progression paths. It would be counterproductive to present novice climbers with the most advanced skills that require months or years of training, specific core, shoulder, arm, and finger strength to acquire.

Similarly, advanced or elite users would not benefit from seeing basic skills they have already mastered. We explored the possibility of dynamically showing or hiding nodes based on climbers' skill levels, without the need for rendering new images. Unfortunately, technical constraints prevented us from implementing this feature at the time.

Skillscape showing user relevant info only

Skillscape showing user relevant info only

Conclusion

In the end, we had to address budget and technological constraints, leading us to simply reduce the number of nodes by approximately 70. Despite this limitation, our developers successfully maintained the integrity of the data and calculations, ensuring accurate representation of a user's skill level.

Working closely with the developers, I thoroughly enjoyed exploring various solutions to overcome the technical limitations. Although I don't possess a software development background, I acquired valuable insights into app development and coding through osmosis. I'm pleased that I could contribute my expertise in UX to envision features like Skillscape.

Given more time, I would have loved to implement a "Google Maps" style functionality, allowing users to pinch and zoom to reveal specific details relevant to them.

The app launched on 21 June 2021 and is available on the Apple App Store and Google Play Store.