This page is under construction.
Crafting a Progressive Web App for Goalify
Project Overview
Goalify is a productivity app designed to help full-time professionals aged 25–40 manage their time efficiently without feeling overwhelmed. As the UX designer, I collaborated closely with developers and product managers to create an intuitive interface that emphasizes simplicity, goal tracking, and user motivation. Through user research, usability testing, and iterative design, we developed features such as calendar integration, reminders, and progress streaks to encourage consistent productivity habits. Goalify empowers users to stay on track with their goals while maintaining balance and clarity in their daily routines.
Role: UX/UI Designer
Duration: August 2024 to October 2024 (2 months)
Tools: Figma
Discover
Research
Goal
I wanted to discover how climbers are interacting with the environment of the gym and how to help them achieve their climbing goals.
Objectives
Understand how climbers interact with other climbers and the environment at the gym
Discover what are their biggest pain points when climbing
Determine the needs of climbers in relation to what resources their climbing gym offers
Methods
Analyzing RGP Connect
Competitive Research
User Interviews with climbers
“What experiences do you enjoy the most about climbing?”
“What has your experience been like so far with RGPro Connect?”
“What methods do you use to keep track of your fitness and climbing goals?”
RGPro Connect
The goal at the time for this project was to provide everything a climber would need into one application. Many climbing gyms in the United States use RGPro Connect to connect the climbers to the gyms with fitness classes, climbing classes, events calendar, waivers, and account access.
The design seems to be styled after linktree and honestly just straight up looks like a website rather than an application with buttons that take the user out of the app and into a web browser. The reservation system is also not the most aesthetically pleasing to the eyes and unfortunately is not user friendly due to the amount of steps taken just to reserve a spot.
I’d like to combine RGPro Connect and KAYA to create a pleasant experience for the end user.
Competitor Analysis
Most climbers use this application to view climbing sets, beta videos, and track sessions. It covers all gym and outdoor climbing and contains a lot of attractive features. However, a lot of users don’t like this app due to its UI and unreliability.
Mountain Project is more so meant for outdoor climbing, but it allows users to add climbs to a to-do list. Users are also able to pin specific areas so that other locations don’t show. While it is held at high regard, the user interface needs work.
Many climbing gyms also have work out equipment for their visitors along offering classes. These gym applications are great examples of how the class scheduler should be modeled after because some climbing gyms have many locations too.
User Interviews
Logistics
9 Climbers
28 - 40 years old
Remote interviews
Noticeable Themes
Knowing when rope route and boulder problems resets would be extremely helpful for all of the participants because it allows discipline and time management to work on projects.
7 out of 9 participants have plateaued and find it frustrating and hard to get to the next climbing level.
RGPro’s class scheduling system is difficult to use due to the many steps taken to book a class and on top of that users stress having to book 24 hours in advance to secure a spot.
User Personas
There are two different types of users that I wanted to target: a climber who is trying to become a stronger climber and the other is a climber who is using their membership to the fullest by visiting different gyms and booking all of the classes available.
Problem Statement
Not knowing when rope routes and boulder problems are going to be reset is one of the biggest pain points for climbers. This leaves them frustrated if they have to continuously working on the same things over and over again, leaving them feeling tired of going to the climbing gym. If we keep climbers informed about route and problem resets, this can give them a better understanding of the amount of time they have to allocate to a project.
“How might we prevent facility fatigue and enhance our members’ experience at the gym?”
Define
Feature Set
01. Reset Countdown
Seeing climbs and when they reset will be the most important feature for this application. Users can review routes and boulders before they even get to the climbing gym and will have full transparency on when it will be reset. They will be able to save these climbs and organize their time well.
02. Class Schedule
Many, if not all, climbing gyms offer classes to their visitors such as yoga, cardio boxing, and climbing classes. For gyms that operate in many locations, a class schedule as well as a way to set an alarm will be useful for those who like to do more than climbing at their gyms.
03. Activity Tracking & Challenges
To help users get out of their plateau, it could be helpful for them to track what climbs they do and note how to improve. Climbers can push themselves when they are able to see how many climbs they’ve done at a given time. In addition to activity tracking, challenges can improve a climbers ability such as moves or speed.
Information Architecture
I performed a card sort to understand the mental model of an average climbers and created the site map seen below. The main focus of the information architecture is for users to log activity for a climb. Climbs and activity logging can be seen in multiple sections of the application.
User and Task Flows
I created this user flow to understand what steps users would have to take in order to log activity for a climb. Navigating to the rope route or boulder problem was simple, but the activity logging and saving a project for later was a little more complex.
Brand Identity
Developing the Goalify Brand
The core values of Milestone are inclusivity, empowerment, community, collaboration, transparency, and growth. Climbing gyms provide pleasant experiences within their community with their events, competitions, and friendly staff. The members of this community itself are always helping each other grow through empowerment and collaboration. Because of this welcoming and creative atmosphere, Milestone’s goal is to translate that into a mobile application that will help give users that same experience.
LOGO SKETCHES
THE LOGO
A common pose that climbers strike when they complete a climb is they will let go of one hand and ball it up in a fist and flex. This signifies the strength and problem solving skills it took to finish a climb. This imagery represents how the climbers will grow and reach the next milestone in their climbing career.
For the colors, I used orange and purple to help communicate the brands core values. Orange represents friendliness that comes from the inclusivity and climbing community. Purple to represent the creativity and problem solving skills that climbers build as they collaborate with other climbers.
Design
Low Fidelity Wireframes
The user flow is showed how users would discover climbs and log the activity for the climb, so I opted out having a dashboard. The reason being we want users to get right into it without having to click on any additional pages to perform these actions. For the rest of the screens, different layouts were sketched out, but ultimately I wanted to choose what was the most intuitive and let usability testing do the rest of the work.
Mid Fidelity Wireframes
After discussing with
Testing
Mid Fidelity Usability Testing
Goal
We wanted to ensure that it was as simple as possible to create and complete goals.
Tasks
Add a goal to the list
Join 5k Prep Club
Do a group goal, then go see the leaderboard
Key Takeaways
Something our team struggled with during early sketches and mid-fis was honing in on the must-have features of the Goalify. We had a lot of big ideas but didn’t prioritize how the features would function. We had to focus on the main tasks at hand for the user: creating, editing, and completing goals. The dashboard screen had too many categories going on, so I narrowed it down to “done” and “to-do” and also moved the “add goal button” to a more dedicated area. The calendar feature, which was meant as an overview for users, was also confusing for users so we designed it to just be like a calendar instead of also having a to-do list there as well. Removing the questionable features and simplifying the lists and calendar made it easier for the developers to begin working on the front and back end development.
High Fidelity Wireframes
Major changes were made to the map and navigation due to all of the confusion and disorientation of the participants. A dashboard was added along with a page to navigate to all of the gym locations because I was asked how the app knew where they were already.
Adding a Dashboard
Due to the jarring first screen as well as confusing placements of certain features in the app, the dashboard was added to contain all of the out of place features. Because of this, I had to adjust the navigation.
Changes to the Map
In order to help users get oriented to the map, upon opening the gym, it shows a full view of the facility then zooms into the first floor area. Location markers are added such as the front desk and stairs to add more clarification of where a user is at in the gym.
Adjustments to the Climb Page
To make the climb page more clear, adjustments were made based on observation and usability feedback. The flag in the mid-fi for example was hard for people to identify so I made it clearer by making it say “+ Add to Projects.” Another thing users mentioned wanting was a way to add notes to remember what moves or mistakes were done.
Results
Prioritization of Iterations
After testing the hi-fidelity screens, these are the changes I would do next for the next iterations.
Add quicker access to the user’s favorite gyms to the dashboard
Update the top and bottom floor buttons to be more visible
Move buttons on maps to the top of the map since a lot of users tend to click in that area
Reflection
Designing a solution for this product helped me learn how to prioritize features for an MVP. The team had so many amazing ideas that the collective forgot to focus on what would matter most to our users within the time and technical constraints.
While sketching the low-fidelity screens, I had many questions about how the groups and stats feature would work in the grand scheme of things. Even after putting together the prototype to perform user testing, I found myself asking participants what they expected from these features rather than having a working and functional feature for users to interact with.
The team ultimately decided to remove the groups and stats features after user testing, which allowed the developers to focus on the core functionality of our product to ship Goalify by our deadline.