The Project Background

Baloteo is an animal fight match held in stadiums and is one of the national sports of the Dominican Republic. My client desired a Progressive Web Application (PWA) as an all-in-one digital solution to assist stadiums in managing Baloteo and provide fans or participants with a more interactive experience. This application is one among several I've designed during my tenure at Gallos Data, encompassing apps for all sectors of Baloteo management from fan engagement to event management, totaling 5+ applications. I faced a very tight deadline of three months to complete all these applications, including this one. This was my first big project when I was starting out as a freelance UI/UX Designer. I saw it as a chance to learn and improve as much as possible.

Fig. 1 - My process

Gathering Requirement

I participated in discussions with the client to gather requirements. He already had a clear vision of what functionalities he wanted and provided photos and documents outlining his ideas. I actively participated in these discussions to understand the current flow of activities, user issues, and preferences. Since direct access to potential users wasn't possible at the start of the project, I relied on his insights to grasp the challenges users face. It's worth noting that he had been in the industry for so long. Reaching users was difficult because my clients had to travel over 2 hours to reach the scattered stadiums and needed to schedule appointments beforehand. My client wanted me to build the project quickly. After the design was finalized, however, my client still engaged with multiple stadium owners and Baloteo workers to gather valuable feedback for what I've designed.

The User and Audience

The user and audience for this app are the Baloteo workers on the stadium. They are the ones who managed the Baloteo process. My client said that they’re mostly not tech-savvy so I needed to make it simple and straightforward.

Scope

There were some main area my client wanted to cover in this app:

1. Animal receiving phase

2. Matchmaking phase

3. Match Ongoing phase

   
   

The Problem

1. Baloteo management was disorganized, involving a significant amount of paperwork.

2. Receiving process could cause long queue line and long wait times. A participant could bring more than 1 animal.

   
   

Understanding Baloteo Process

Phase 1: Animal Receiving

1. Owners bring animals, registering each under a team name with their ID.

2. The chemist inspects for normalcy, tagging animals as normal or rejected.

3. Workers collect animal details, tagging them as normal or rejected.

4. Animals are stored in numbered cages by reception sequence.

Fig. 2 - Participants Waiting in Line to Register Their Animal

Phase 2: Matchmaking

1. Worker creates matches for normal-tagged animals using formulas, producing a match sheet.

2. Animals are assigned to blue or white sides based on the majority of white feathers at their tails.

Fig. 3 - Worker Inspects and Tags the Animal

Phase 3: The match

The judge decides match outcomes—win, draw, or lose. Matches can be canceled if any issues prevent them from proceeding.

Fig. 4 - Match is Being Held in Stadium

The features

The app's features were designed with the central goal of simplifying Baloteo management for workers while ensuring transparency and interactivity for participants and fans. It was clear that my client wanted the following features in the app and tasked me with bringing them to life:

Animal Receiving

1. Quickly adding animal by taking the most important informations at the moment of receiving the animals. Workers can finalize the remaining details later, allowing for a swift transition to receiving the next animal and reducing the overall processing time.

2. Ability to edit, approve, and exclude animals.

3. Live receiving process information that can be seen on regular users’ app

Matchmaking

1. Generating match and selecting matching method

2. Manage match side

3. Announce match

4. Print match sheets

The Match

1. View match list, results, statistics, and animal participating list

2. Edit match result

   
   

Ideate

Information Architecture

After understanding the requirements and features, I created the information architecture and presented it to my client. This allowed me to establish a solid foundation for discussions on the app's structure and functionality, ensuring alignment with the business requirements as well. My primary aim when building this information architecture was to ensure straightforward, intuitive, and clarity navigation experience for users, particularly those who may not be tech-savvy by doing following things:

• I focused on clear and logical organization, ensuring that the content was grouped relatedly.

• Prioritized minimalism, avoiding unnecessary complexity.

• Maintained consistency in navigation patterns by implementing a familiar process pattern as similar as the existing Baloteo event management process, step-by-step.

  
  

Fig. 5 - Information Architecture

User Flows

After creating the information architecture, I developed the user flows to map out the navigation and interaction within the application. simplifying and making interactions more understandable. At this point, I paid special attention to the following aspects:

1. I ensured that the user flows followed a clear, intuitive pathway and in a step-by-step manner so they are easy to digest and to complete.

2. I employed progressive disclosure techniques to gradually reveal more complex features or options as users progressed through the app, preventing overwhelming users with too much information at once.

3. Utilized more familiar components such as input fields, drop-downs, and tap/click to perform actions rather than using fancy gestures like swiping or any other unfamiliar gestures.

4. Provided feedback or confirmation messages to users when they performed actions, such as selecting options or submitting inputs, to reassure them that their actions were successfully completed or to inform them of the consequences of their actions before doing them.

5. Implemented clear error messages to help users understand and resolve any issues they encountered during their interaction with the app.

   
   

Fig. 6 - Some of User Flows

Create

Hi-Fi Design

I skipped wireframe process and and went straight to creating mockup of my ideas because I had a tight deadline. In this process I also invited my client to the design file so he could easily review it and leave feedback through Figma’s Comments. This process took several weeks. In crafting high-fidelity design, I adhered to the following things:

• Emphasized important elements such as buttons, menus, and key information using size, color, and placement to guide users' attention effectively.

• Utilized clean and minimalist design elements, avoiding unnecessary visual clutter to prevent overwhelming users and maintain focus on essential content.

• Employed universally recognizable visual cues to convey information and functionality clearly, ensuring ease of understanding for users with varying levels of technological proficiency.

• Used simple and easily understandable language in labels, instructions, states, and error messages to ensure clarity and minimize confusion.

  
  

Fig. 7 - Some of the Screens' Hi-Fi Design

Features

Animal Receiving

Quickly adding animal by taking the most important information (Owner account number, team, betting amount and betting preference) at the moment of receiving the animals. Then the worker can move out to next animal waiting in line. Later, workers can revisit the added animals to complete any remaining information and determine their status (approve or exclude). My client believed this approach will streamline the receiving process for Baloteo workers. The fans or participants can track any updates to the receiving process through live feed updates on the regular user's main app.

Fig. 8 - Some Screens from Animal Receiving Phase

Matchmaking

There are three methods: Regular, Special Honor Guest and Versus. After generating matches they will be directed to ‘Arrange Side & Matches’ page where they can manage the matches and arrange animal side in every match. There are 4 categories: Live Matches, Available Matches, Unmatched, and Excluded. After matchmaking is completed, they can announce the matches, and the match list will become visible on the main app for regular users.

Fig. 9 - Some Screens from Matchmaking Screens Phase

Match Ongoing

These screens displays the ongoing Baloteo event for users. Users can view the match list, view results of completed matches, access event statistics, and see participating animals. Match results are initially determined by the judge through the judge panel at the stadium. However, workers have the ability to edit match results when necessary. Users can view the match results on the regular user's main app.

Fig. 10 - Some Screens from Match Ongoing Phase

Features

Statistics

Showing event statistics and ranks including overall event statistics, team with most wins, team with most animal participated, and fastest match. The fans or participants can view these statistics on the regular user's main app.

Fig. 11 - Some Screens of Results & Statistics

Stakeholder Feedback and Project Continuity

After designing is completed, my client arranged several meetings with baloteo workers and stadium owners across the country. He shared the prototype to them and the feedback was positive. They were happy with this solution. There were no significant changes made from the initial design. At the early 2022, the app was under development.

However, as of the middle of 2022, this project needed to be halted because my client perceives a lack of business commitment from the stakeholders. My client is exploring alternative opportunities to implement this solution, though not in the Dominican Republic, as this sport is played in other countries as well.