Like many engineering students at university, I got obsessed with bouldering at some point. I progressed pretty quickly on to using the training boards at my local gym to build up my power and strength, and downloaded all the apps related to them. Immediately, I was taken aback by how poorly developed and difficult it was to use them. They were complicated and ugly.
For the "User Interfaces and Interactions" module, we were tasked with ‘solving an everyday problem with IoT and sensors’. I jumped at the opportunity to fix all the problems I had encountered with the current training board apps, and began dreaming of futures where the training board itself offered feedback from in-built sensors to the user to improve their climbing experience.
'Design a user interface (UI) and user experience (UX) for a system that leverages IoT (Internet of Things) and sensors to solve a real-world problem by tracking relevant data and offering actionable insights.'
What are we working with?
One look at the current apps associated with climbing boards and we can find all sorts of grinding issues.
On top of this, these apps only allow one person to connect to the board at once. This gets complicated with large groups of people at the board. In most scenarios, the person connected to the board becomes a DJ for everyone else, being inundated with requests to search for climbs and change the one shown on the board. In these scenarios, I resort to handing my phone around to avoid the headache of being responsible.
Finally, these group sessions are a great opportunity to learn from other climbers and improve - but solo climbers are left with recording themselves to see how they could change their technique.
Further User Research
I was well aware of the troubles with the UI, and how Bluetooth connections stifled group sessions, but I needed to understand the final issue much deeper. Without guidance from others, how do solo climbers learn and reflect on their climbs? Is there an ideal approach? Once I knew this, the question of IoT integration and the relevant data to present to users would become much clearer.
Further User Research
I was well aware of the troubles with the UI, and how Bluetooth connections stifled group sessions, but I needed to understand the final issue much deeper. Without guidance from others, how do solo climbers learn and reflect on their climbs? Is there an ideal approach? Once I knew this, the question of IoT integration and the relevant data to present to users would become much clearer.
What would make performance data insights for climbers useful, and not just gimmicky?
I interviewed seven boulderers to dig deeper into this topic. Several interviewees voiced the same concerns.
When you climb on harder boulders, it can be a tiny change in your foot positioning that makes the difference between sending it or falling off.
When you climb on harder boulders, it can be a tiny change in your foot positioning that makes the difference between sending it or falling off.
I don't want to be told what to do. Part of the fun of climbing is the puzzle of solving it.
I can feasibly ignore other people's suggestions if it's clear it's not going to work for my body type
I don't want to be told what to do. Part of the fun of climbing is the puzzle of solving it.
I can feasibly ignore other peoples' suggestions if it’s clear it’s not going to work for my body type
I also took to Reddit to ask the wider climbing community about their approach to teaching climbing, and dug deep into YouTube videos where climbing technique was analysed.
Which formed some key insights:
Many analyse climbing as an "engineering dissection", focusing on forces and centre-of-mass on the wall. In groups, climbers shared tips through this technical lens.
Learning from videos is harder when the climber's physique differs significantly from your own
Many record their own attempts, but the camera does not always pick up on subtle differences in technique between attempts.
An Important Revelation
A pivotal insight came as I learned about the concept of 'guided discovery'. I had, at first, intended for the product to tell users exactly the change needed to complete the climb. For example, it might show that successful climbers put more weight on their left foot to make such-and-such a move.
Professional coaches rarely take this approach. Their goal is to give you the mental tools, the right set of questions, for you to figure out for yourself what to adjust. I realised the product can't simply offer solutions to climbers whenever they encounter difficulty.
An Important Revelation
A pivotal moment came as I learned about the concept of 'guided discovery'. I had, at first, intended for the product to tell users exactly the change needed to complete the climb. For example, it might show that successful climbers put more weight on their left foot to make such-and-such a move.
Professional coaches rarely take this approach. Their goal is to give you the mental tools, the right set of questions, for you to figure out for yourself what to adjust. I realised the product can't simply offer solutions to climbers whenever they encounter difficulty.
The App/IoT system should provide the tools for self-reflection and analysis, rather than simply prescribing solutions
Following a 'guided learning' approach, we support natural problem-solving by giving climbers better tools to review and compare attempts. Instead of instructing climbers to 'move their right foot further across', they figure this out themselves and the lesson sticks.
Figuring out what to build
With all this discovered, I could nail down some system requirements. This included physical necessities with the IoT system and must-haves for the app interface.
Physical Requirements:
Digital Requirements:
User Scenarios and Flows
As I now had a list of the key features to design, the next step was to break down how each feature works, and the discrete interactions that make up each user pathway. We can describe how users accomplish their goals within the app with User Scenarios and User Flows. I defined two potential User Scenarios to encapsulate using the main features of the app.
Multi-user connection to the board
Martin and Alexa, climbing partners with different skill levels, are at a climbing gym with a 'smart climbing board'. During a planned training session they expect to collaboratively select and attempt several different climbs each. They hope to easily share control of the board from their own phones while sticking to their individual training goals.
Climbing analysis (finding beta and recording attempts)
Eric, an intermediate climber tackling problems beyond his skill level, has fell off the same move on a challenging climb multiple times in a row. He uses the app to search for examples of experienced climbers completing the same route. He hopes to learn better technique and body positioning for the crux by watching the better climber.
After a few more unsuccessful attempts, he decides to record his next attempt and compare it to the expert beta. He hopes to identify specific technical flaws and correct these errors in his next attempt.
A quick look at the IoT
The key feature of the upgraded climbing board is the standardised camera system that would come installed with the board, positioned a distance from the board such that climbers should avoid falling on it. Other cameras positioned at the corner of the board could provide a better view of how close the climber is to the wall.
The force output on holds or distribution of the climbers mass could be collected from force plates behind the board, connected to each board. Video recording for each attempt can be tied automatically to whether a force is registered on the starting holds, ending just after the climber falls off.
Climbing boards aren't cheap, though! Adding force plates to a board which already costs £8,500 would make it a luxury. An alternative approach is to use computer vision to analyse climbing movement. Looking online, one can find several example projects from engineers trying to analyse body positioning with AI algorithms. BoulderVision by Daniel Reiff pictured below
"Paper" prototyping
With the physical aspects of the IoT system well defined, I could begin on prototyping the associated app interface.
I used a digital paper prototyping tool on Figma for the early "lo-fi" iterations of the design. The initial start-up cost was higher, given the time it took me to get used to the template and plugin, but it allowed for me to test the UI with prototyping flows later down the line. It also meant the step from prototype to final design became a matter of adding aesthetics.
I did not entirely skip paper-and-pen. I filled my notebook with quick sketches and notes on page designs throughout this project, it was just a little chaotic!
Group Session Queue
User profile is displayed for whoever selected which climb. The present climb on the board is displayed at the top of the list.
Group Session Queue
User profile is displayed for whoever selected which climb. The present climb on the board is displayed at the top of the list.
Searching for Community Videos
Early iterations for the page for viewing beta videos created by the public. Videos auto-play when scrolled into view, offering a preview. The climbers profile, including physique stats and max grade, are presented alongside the video.
The original, accordion menu was replaced in favour of toggle filters to remove unnecessary steps.
Searching for Community Videos
Early iterations for the page for viewing beta videos created by the public. Videos auto-play when scrolled into view, offering a preview. The climbers profile, including physique stats and max grade, are presented alongside the video.
The original, accordion menu was replaced in favour of toggle filters to remove unnecessary steps.
The Main Page
Early iterations of the home page. Users are offered to add this climb as their own to the queue, and prompted to search for community beta or record their own attempts.
The first iteration is way too crowded with buttons!
The Main Page
Early iterations of the home page. Users are offered to add this climb as their own to the queue, and prompted to search for community beta or record their own attempts.
The first iteration is way too crowded with buttons!
Comparing Attempts
Enabling users to easily compare attempts became a challenge in itself.
I first dismissed the idea of using overlays, thinking it to be too visually cluttered, and settled for a carousel approach to swipe between videos.
Comparing Attempts
Enabling users to easily compare attempts became a challenge in itself.
I first dismissed the idea of using overlays, thinking it to be too visually cluttered, and settled for a carousel approach to swipe between videos.
Pinning Attempts
From interviews with climbers, they stressed that their best attempt at a climb may not be their most recent.
Users wanted to add any number of attempts, and flag one as their best so far. This would move it to the earliest position in the carousel.
Pinning Attempts
From interviews with climbers, they stressed that their best attempt at a climb may not be their most recent.
Users wanted to add any number of attempts, and flag one as their best so far. This would move it to the earliest position in the carousel.
Video Timeline
With computer vision, the camera could mark and identify when certain moves occur in the video. I spent a while thinking how the timeline would present this information clearly. It also needed to be easily operated with chalky hands.
Video Timeline
With computer vision, the camera could mark and identify when certain moves occur in the video. I spent a while thinking how the timeline would present this information clearly. It also needed to be easily operated with chalky hands.
Taking it to users
With all these pages built and the prototyping flow connected, it was ready to be put in the hands of the users. I recruited three climbers and one non-climber for a usability study.
I asked them to complete specific tasks, such as the one below, and observed their behaviour throughout whilst they voiced aloud their thinking.
"Find the strongest climber from the community videos and compare their own video to your attempt"
The following observations emerged as patterns across all the interviews
Confusion in navigating between videos. Users didn’t recognise they had to swipe between pages to see different attempts. The carousel feature was not clear.
Confusion in navigating between videos. Users didn’t recognise they had to swipe between pages to see different attempts.
Vague terminology and labelling. Most users struggled to find their way back to the climb queue because it was called 'session list'.
The group queue feature being reached by a button was frustrating for Asha (a frequent board climber) who felt she would always want to be able to see what climbs were in rotation from the home page.
The group queue feature being reached by a button was frustrating for the experienced climber, who felt she would always want to be able to see what climbs were in rotation from the home page.
The timeline was still confusing. The meaning of the markers above and below the line was not understood.
The timeline was still confusing. The difference between markers above and below the line was not clear.
I iterated on the lo-fi prototypes once more. Changes included making one's position in the carousel clearer using a bold banner at the top and amending the group session to be fixed to the home screen, instead of behind a vaguely worded button.
I also returned to the idea of using an overlay to compare attempts, experimenting until I found an approach which wasn’t visually overwhelming. In the final approach I settled on, the reference climb plays normally underneath, while the comparison video displays as a minimalist wireframe overlay.
This approach strips away visual noise to highlight the essential information - body positioning and movement - helping for clear, instant comparison between techniques. Timeline scrubbers allow users to synchronise and navigate to key moments in both videos simultaneously.
Taking it up a notch
I was pretty satisfied with these upgrades to the basic layout. At this point, noticeable improvements would come from working on the details.
It was now time to enter the the critical (but dangerous) territory of typography and colour choices, where many a designer has lost days (or weeks) in pursuit of the perfect shade of blue.
I began exploring visual directions by collecting references, research, and inspiration for the brand look and feel. I felt competitor apps lacked energy in their designs, so I wanted the visual language to evoke the feeling of performance and power.
I tinkered around with colour palettes, type pairings and different layouts for the main screens. The combination and contrast of vibrant green and shadow black seemed to really click. The green would need to be used sparsely, given how vibrant it is.
Headings and body are set in STK Miso, following predefined User Interface Typography guidelines to set each text style at a legible font size. The grade for each climb is set with NaN Metrify Wide - a heavyweight, Neo-Grotesk font with a little more energy and punch.
Headings and body are set in STK Miso, following predefined User Interface Typography guidelines to set each text style at a legible font size. The grade for each climb is set with NaN Metrify Wide - a heavyweight, Neo-Grotesk font with a little more energy and punch.
The Finished Product
This is the essential features of the app bundled into one primary flow. Users can join group climbing sessions, find beta from other users on the app, and use the analysis tools to improve their climbing. Take a look at the full flow below.
The Finished Product
This is the essential features of the app bundled into one primary flow. Users can join group climbing sessions, find beta from other users on the app, and use the analysis tools to improve their climbing. Take a look at the full flow below.
Let's go over some key details from the app.
Let's go over some key details from the app.
In Conclusion
Design never finishes, unless, of course, you have a deadline. Eventually I needed to stop twiddling with the prototype flow and write an accompanying report before handing it in.
I would've liked to have tested with the original interviewees, asking them to complete the same tasks and seeing how much easier it was, or if any new issues arose. In an industry setting, I'd be running many more rounds of testing with the prototypes before ever releasing it to the public.
I also felt like the overlay mode and insights needed improving for clearer data visualisation, but had no simple way of testing with dynamic videos and features. It was still a fascinating problem! There were many other aspects I wanted to nail down; questions left unanswered; but overall I was fairly satisfied with how it looked. As a climbing fanatic myself, I felt it solved a lot of the problems I had encountered with training boards, and it does so with style.
In Conclusion
Design never finishes, unless, of course, you have a deadline. Eventually I needed to stop twiddling with the prototype flow and write an accompanying report before handing it in.
I would've liked to have tested with the original interviewees, asking them to complete the same tasks and seeing how much easier it was, or if any new issues arose. In an industry setting, I'd be running many more rounds of testing with the prototypes before ever releasing it to the public.
I also felt like the overlay mode and insights needed improving for clearer data visualisation, but had no simple way of testing with dynamic videos and features. It was still a fascinating problem! There were many other aspects I wanted to nail down; questions left unanswered; but overall I was fairly satisfied with how it looked. As a climbing fanatic myself, I felt it solved a lot of the problems I had encountered with training boards, and it does so with style.
In Conclusion
Design never finishes, unless, of course, you have a deadline. Eventually I needed to stop twiddling with the prototype flow and write an accompanying report before handing it in.
I would've liked to have tested with the original interviewees, asking them to complete the same tasks and seeing how much easier it was, or if any new issues arose. In an industry setting, I'd be running many more rounds of testing with the prototypes before ever releasing it to the public.
I also felt like the overlay mode and insights needed improving for clearer data visualisation, but had no simple way of testing with dynamic videos and features. It was still a fascinating problem! There were many other aspects I wanted to nail down; questions left unanswered; but overall I was fairly satisfied with how it looked. As a climbing fanatic myself, I felt it solved a lot of the problems I had encountered with training boards, and it does so with style.
Group Session Queue
User profile is displayed for whoever selected which climb. The present climb on the board is displayed at the top of the list.
Searching for Community Videos
Early iterations for the page for viewing beta videos created by the public. Videos auto-play when scrolled into view, offering a preview. The climbers profile, including physique stats and max grade, are presented alongside the video.
The original, accordion menu was replaced in favour of toggle filters to remove unnecessary steps.
The Main Page
Early iterations of the home page. Users are offered to add this climb as their own to the queue, and prompted to search for community beta or record their own attempts.
The first iteration is way too crowded with buttons!
Comparing Attempts
Enabling users to easily compare attempts became a challenge in itself.
I first dismissed the idea of using overlays, thinking it to be too visually cluttered, and settled for a carousel approach to swipe between videos.
Pinning Attempts
From interviews with climbers, they stressed that their best attempt at a climb may not be their most recent.
Users wanted to add any number of attempts, and flag one as their best so far. This would move it to the earliest position in the carousel.
Video Timeline
With computer vision, the camera could mark and identify when certain moves occur in the video. I spent a while thinking how the timeline would present this information clearly. It also needed to be easily operated with chalky hands.
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
"Outside of a dog, a book is a man's best friend. Inside of a dog, it's too dark to read" - Groucho Mark....."Is the problem that we can't see, or is it that the problem is beautiful to me?" - D.C Berman......"You cannot understand good design if you do not understand people; design is made for people." - Dieter Rams......
