CrossX: transforming the app into a complete experience beyond the workout
REDESIGN OF A DIGITAL PRODUCT, DEVELOPED AS A FINAL PROJECT FOR THE ADVANCED UX/UI COURSE AT CODERHOUSE.
1. Background
From June to August 2022, I attended the Advanced UX/UI Design course at Coderhouse.
As the final project for the course, I developed the redesign of a digital product, and I chose the CrossX app: an application I use daily in my Crossfit practices. I had identified some opportunities for improvement, ranging from usability concepts applied in a somewhat misguided manner to a significant potential for expanding the application as a social network and lifestyle platform, more actively and affectionately present in users' routines.
2. The challenge
CrossX is an app used for managing Crossfit workouts. It allows athletes to check in for each session, and coaches to track class capacity. Additionally, users can view daily workout details, see who else will be training at that time, monitor their training frequency per week/month, record weightlifting records to track progress, and make payments directly via credit card.
In other words, it is an essential app for workout dynamics, and it's not accurate to say that the app doesn't function. However, it does so poorly, and the user experience could be significantly improved.
Starting with the practically non-existent and underutilized home page (which functions as a timeline, and coaches use as they see fit) and the hidden side menu that takes up the entire screen (only visible after clicking the hamburger menu lacking the necessary prominence).
Being a user myself (frustrated at times), and knowing many people who also use the app and could be easily interviewed, I thought it would be a very enjoyable project to undertake.
And I must say, I was right! :)
⌖ Tools &
Methods:
Research, Survey, Figma, Google Forms, Crossfit WhatsApp groups (for recruitment), Treejack, Miro, Personas, Lean Canvas, UX Analysis, Journey Maps, Tree Testing, Information Architecture, BXT Model, Task Flows, UX Writing, Design System, Prototyping, Interview
3. Discovery & Research
The first thing I did was define the 4 main objectives that I would like to achieve with this project.
PROJECT OBJECTIVES:
1. UNDERSTAND USER USAGE BEHAVIOR AND THEIR RELATIONSHIP WITH THE APPLICATION
2. VALIDATE THE USE OF THE MAIN FEATURES EXISTING IN THE CURRENT VERSION OF THE APP
3. DISCOVER USER PAIN POINTS IN EACH FEATURE
4. IDENTIFY ATTRIBUTES THAT ENABLE THE CREATION OF DIFFERENT PERSONAS
After defining them, I outlined an action plan and selected the methods necessary to achieve them. Here's what I did:
methodology:
I sent Surveys to 2 Crossfit WhatsApp groups to better understand the audience of this product and received 42 responses, from which I created 2 different Personas. After that, I developed a Lean Canvas with solution hypotheses and conducted a comprehensive UX analysis of the application. Then, I proceeded to create the 2 main journey maps and applied Tree Testing, with 2 tasks to be completed.
With the insights generated, I evaluated the current information architecture and redesigned it, implementing identified improvements. It was then time to create a BXT Matrix to define project priorities and chart the course to be followed.
With the complete journey, I defined the 2 main Task Flows, from entering the app to the success of the task, and began working on the UX Writing for the new app, creating the voice matrix, defining the tone, the golden circle, and the language style guide. To conclude, I created the Design System for the project and then assembled the navigable prototype to be tested and evaluated.
research & benchmarking:
During my initial research, as a Crossfit enthusiast and daily user of the app CrossX, I had a good understanding of the product and already identified many opportunities. I also researched in the app stores' comments - AppStore and Google Play - and performed benchmarking, finding few direct competitors (CrossX and Tecnofit being the two major players dominating the market). However, an indirect competitor that caught my attention the most was Strava - an app that "connects millions of runners, cyclists, walkers, and other active people through the sports they love," according to their own description. That's when I had the idea:
why not connect Crossfit enthusiasts and strengthen this network even more?

SURVEY:
With the Survey results, I could verify that, in general, users are satisfied with the app. The majority responded that they like or really like it and don't miss any features. However, I included an open-ended question at the end, and insights emerged about the usability of the app and ways to make it more social, with interaction with other boxes/friends. These are important points to prove that while the app may be functional, there is indeed potential for improvement. The complete questionnaire can be accessed at this link.
personas:
With the data collected, it was possible to create 2 user personas for the app: Bianca and Vítor! :)
lean canvas:
A Lean Canvas was also created, defining key solutions such as leaving a dedicated space on the home page for the week's workouts and bringing the WOD (Workout Of the Day) to the home page. The main hypothesis was that the app could have more attractive features and play a more significant role in athletes' daily lives. The complete Lean Canvas is provided below:
UX ANALYSIS - NIELSEN'S HEURISTICS:
For the UX analysis of the app, I relied on Nielsen's key heuristics, and several points were identified. The main ones are summarized below and revolve around an outdated aesthetic and issues with information hierarchy, visibility and system status problems:
user journeys:
Two journey maps were created that are commonly used by users who responded to the Survey: checking in and consulting their Personal Records (PRs).
Through the maps, it is possible to identify and anticipate user feelings and thoughts, both negative and positive, and use them for journey improvement. Below are the two complete maps linked to each of the created personas:
tree testing:
To conclude the Discovery phase, a Tree Testing was also executed. The two tasks assigned to users were relatively simple, and the app usage was well contextualized. Nevertheless, few users arrived at the correct answer!
This only reinforces that the path is confusing, and likely, those who use the app have memorized how to get there instead of relying on intuition. It's also probable that a new user would have a more challenging learning curve, as they don't follow habitual paths and mental maps already used at another time.
4. The process
Now, with the Discovery process complete, I began to roll up my sleeves and envision how this new, more comprehensive version of the CrossX app would look.
INFORMATION ARCHITECTURE:
The starting point was to define the app's architecture, which became more simplified and distributed throughout the application, turning all user journeys into shorter and more direct steps and fixing the main menu at the bottom of the page.
bxt model:
Through the BXT Model (Business viability + eXperience desirability + Technical feasibility), the project priorities were defined, considering and balancing values for both the user and the business. This allowed me to prioritize some features and set others aside, either to not be included or to be added in a future update.
task flows:
With the same prioritization idea, defining the 2 main Task Flows helps to focus on what is most important in building the wireframes and the app interface. I wanted to focus on 2 journeys that are not essential for training but can make a significant difference in workout routines: to discover 50% of the Personal Record in a specific exercise and check a Workout Of the Day that happened last month.
ux writing:
For the UX Writing of the project, I defined that the communication would be direct, clear, and with a friendly tone, reminiscent of the partnership and encouragement from other athletes. As if the app were truly part of the Crossfit community!
The calls would have a warmer tone, in the imperative voice, like a reminder. Below, it's possible to see the complete definitions and also view some examples of good and bad practices:
Now the main decisions have been made, and the new application is starting to take shape.
Many hand-drawn sketches, wireframes planned and replanned according to all the insights generated in each method, changes in the position of elements in the interface, a low fidelity that became more complete until it became high fidelity, word changes in each call to achieve the ideal text until finally reaching a point to say: okay, I think this works.
So let's transfer everything to Figma!
5. The Design solution
As a solution, I have a product that pleases me a lot as a user.
It has a visually cleaner structure, but it still makes sense and communicates with the previous model. Additionally, by using many elements widely used in other apps, it makes the learning curve easier and requires less cognitive effort.
Here you can see the small Design System created to the app and some Before & After interface screens:
The previous homepage screen was the timeline, which varied a lot from one box to another and did not have a pattern of use. In the case of my box, which I used as an example in the screenshot, the coaches improvised by creating this black card using an external software with the techniques of the week. To access any feature, it was necessary to click on the small hamburger menu on the left corner of the page to view the options - which were hidden.
Now, the main features are summarized in the fixed bottom menu, with emphasis on the Check-in in the center. On the home screen, a short welcome message that can be edited by the coaches appears first, according to the week/day's training, followed by the weekly workouts and the monthly calendar, with an encouraging message showing how many workouts have been completed in the month. At the end of the home (see images below), there are still secondary buttons: Timers, Championships, and Online Store.
This way, the Feed has gained a dedicated screen that can now fulfill the role of socialization since it automatically brings updates from your friends: both athletes who are part of your box (and appear automatically on your list) and friends who train elsewhere, but can now be added to your friends' list.
The interface, in general, has been simplified and standardized. The buttons always have the same aesthetics to avoid confusing the user about whether something is clickable or not. The background is consistently white, promoting smoother navigation without friction between screen transitions.
One implementation I particularly like on the Check-in screen (see it in the image below) is that it's visually clear to distinguish between times when it's no longer possible to attend a class and the times that are still available. Additionally, on the Personal Records screen, exercises with registered weights now automatically move to the top of the list, making them easier to find, while those without records remain at the bottom. It's much easier to locate them now.
Below is the navigable prototype created in Figma.
I recommend opening it in full screen for a smoother navigation. Please note that it is still a prototype, and some journeys are not complete. If you feel stuck at any point, you can click on 'R' (Restart) to start over.
6. Lessons learned
This was the first project I worked on entirely, using many UX Design and Research techniques. Until then, I felt a bottleneck in my career: transitioning from Art Direction to UX/UI Design, I felt that the UI part was much stronger in my deliverables, while UX was lacking due to my lesser experience. This project helped me feel more self-confident, and I started to perceive my skills differently since then, believing much more in myself.
Something I would do differently is also to engage with the coaches! I ended up focusing a lot on the user as an athlete, but there is a whole version of the app that caters to those who provide the workouts to be consumed, and I ended up putting their demands in the background. Who knows, maybe it's something for a second study?
Back to Top