Beta App

Project Overview

Problem/Challenge

Tools

Figma
Miro
Adobe Illustrator
Notion
Google Workplace
Zoom

Climbers in the climbing community struggle to create and 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 worldwide.

Beta’s primary goal is to design an app experience for climbers that facilitates growth and connection in the climbing community. We want to connect and empower climbers through sharing their experiences, planning new ones, and educating each other on best practices.

Roles and Skills

My primary role: UX/UI designer, UX researcher
UX/UI Design
User Research
Visual Design
Project Management

Collaborators

Maya SuzumuraUX/UI Designer, Project Manager

Deliverables

Climbing App

Research

Beta's primary audience is people looking to get into climbing and people who are already climbers looking for a community in the sport.

The secondary audience is businesses trying to create a more personal connection with the community and organizations to educate & get involved in the community.

The audience thinks climbing can be challenging and intimidating to get into; tracking progress is complex and lacks representation for BIPOC & LGBTQIA+ in the sport.

Demographics

To start our design thinking process, we conducted user research to better understand climbers' experience within the climbing community so we could pin down common pain points and uncover trends in what drives the passion people have for climbing.

A survey was conducted on 24 participants at all different ranges of experience levels so we could determine what features might be the most helpful or engaging for climbers. We also looked to gain a deeper understanding of these individuals' experiences within the climbing community to understand the feelings and emotions they have experienced.

After gathering all the results from the survey and interviews, we started analyzing them and created three personas based on our respondents. These personas helped us understand and see the people we were designing for through a more empathetic lens.

Empathize

Survey Results

User Personas

Based on our surveys and interviews, we created these jobs-to-be-done based on climbers' pain points communicated to us. These statements helped us focus on the users' problems and needs to understand better how they would want to solve their problems in a way that felt natural to them.

Define

Ideation

After making the Jobs-To-Be-Done and user personas, we created three scenarios and Customer Journey Maps that served as our solutions to the users' most common pain points and are designed to be a path they could take to reach their goals. The 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 deep dive into the problems our users face most often within the climbing community and how we could solve them.

Customer Journey Map

Sample Customer Journey Map (Kara)

To collaborate quickly on solutions and features that would best serve the users, we organized a workshop and invited some participants to test and share ideas with our team. We started the workshop by sitting down for 20 minutes to brainstorm possible features using sticky notes without sharing our thoughts. After the timer ran out, we came back together to put up all the features we brainstormed onto the board and assessed any commonalities or outliers. These were the key points we found:

UX Workshop

The sticky notes that had commonalities were grouped by: Training, Mentorship, Calendar, Group/Organization Finder, and Note-taking Options
Narrowing down the categories into more specific names helped us structure the app's contents.
The categories also helped establish the hierarchy of information of the app.

We started our visual design process by first making a mood board as a visual reference for the brand's tone 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.

We had several mental models for certain features of the app. The general look of the app was modeled after Airbnb, while the Discover screens were modeled after the Meetup app. By having these models, I could audit and understand what made these apps successful and what opportunities we can do to improve the overall experience for the Beta app.
‍
Once the mood board was finished, we began creating a design system that included our logo in different sizes, typography, brand colors, and meanings. Our design system helped us create global styles for our team to use across the board. Accessibility is crucial to our design solution due to the wide range of users. We wanted to ensure all of the app users could access the information they need to succeed in completing tasks by running color contrast checkers in Figma and cross-checking the WCAG rules. We chose Avenir for our typography because it is an accessible typeface that conveys a friendly, energizing, and natural tone that reflects our brand's characteristics.

Visual Design

Prototyping

After our research and ideation phases, we moved to our prototyping phase. As a result of our Personas, Jobs-to-be-Done, and Customer Journey Maps, we created three user flows that served as our guide in developing our wireframes and prototypes. Below are the three user flows that range from beginner climber to advanced climber users:

Kara (Flow 1): Kara is a new climber looking to find a community of women who climb in the Seattle area. She wants to use the app to find an event to attend and add it to her calendar.

Aleena (Flow 2): Aleena is an intermediate climber interested in learning how to train for climbing. She wants to use the app to schedule finger strength training in her weekly routine.

Cameron (Flow 3): Cameron is a BIPOC advanced climber looking to gain more leadership experience as a side job in Seattle. He wants to use the app to become a leader in the Seattle climbing community.

User Flows

The prototyping phase first started with designing the user flows based on our research through paper wireframes. What's great about creating these wireframes was that we could quickly conduct in-person user testings. We were able to get feedback on the users' experiences and change the wireframes. It also saved us time in setting up our low-fidelity wireframes in Figma.

Paper Wireframes

After sketching the paper wireframes, testing them with some users, and making changes based on their feedback, we then started shifting to Figma. Since we already had initial designs of the user flows from the paper wireframes, creating the low-fidelity wireframes was swift.

Once we finished wireframing all the screens together, we then started doing user testing. Maya and I tested four different participants to observe their app experience. When we got together to synthesize our results, we found a commonality, or pain point, between all four participants. The home screen was the most common pain point for them since most of them felt confused about its purpose and whether it should be renamed something else that was clearer. Other feedback we got were:

Low-Fidelity Wireframes and User Testing

beginner instructions for the onboarding screens
better navigation
add a calendar screen
better layout of the "Training" screen

Based on our user testing and feedback, we made some changes to the wireframes. To find better solutions to the user flows, we went back to our ideation phase and brainstormed more ideas, especially for the third flow.

When we had our low-fidelity wireframes done, we began to apply our design system and transition to higher fidelity wireframes. In this part of the project, I added some micro animations to make the app experience feel more stimulating to the users. These micro animations include loading screens, modal windows, and overlays.

High-Fidelity Wireframes

Once the high-fidelity wireframes were designed and tested, we presented our final prototype. The final prototype showed the solutions we created using the design thinking process.

Final Prototype

Summary

Overall, we achieved the goals we set in this project. We prioritized solving our users' pain points by applying the design thinking process and the agile methodology to create our app. Breaking our work into different phases allowed us to optimize our tasks and iterate our designs when we received feedback from our users and peers.

Climbers in the climbing community struggle to create and find access to vital activities related to the sport, including access to the outdoors and connections to inclusive communities. Beta believes that every climber of any background should be able to have fun and feel welcomed in their communities. We strive to fill the gap between climbers and the resources they need to succeed in the sport by designing a mobile app.

Conclusion

The biggest challenge in this project was designing the screens for the third flow. We didn't have a proper mental model, so we had to create our own by going back to our research phase and understanding the pain points of climbers recording their training.

It would be nice to conduct more comprehensive research and user testing if we had more time and resources. Running a card sorting activity as part of our research could have been more beneficial when considering the app's information architecture. Visually, I would also like to add more micro animations to make the prototype feel natural.

There is still a lot to learn as a designer, but I am always open to trying new skills and designing practical, accessible, and inclusive products for everyone.

Reflection

Beta: An App for Climbing and Connecting

Project Overview

Research

Ideation

Prototyping

Summary