04

iCourt Case Study

UI Design Landing Page Sports Tech 2023
iCourt sports court marketplace app
Overview

The Concept

iCourt was conceptualized to revolutionize how people engage with local sports facilities. Designed as a dual-sided marketplace, the platform connects sports enthusiasts looking for quick court reservations with facility owners needing robust business management tools.

By leveraging an energetic color palette anchored in a vibrant sports orange and deep charcoal contrasts, the visual identity communicates action, reliability, and community. The project focused on creating a high-converting landing page structured around two clear, parallel user journeys all designed in Figma with strict auto-layout rules and a card-based architecture.

2 Core personas
100% Auto-Layout
Dual Feature sets
Conversion path
Execution

Two journeys. One seamless product.

The layout seamlessly segments the experience into features for players and tools for court owners, using full-width color blocks to subconsciously separate each journey without requiring extra navigation. Every section was built with component-ready auto-layout to ensure a visually engaging narrative that drives app downloads.

For Players

  • Easy court scheduling
  • Secure in-app payments
  • Location-based discovery
  • Real-time availability

For Court Owners

  • Schedule management
  • Data analytics
  • Revenue tracking
  • Booking automation
Design System

High-Energy Visual Identity

Every visual decision in iCourt is governed by a single principle: communicate action and trust simultaneously. The token system uses iCourt Orange as the sole brand driver, anchored by deep charcoal surfaces and clean white sections.

01 · Color Palette (High-Energy & Contrast)

iCourt Orange drives all CTAs and owner-focused sections to stimulate action, while charcoal surfaces create dramatic contrast for player features.

Surface #FFFFFF
Player #2C2C2C
iCourt Orange #FF914D
Dark Text #111111
02 · Typography

Gilroy for bold, geometric headlines and Circular for highly scannable body text. Weights from Regular to Bold create a tight hierarchy where every level signals its own importance.

Display iCourt Gilroy · 800
Heading Book a Court Gilroy · 700
Body Find courts near you instantly. Circular · 400
Label Available Now Circular · 400
03 · Spatial System & Architecture

Card-based UI with uniformly rounded corners and full-width color blocks for visual segmentation. 8-point grid ensures consistent rhythm across all sections.

8px
16px
24px
32px
48px
Orange
#FF914D
Charcoal
#2C2C2C
16px
Cards

Pills