Moonboard

Moonboard App Redesign

Context

The Moonboard App is meant for the Moonboard, a specific rock climbing wall with arranged hand holds. This app enables users to view, climb, and design routes. However, my dissatisfaction with the app’s experience has persisted since I downloaded it in 2016.

My Role

Lead UX/UI Designer

Tools Used

Figma, Illustrator, Photoshop

Problem

The app, since my introduction to it in 2016, has always been crowded with information and generally has been considered to have poor usability. To user’s in the app, many of the common features were riddled with troublesome functionality, that could make getting a desired result aggravating.

Problem Statement

“How might I improve the usability and flow of the Moonboard app?”

I began the process with a Problem Statement that could frame the direction of simply improving the flow of the app. To accompany this, I created Stanley Williams as a User Persona, to make our problem a little more relatable.

User Persona

Stanley Williams

Tech-Friendly | Introverted | Ambitious
Age: 25
Occupation: Traveling Nurse

Motivators

Becoming a better climber: Stanley wants to climb at the peak of his ability and admires people who climb stronger than he does.

Behaviors

Training: Stanley wants to train as much as he can in his time off. Typically that time is scheduled around his work time and travelling for work. Although training on the Moonboard is important, he needs to put in the time on the board efficiently to be able to do other excercises at the gyms he goes to.

Time management: Stanley is a traveling, working professional and has to leave time for eating, commutes, climbing, and some time to lean back and do nothing. He likes to use his time efficiently.

Staying in: Due to Stanley’s hectic schedules, doing things outside of work and training can be daunting and unappealing. Stanely typically connects with friends via social networks such as Instagram, Facebook, and Discord.

Needs

A quicker/more efficient navigation in the app
Would like to see where he is in his Moonboard progression

Creating a User Persona helped kick off the narrative, making the problem more real to me. Now I have a real person (other than myself) impacted by the problem, making the whole process more empathetic and approachable.

Research

Now, who else is out there that’s like Stanley? It couldn’t just be me and Stanely that felt this way about the Moonboard app. To back that feeling up, I went to the r/climbharder subreddit and posed the question below:

“What are your pain points/friction areas with the Moonboard app? What do you like and what would you change if you could?”

Among other responses, I got answers like this:

“There is no clear flow of actions to get a boulder problem on the board.”

“If I’m a new user, how do I get a Moonboard layout setup on the app?”

“The general feel of the app is that it is crowded with unnecessary info.”

Moonboard User Affinity Map

Clarity in Organization

It seemed from the responses I got, that Stanley and I were not alone. We, in fact, shared a ton of problems with other users. To add to our own problems, users also faced a whole host of other challenges. The Affinity Map helped to organize those responses, and give me a clearer idea of what to concentrate on.

Moonboard User Flow Map

Discovery

Stanley is a new user of the Moonboard, and the Flow Map illustrates the Sign-Up process. One of the main things a new user wants to do is create a Moonboard layout to start climbing. In the current version of the app, that could be easier said than done. There’s no clear way to do it! A few of the buttons you could press to look for a way to dot it, would yield no results.

Heuristic Markup

Let’s take a quick look at the first screen you see after sign-up. That is a lot of information, isn’t it? Why not throw in some buttons that don’t make the most sense? Perfect, now that you’re overloaded and confused, find a way to set up your layout. Jokes aside, let’s try to refine the User Flow to make the flow more linear.

Moonboard User Flow Map V2

Make Them Think Less

If we incorporate setting up a Moonboard layout into the Sign-Up flow, we can eliminate the frustrations Stanley will face with the app, after creating his account. Although this extends the Sign-Up flow for him, it decreases the frustrating experience of having to look for the next step to do.

Sketching

Ideation

Now, let’s figure out what a smooth sign-up looks like. How could some screens inside the app be less overloading? What buttons can I use that are more relatable to Stanely, and users in general? Are there consistencies I can create for Stanley on different screens that make different flows feel the same? Sketching is the answer to all of these questions and Stan thanks us for it.

Coming Back to Sketching

Not every answer is revealed in the first round of sketches. During the process, I had to come back to sketching and try to find more consistencies in design. Although we are designing for a linear flow, the process to do so can be quite cyclical. Small setbacks make the journey more rewarding in the end, and Stanley will appreciate it.

Wireframes & Lo-fi Screens

Quantity to find Quality

The wireframing process helped me to discover more areas where I could be consistent across different flows. Once I had gotten to stopping point for iterating these screens, I prototyped the flows and got to work interviewing some of Stanley’s would-be friends: climbers at my local climbing gym.

Iterative Process

Designing, stepping back, analyzing, and enhancing became invaluable. This phase’s beauty lies in its simplicity, enabling rapid and substantial alterations.

User Testing

Prototype testing yielded abundant feedback from users at my climbing gym. Users appreciated the wireframes’ clarity and the potential for a cleaner, more functional app. Yet, significant improvements were also highlighted.

Find Your Gym Feature

With the Moonboard’s dual individual and gym-based point system, an opportunity emerged to simplify Moonboard layout setup in the sign-up flow. Using the location data from the prior screen, users could locate their area gym, registered for rankings. This selection would auto-populate layout choices, saving time for new users during setup.

Filter Feature

Reviewing the prototype with a gym developer added valuable perspective to my design. He suggested that a development team might prefer turning the filter modal into a full screen rather than a modal. While I favored the left layout, accommodating the development team’s capabilities took precedence over visuals.

Moving Back to Move Forward

The right screen is the updated version. While it might seem like a setback, it enabled a uniform layout for another feature, “Add to”. Climbers use this feature to log their completed climbs and the options depend on the responses in that screen. By maintaining consistency with the “Filter” feature, we ensure uniform functionality across both features.

Profile Feature

I aimed to showcase an improved Profile screen to users, which was well-received. However, I received valuable feedback based on the earlier displayed screens.

Give Us More

Users desired additional display of sign-up information, including the gym, earned points, ranking, and location. This would provide a better climber snapshot and enhance progress tracking. I also showcased the current climbing layout and relevant details.

Wait, There’s More?

As a bonus, we included an “Add Layout” button, simplifying the addition of Moonboard layouts to profiles and enhancing layout switching. This addresses a pain point from user research, offering a potential solution.

Final Screens

Retro Aesthetic

The last screens highlight Moonboard’s yellow accent and CTA color, alongside cream and tan shades for a retro touch reminiscent of Ben Moon’s classic training boards. Extensive revisions guarantee unified and seamless screens for a cohesive experience.

Dark Mode

As an added bonus to my users, I created a dark mode version of the app. This would give users more personalization and control over the look inside the app.

Design System

I utilized Google’s Material 3 community file to establish a design library for the Moonboard app. Iterating from Wireframes to Lo-fi stages enabled precise component and variant design for the final screens. This streamlined color and typography adjustments across the app, saving time on minor element changes.