Skip to main content

Frontend Design Process

This page outlines the design workflow behind the Event Registration Platform’s interface, from initial research to final implementation. The goal was to create a UI that would support real event-day operations, particularly packet pickup, quick participant lookup, and management of large registration lists.

The design process was divided into four stages:

  1. Context & Requirements
  2. Wireframing
  3. Component System & Layout
  4. Final UI Implementation

1. Context & Requirements​

Before designing screens, it was necessary to understand the operational workflow of race-day staff:

  • Participants arrive in groups, requiring rapid search and confirmation.
  • The UI must work in bright outdoor settings, often with glare.
  • Devices typically include laptops, tablets, or portable kiosks.
  • Packet pickup relies on scanning QR codes, viewing participant details, and confirming delivery.
  • Staff must handle hundreds of participants per hour, so speed and clarity matter more than visual decoration.

From this, the core UI requirements emerged:

  • High contrast dark theme
  • Large, readable typography
  • Minimal visual noise
  • Easy-to-reach buttons
  • Clear differentiation between “view” and “action” elements
  • Stable layouts that won’t shift as data loads in

2. Wireframing​

Low-fidelity wireframes explored:

  • List view for registrations

    • Search bar at the top
    • Compact row layout
    • “View” button for each participant

  • Detail view

    • QR code positioned prominently
    • Key participant details grouped in a clear info box
    • A single primary action: confirm packet delivery
    • Secondary information listed in labeled groups

The wireframe goals were to:

  • Validate the hierarchy
  • Ensure scanning and reading paths were fast
  • Remove unnecessary UI elements
  • Keep the structure stable across varying amounts of data

Wireframing ensured that the final design remained functional and purposeful even before applying visual styling.

3. Component System & Layout​

The interface was built using reusable React.js components wrapped in an Inertia.js SPA-style workflow.

Core Components​

  • Layout Shell (sidebar + top area)
  • Search Input
  • Data Table
  • Participant Summary Card
  • QR Code Container
  • Action Button (“Paquete Entregado”)
  • Info Label + Value Rows

Design Principles​

  • Consistency:
    Every detail screen uses the same information structure.

  • Clear Action Focus:
    The primary button is isolated and styled with strong contrast.

  • Minimal Navigation:
    Operators interact mostly with two pages:

    1. Registrations list
    2. Registration detail

  • Direct Feedback:
    Buttons, statuses, and delivery confirmations provide immediate visual acknowledgment.

Grid & Spacing​

  • Uniform spacing scale (4px / 8px / 16px)
  • Fixed sidebar width for predictable reading patterns
  • Card-based sections for grouping related data

4. Final UI Implementation​

Once the structure and component library were finalized, the dark theme and visual system were applied:

Visual Characteristics​

  • Dark background to reduce glare and focus attention on information.
  • Bold white text for high readability.
  • Colored status badges ("Entregado", "Pendiente").
  • Primary action button styled in a bright color (e.g., green) to signal confirmation.
  • Consistent card layout to organize participant data.

Resulting Screens​

  1. Registrations List

    • Fast search
    • Clean table layout
    • High visibility “View” actions

  2. Registration Detail

    • Large QR code for scanning
    • Full participant breakdown
    • Clear delivery confirmation workflow
    • Status immediately visible

These final screens are optimized for real-world operational load and have been tested under conditions including bright light, low-bandwidth networks, and high user throughput.

Summary​

The design process focused on functionality, clarity, and operational efficiency.
By grounding the UI in real race-day workflows, the final product supports fast, accurate packet delivery and participant management, while maintaining a modern and cohesive visual identity.