BETA

The application connecting climbers to community groups, mentorship, training tracking, and ethics education within the climbing community.

Duration

9 weeks | Oct 2021 - Mar 2022

Role

Project Management, UX Research, UI Design, Visual Design

Tools

Figma, Notion, Illustrator, After Effects, Photoshop, Miro

Collaborators

Ana Bungag

Overview

Problem

Climbers in the climbing community struggle to create & find access to vital activities related to the sport. Such as access to the outdoors, connections to inclusive communities, skills training, and education on ethics in both gyms and the outdoor climbing space. The community struggles with the lack of easily accessible ways to connect and share knowledge.

North Star

As a team, our goal is to design an engaging app experience for climbers that facilitates community connection. We want to connect and empower climbers through sharing their experiences, planning new ones, and educating each other on best practices.

Solution

BETA integrates the most used features of competing products to solve problems within the climbing community. Simplifying the process of finding community, training for climbing, and learning best practices when entering the outdoor climbing space.

research

Survey & Interviews

A survey was conducted on 24 participants at all different ranges of experience levels. We then conducted 4 interviews with the same questions. Our goal was to uncover trends in what might frustrate climbers and what drives the passion people have for climbing.

"Having friends and mentors help me understand the ethics of outdoor climbing, how to train and many other ins and outs of the sport was important to me."

Takeaways

01

Since events and groups are not easily accessible climbers tend not to attend them though they reported wanting to attend or even host events

02

Mentorship plays a vital role in each climber's experience. Climbing mentors provide new climbers access to gear, and the outdoors as well as teach etiquette.

03

Climbers have a deep emotional connection to the sport due to the bonds that are created through the mutual appreciation for problem-solving and the outdoors.

04

Training is important to the community but a small percentage of climbers know how to train. The climbers who reported enjoying training didn't have a great way to track progress.

Ideation

Archetype Personas

To build a better connection with our user group we decided to create these personas. From our research, we noticed 3 groupings of needs and perspectives often linked to the experience level of the climbers. To better understand our user's behavioral needs we applied the archetypes of beginner, intermediate and advanced to our personas.

Whiteboard Sessions

Ana and I collaborated on the whiteboard twice a week to generate ideas. We were then able to share those ideas with our peers and user group to get relevant feedback. We completed the tasks below to build the concept and find gaps in our user's journeys.

Customer Journey Mapping

These journey maps helped us brainstorm how our users will navigate the scenarios we created keeping in mind what the user is thinking and feeling along the way. This was our strategy for seeing gaps and frustrations in the user's experiences with the application concept.

Jobs-To-Be-Done

Based on the pain points climbers were communicating to us we created Jobs-To-Be-Done. These statements helped us empathize with the users' goals. We were looking to understand how they approach reaching goals with the tools available to them as well as see possible blockers.

UX Workshop

We organized a workshop so we could collaborate quickly on solutions and features that would best serve the users. We invited 2 participants to share ideas with our team and join in on the brainstorming efforts.

Post Up

We sat down for 20 minutes to brainstorm possible features without sharing our thoughts. After the timer ran out we came back together to put up all of the features we brainstormed onto the board.

Feature Prioritization

Sorting through the features we brainstormed we started to notice trends. We created five categories that would fit together to create a hierarchy of what’s most important to have in the app.

Takeaways

01

Working collaboratively on the whiteboard is a really quick way to get ideas on the table and receive relevant feedback.

02

Climbers have three main concerns, training, education and connection to the community

03

Climbers are very goal-oriented, and seeing incremental progress is very satisfying.

04

Climbers are driven by recognition from their community and peers.

Design

Mood Board

Our mood board gave us a visual reference for the tone of the brand so we could work on developing our voice. We mind-mapped out buzzwords to generate a color palette, photography style, and look and feel for our design system.

Logo Design

The logo was created around the idea of connection within the climbing community, keeping it simple and recognizable to the eye when searching for apps on your phone was important to keep in mind. The simple lettermark is used to be displayed as an app icon and the word mark is to be used in larger-scale branding situations.

Typography

Avenir is an accessible typeface that conveys a friendly, energizing, and natural tone that reflects our brand's characteristics.

Brand Colors

Our brand colors were chosen to convey our brand's attributes of, natural, friendly, strong, energizing, and connected.

Accessibility

Accessibility is really important to our design solution due to the wide range of users. We wanted to ensure all of the users of the app could access the information they need to succeed in completing tasks by running color contrast checkers in Figma and cross-checking the WCAG rules.

Color Usage System

Colors were chosen to convey the brand's identity while communicating meaning to the user. All of our colors were tested for accessibility to create a color usage system across the experience.

Takeaways

01

Make sure our application is accessible to anyone looking to use it.

02

It's important that we are building a cohesive visual experience. We were able to do this by implementing text, color, and graphics guidelines.

Prototype & test

User Scenarios

We created these scenarios to give our test participants during user testing. They are built to help the participants empathize and understand how to approach navigating the prototypes. Each scenario represents one of the 3 common goals our user groups have that we uncovered during the ideation phase.

Rapid Paper Prototyping

We gathered 4 participants to test with. Paper prototyping offered us a quick and collaborative way to design the UI layout before starting our interactive build in Figma. Pink circles represent the user's touch points as they navigated through our prototype.

Flow 1 - New Climber Scenario

Flow 3 - Advanced Climber Scenario

Takeaways

01

Users would like to be able to edit their initial onboarding, have a feature to edit your climbing level as you progress as well as a back button to edit during onboarding.

02

The calendar setup is a nice touch, users found this to be an intuitive feature they were motivated to use.

03

Make sure that the onboarding task is located in the middle of the screen, the location search bar was hard for the users to find.

Low-Fidelity Prototype

With feedback from the paper prototype session, we created our low-fidelity interactive prototypes. These prototypes were user tested with 4 participants to uncover challenges our audience may have when using the application.

Flow 1 - Beginner Climber Scenario

Figma Prototype

Feedback

Create screens for the calendar section, it wasn't clear how the event is added to the calendar

Flow 2 - Intermediate Climber Scenario

Figma Prototype

Feedback

Although you can add training events anytime in the navigation bar we had feedback to include a button on the training screen to add new training events to the schedule.

Flow 3 - Advanced Climber Scenario

Figma Prototype

Feedback

Feedback was very positive for this flow of our application. We decided to move forward with high-fidelity without making changes.

High Fidelity Prototype

We completed 2-3 rounds of changes after our user testing sessions before creating our high-fidelity solution. This video will walk you through our final high-fidelity prototypes. We hope you enjoy it!

reflection

Summary

Working on BETA was a great exploration of the UX/UI process through team collaboration for Ana and me. We faced the challenge of not having enough user testing and feedback during the covid lockdown. We worked around this by trying to do as much remote testing and workshopping as possible during lockdowns.

Takeaways

01

Always have a backup remote workshop or user testing option.

02

We pivoted from creating a training application to this concept of community connection after receiving feedback that motivation for climbing is driven by the community.

03

Archetype personas are much more effective to the UX process. We know that in any design process there will always be subgroups of people using the product for different needs. These personas helped us connect to those main subgroups and serve a wider audience.

OverviewResearchIdeationDesignPrototype & TestReflection