Belayer App
Android Mobile Application Design

Project Summary

Belayer is an android application that helps rock climbers connect with new partners so that they can climb together. The vast majority of rock climbing requires a climber to have a partner, and it can be hard for people to synchronize their schedules with their friends or other climbing partners. Belayer addresses this pain by allowing users to connect with other climbers of similar skill levels and availabilities as well as attend climbing events where they can meet other climbers. My role was to conduct user research, ideate the product’s IA and interaction design patterns, and design and prototype the product’s UI and brand identity.

THE PROBLEM

Finding new climbing partners is a major challenge in the climbing community. Rock climbing can be a life and death sport, so promoting trust between users while also designing the app to work specifically for climbers’ needs is a huge challenge. Currently, there are no products that solve this problem in its complexity.

THE SOLUTION

By conducting user research and numerous usability tests, Belayer solves this problem by providing the information that climbers need in a framework that promotes trust and community. The app is centered around enabling climbers to connect while also providing a references system that promotes trust between users. Additionally, the app provides an in-app messaging system which allows climbers to communicate while still protecting their identities.

my-work-process

Research

How to climbers find partners? What are problems that rock climbers face when finding a new partner? What do they look for in potential partners that engender trust?

I began by conducting a competitive analysis of the various mediums that are currently available for climbers to use to find new partners. It quickly became clear that no single product allowed an easy means for climbers to connect with each other in a way that also incorporated a method that engendered trust or allowed users to sort climbers by activity or skill level.

In order to gain a deeper level of understanding of the attitudes and problems that climbers experience, I conducted guerrilla interviews. Using Starbucks gift cards as an incentive at a local gym, I conducted 6 interviews with climbers of a wide range of experience and skill level.

research-img

These interviews brought to light a number of very clear themes and issues that climbers experience:

  • Finding a new climbing partner was a major struggle for most people, which often led to climbers climbing less or engaging in other activities because they felt discouraged by not having a way to find a partner.
  • Experience, safety, and similar level of difficulty where the key attributes climbers looked for in a new partner.
  • Engaging in the same type of climbs was a critical piece of information climbers wanted to know about a potential partner.
  • Gender, age, and gear also influenced a climber’s willingness to climb with potential partners.
  • Struggling to trust someone they met online was mentioned by numerous climbers.
  • Climbing events are a powerful tool for climbers to make new friends and find out who they would trust to belay them.
  • Proximity and having the same climbing gym were important factors for climbers in determining their scope of where to search for new partners

These insights, combined with the information gleaned by conducting competitive research, allowed me to frame my design process around the needs of climbers trying to overcome this daunting problem.

Empathize & Define

How do I synthesize my research to better understand the needs, goals, and fears of climbers looking for a partner? How can I understand what climbers would be hiring my product to do for them?

Now that I had a base of research, I wanted to empathize with my users in order to understand their needs and problems on a deeper level. I began by creating a persona based off of my research data, which showed that both beginner and advanced rock climbers had very similar problems and sought similar attributes in potential partners.

popup image
popup image

I then created a journey map, which helped me understand that Jamie is seeking different information about other climbers during different parts of his climbing experience.

Combining my research and this analysis, I created a series of jobs-to-be-done and job stories. This helped me grasp both the high-level “self-actualization” motivations users have when trying to find a partner as well as the detailed feature-based jobs that they would hire Belayer to do in order to accomplish their goals.

belayer workspace

Define

How might we…?

  • How might we connect climbers of similar experience and skill levels?
  • How might we connect climbers who want to do the same types of climbing activities?
  • How might we promote trust between new climbing partners?
  • How might we show users who around them is looking for a partner?
  • How might we allow users to build a community that they can contact when they want to go climbing?

With the problem space clarified, I created a product roadmap in order to prioritize the most important features to include in my MVP. This product roadmap became my guiding beacon as I moved forward.

IA & Interaction Design

How do I create and architecture and design flows that make it easy for climbers to find each other, connect, and build trust? How do I promote community while also ensuring safety?

Before creating wireframes, I wanted to establish a clear and coherent information architecture that would clarify my user-flows and interactions. Using a low-fi application map, I quickly iterated on the information architecture and flows so that Belayer addressed my HMW questions and met the needs of my target users.

belayer workflow

After creating an application map, I began sketching and rapidly iterating the various UI screens with pen and paper.

belayer sketches

Once I had filled up numerous pages with sketches, I converted the best ideas into mid-fidelity wireframes in Sketch. I decided to design Belayer for Android, so I used Google’s Material Guidelines as a basis for my wireframes. This proved to be a great opportunity for me to grow as a designer. I had never used Material Design before, so it forced be to address my specific HMW statements in the language of a pre-defined design system. I conducted preference testing on some of my iterations before building a prototype in Marvel.

belayer wireframes

I used this mid-fidelity prototype to conduct 4 usability tests with climbers of varying levels of experience. Tests were conducted in person or via Google Hangouts and all tests were recorded. The results were put together in an affinity map in order to understand successes, patterns, comments, insights, and problem points that required further iteration.

These tests showed the users often were confused by how to interact with the map section of the “Discover” screen. They also often expressed a sense of surprise or being jarred when coming off of the onboarding flow.I re-iterated on both my application map and my Discover Ui in order to solve these issues.

UI & Visual Design

How can I create a unique brand that appeals to rock climbers and promotes trust?

In keeping with my decision to keep my design material-inspired, I used the material color palette and guidelines as a jumping-off point for my visual design language. For the logomark, I drew inspiration from both mountains and a piece of climbing gear called an ATC. ATCs are critical in the process of belaying a climber, so it was the perfect inspiration for Belayer’s brand identity.

belayer styleguide

Prototyping & Iteration

How can I test my design decisions? What worked and what didn’t work? How can I incorporate user feedback to improve my designs?

After converting all of my wireframes to high-fidelity mock-ups, I conducted 5 usability tests. I recruiter my participants through my own personal network and through my local climbing gym. Participants were a mix of beginner and experienced rock climbers, and all of my tests were conducted remotely using Google Hangouts. Following my tests, I used an affinity map to to understand both the successes and remaining issues that either persisted or arose in my design. Some users had issues discovering the filter option and some were still confused by the Discover map.

With this information, I iterated my design based on the user feedback I received. I also iterated my visual design so that, while it remained deeply material inspired, the UI design would much more prominently display the product’s unique voice and branding. I used UsabilityHub.com and video-conference critiques in order to conduct preference tests on numerous iterations of my UI screens to see which version conveyed the strongest brand message to users.

Examples of Iteration

belayer iterations

Examples of iterations based on my usability test findings:

  1. I updated UI w/ distinct visual identity and branding
  2. I changed the filter icon due to a lack of discoverability in usability testing.
  3. I changed the user profile indicators in order to ensure a user’s privacy. Users now have more anonymity and their indicators only show the general area they are in, not a specific address.
  4. I updated the way a selected profile is displayed in order to be more distinctive and create a visual difference between it and a gym icon while also staying in line with the product’s visual identity.
  5. I differentiated gym and user icons due to user confusion and a lack of discoverability.
  6. I re-ordered the visual hierarchy in order to clarify the most important information a user was looking for.

Final Visual Design

belayer visual design
activity-skill-filter-profile

Research Finding

Experience level, types of climbing, and availability were critical factor in trying to find a climbing partner.

HMW Questions

How might we connect climbers of similar experience and skill levels?

How might we connect climbers who want to do the same types of climbing activities?

Solution

By allowing climbers to set up what type of activities they want to do and at what difficulty level, users can quickly and easily see if other users have the same interests. Also, by allowing users to filter climbers by activity, difficulty level, and other criteria, it allows climbers to quickly find partners with the same interests and skill levels as themselves.

Research Finding

Climbers struggled to trust people they meet online.

HMW Questions

How might we promote trust between new climbing partners?

Solution

By allowing climbers to leave references on other’s climbers profiles, users will be able to see if they can trust a new partner before they meet up in real life.

belayer
Belayer

Research Finding

Climbing events act as powerful ways for climbers to meet each other and build trust.

HMW Questions

How might we allow users to build a community that they can contact when they want to go climbing?

Solution

Users can browse and attend events, which can be filtered by the user’s priorities. Users can also host events and clearly see which events they are attending.

Research Finding

Proximity and having the same climbing gym were important factors for climbers in determining their scope of where to search for new partners

HMW Questions

How might we show users who around them is looking for a partner?

Solution

Users can discover potential new partners by either exploring a map or by using a list of other nearby climbers. Users can also see local gyms which will display all of the active climbers currently there.

belayer

User Reviews

“This is the kind of app that I would actually use because it focuses on getting the job done.”

“I love this app. I can’t wait to get my hands on it.”

“I also love the little things that feel kind of intuitive to a climbers needs, like having the slider for setting your climbing grades be double sided.”

“I especially love the references part of the profile – it’s so important to mesh well personality-wise.”

“I really like how well events are integrated into the experience.”

My Learning

What lessons can I learn from this process?

This was a phenomenal project to work on as a designer because it pushed me to design solutions within a very new design system. I had never designed an android app before, and having to learn everything I could about material design was a surprisingly fun and enriching experience that gave me a much more nuanced view of the system as a whole. Conducting guerilla in-field user interviews also proved to be immensely rewarding as I was able to talk face to face with the very people whose problem I was attempting to solve.

Finally, being able to conduct numerous rounds of user testing was invaluable. Constant feedback from these tests allowed me to iterate on my designs so that the final product would actually be as helpful to the user as possible. The immense positive feedback I’ve received from my usability tests has encouraged me to get the product fully developed and to take it to market.