Portfolio Logo
Back to top button icon

INDIVIDUAL PROJECT

MOBILE

PROTOTHON 2025 2ND PLACE WINNER

TournaPro

Year  

  2025

Independently designed an award-winning native mobile app to automate complex tournament logic and real-time score tracking in a day's design sprint.

Scope

UX Design

Systems Thinking

Visual Design

Information Architecture

Tools

Figma, Gemini, Storyset, UXWing, Canva

Duration

28 hours

15+ screens

TournaPro Project Image

Overview

Strategic Automation of Tournament Logic

Jump to Solution

This project transforms the reliance of badminton clubs on manual scorekeeping, paper records, and spreadsheets for managing complex tournaments into a streamlined mobile app. As a solo designer, I crafted the solution to automate tournament logic and ensure real-time data visualization under extreme time constraints.

This is an individual submission for Protothon 2025 (a global UX hackathon) hosted by DubsTech and DesignBuddies in May 2025, which won 2nd place in the Enterprise category among 20+ global submissions.


Challenges icon

Hackathon Challenge

Clubs still rely on manual/semi-digital processes for organizing and managing tournaments, which are time-consuming, prone to errors, and lack the real-time engagement and efficiency needed for fast-paced tournaments.

Success Criteria icon

Success Criteria

  • The logic must seamlessly handle all tournament progression (including dropouts) without manual administrator intervention.
  • The interface must clearly present complex data (brackets, scores, player ranking) to users under time pressure.
Goals icon

Goals

  • Design the logic and flows necessary to automate tournament setup and management.
  • Create a simple, intuitive mobile interface for managing dense, real-time data and multiple user flows.
Target Audience icon

Target Audience

  • Club Administrators: Need to set up and manage complex draws/tournaments effortlessly and reliably.
  • Umpires: Require a quick, intuitive interface for managing real-time scores in a fast-paced environment.

Design Process

Ruthless Prioritization Under Pressure

To deliver a high-quality, end-to-end solution in just 28 hours, the design process was lean and highly constrained, focusing on velocity and the most impactful features:


  • Conducting secondary research by analyzing online reviews, performing competitive analysis, and personally using available apps.
  • Analyzing research data and sketching out solutions for the top 4 high-priority issues for primary users.
  • Converting sketches into wireframes and a high-fidelity prototype.
  • Creating a pitch deck to present the design solution to hackathon judges.
Gemini AI research conversation images

Empathize & Define

Rapid Discovery of Complex Tournament Logic

My first strategic call was to skip primary research and dedicate all the available time to understanding the problem space and designing the solution.

I focused heavily on secondary research and deep study of badminton knockout tournaments and brackets/draws, since these were new concepts for me and were the core of the problem statement. I watched videos and used AI tools to understand and clarify various scenarios (knockouts, brackets, etc.).

Gemini AI research conversation images
Gemini AI research conversation images
My first strategic call was to skip primary research and dedicate all the available time to understanding the problem space and designing the solution. Along with collecting data from secondary research, I downloaded competitor mobile apps and personally used them to understand the gaps in experiences.

I narrowed the focus down to 4 critical flows for the MVP: tournament setup, bracket management, live umpire scoring, and the digital sharing experience for 2 main personas: clubs and umpires.

App reviews image
Mood board of the competitors

Key Insights

  • No direct competitors
  • They were all either solely score-tracking apps or general tournament creation apps.

  • Defining 'How Might We's for primary users:
Figjam how might we notes

Ideate

Automation, Customization, & Templatization!

My solution focused on eliminating manual administrative work and creating an efficient operational workflow through three interconnected features:


  • Automate and templatize tournament setups – including bracket/draw creation.
  • Allow intuitive controls and customizability, as different badminton clubs can have different rules.
  • Provide quick and familiar ways to share results online via social media apps, QR codes, and downloads.

I drew rough sketches (time was of the essence) for figuring out screen-to-screen flows, card layouts for tournament setups, tournament logic for various scenarios (bracket setups, dropout calculation, etc.), and high-level elements I wanted to include in the screens using the Crazy 8’s technique, which I then converted to wireframes in Figma.


This pre-design systemic approach was essential for the technical feasibility of a rapid prototype, given the time constraint.

Sketches

Design & Prototype

Engineering the Visual System for Speed

Brand board

The visual system was heavily crafted for speed and displaying complex, horizontal bracket data in a compact space, while also being selective about the mobile UI libraries chosen to ensure quick execution.



My design decisions focused on two core principles: action efficiency, where primary controls for scoring and undo were made large and instantly accessible; and information hierarchy, which restructured the complex, horizontal draw into a minimalistic, scannable flow to maintain legibility.
Workspace GIF

  • Templatized Tournament Creation
  • The why: This addresses the core challenge of tournament setups being time-consuming. By creating templates that save all recurring rules and settings, club admins can launch complex, multi-day tournaments in minutes, not hours. This is how we design for repeatability and scale.


    The design feature: A simple 3-step setup flow for clubs with the explicit option to "Save as Template" — the core feature for efficiency.

    Creating Tournament - Pick a Method screenCreating Tournament - Enter Details screenCreating Tournament - Enter Rules screenCreating Tournament - Review details & Confirm screenCreating Tournament - Created confirmation screenCreating Tournament - Add umpires manually screen

  • Automated Bracket & Draw Management
  • The why: This directly tackles the error-prone process of managing a knockout tournament. The application handles all the complex logic, which is crucial for building trust with the club users.


    The design feature: Brackets are automatically created when registrations close, and users are kept in the loop every step of the way. This is entirely customizable by users and includes automated re-calculation of the bracket in case of dropouts.

    Tournament Details - Draw Setup Loading screenTournament Details - Draw Setup screenTournament Details - Draw Setup - live screenTournament Details - Draw Setup - drag screenTournament Details - Draw Setup - drag screenTournament Details - Draw Setup - place screenRemove player from the tournament confirmation screenDraw recalculation in progress toast screenDraw recalculated confirmation toast screen

  • Intuitive Scoring Interface
  • The why: This flow is designed for the operational user (Umpire) who is under extreme time pressure. The interface must be fast and accurate where it matters most — when the match is live.


    The design feature: A high-contrast, minimalist UI in landscape mode with large, easily accessible touch targets and color-coded score indicators (the winning player is colored distinctly).


    Technical rationale: I based the large touch targets on Fitts' Law, and the landscape orientation was a core strategic decision to maximize ergonomic efficiency. This expanded horizontal space allows scores and primary controls to be widely spaced, drastically reducing hand movement and ensuring error-intolerant, rapid score input using both thumbs.


    Value to user: By designing for simple touch/swipe gestures for score updates and undos/redos, I optimized the workflow for speed and accuracy, directly applying cognitive principles for a high-speed, error-intolerant environment.

    Managing Live Match - controls expanded screenManaging Live Match - withdraw player screen
    Managing Live Match - controls collapsed screen

  • Quick & Familiar Digital Sharing
  • The why: This addresses the lack of intuitive digital sharing abilities for clubs and umpires — users need something more high-fidelity than scores stored on physical or Excel sheets.


    The design feature: Sharing options are available for results after a match ends, not only through social links, but also as downloadable PDF/PNG documents (a need identified via app reviews).

    Creating Tournament - Pick a Method screenCreating Tournament - Enter Details screen

Reflection & Next Steps

Solo Win Impact

Honestly, winning 2nd place in a solo 28-hour sprint was extremely rewarding. It proved that I could combine strategic product thinking with rapid, high-quality execution — a skill that’s vital in any fast-moving tech environment.


  • Constraint-Driven prioritization: The time limit forced me to be really smart about where I spent my energy. I had to practice ruthless scoping and strategic product thinking to deliver a complete MVP — a necessary skill to have in fast-moving tech environments.
  • Embrace existing design systems: The intentional strategy to leverage existing UI systems (instead of customizing every pixel) was the single most important factor in meeting the deadline. This drove home the point, again, that design is often about velocity and systemic thinking, all highly important for reducing speed-to-market.
  • Mastery of complex workflows and concepts: Successfully translating the intricate, rule-based badminton knockout/bracket logic into a seamless, automated digital experience showed me that I can confidently tackle any complex B2B workflow and learn complex concepts in a pinch.

The next steps would be to design the full player-side mobile experience to complete the end-to-end workflow of the product, conduct usability testing on the bracket experience to establish a baseline KPI, aiming to reduce manual scoring errors by at least 50%, and flesh out the design system to manage future expansions.