FeaturedSports & RecreationMobile App UI/UX2023
Tartan Sports
Intelligent Sports Performance.
The smart sports app that offers you a complete sports experience, where you can easily book pitches and join matches or tournaments anytime — whether with your friends or with new players from the local and global football community.
Case Study: Tartan – Sports Pitch Booking & Community Mobile App
Role: UI/UX Designer (Figma Design)
Platform: Mobile App (iOS & Android)
Link: View on App Store
Services: UI/UX Design, Design System, Wireframing, High-Fidelity Prototyping
Executive Summary
Tartan: Book & Play is an all-in-one mobile sports platform designed to connect sports enthusiasts with local venues, matches, and community events. As the sole UI/UX designer, I designed the complete user experience in Figma—covering everything from brand visuals and interactive map discovery to frictionless pitch booking and player profile journeys.
The core objective was to replace fragmented phone calls and messaging threads with an intuitive, 3-tap booking experience built specifically for mobile screens.
The Challenge
Sports venue booking and match organizing traditionally suffer from distinct user friction points:
High Booking Friction: Players struggle to find real-time pitch availability, resulting in constant back-and-forth messaging.
Complex Match Organization: Organizers find it difficult to invite open players, track match stats, or manage split payments.
Multi-Sport Adaptability: Designing a UI flexible enough to handle different sports (Football, Padbol, Basketball) with varying slot durations and pricing structures.
Information Density on Mobile: Displaying venue maps, calendars, duration selectors, and pricing cleanly on compact mobile displays.
Key Design Solutions
1. Interactive Map & Pitch Discovery
Designed a map-first discovery layout enabling users to locate nearby courts, turf pitches, and indoor facilities visually. Added quick-filter pills for sport type, date, pitch size, and distance radius.
2. Streamlined Booking & Time Slot Selection
Crafted an intuitive calendar and slot selection interface that clearly distinguishes open, reserved, and promotional time slots. Structured the checkout flow to be completed in under three steps.
3. Community & Match Social Loops
Created player profile screens where users can showcase match stats, view local leaderboards, and join open public games hosted by players nearby.
4. Comprehensive Figma Design System
Built a scalable UI kit using Figma Auto Layout, component variants, light/dark mode surfaces, consistent typography, and interactive prototypes tailored for seamless developer handoff.
Design Process & Workflow
Stage | Process & Deliverables |
1. Discovery & User Flows | Mapped end-to-end user journeys for both individual players booking pitches and organizers gathering teams. |
2. Wireframing | Created low-fidelity layouts to validate information hierarchy on stadium profile cards and booking summaries. |
3. UI System & Design Tokens | Defined color palettes, typography scales, iconography, button states, and form controls using Figma Auto Layout. |
4. High-Fidelity Prototyping | Built interactive clickable prototypes in Figma demonstrating micro-interactions, map gestures, and checkout confirmations. |
Key Impact & Results
"Designing Tartan in Figma provided a production-ready, highly intuitive blueprint that enabled a smooth development rollout on iOS and Android—delivering a 4.5-star user-rated sports booking app."
Production-Ready Handoff: Delivered 100+ responsive Figma screens complete with edge-case states, components, and interaction notes.
Simplified Booking Flow: Reduced the user booking journey down to a 3-tap action sequence.
Scalable UI Architecture: Easily expanded the layout across multiple sport formats and varying court duration rules.
Tools Used
Design & Wireframing: Figma
Design Systems & Specs: Figma Auto Layout, Variables & Components, Interactive Prototypes
User Experience: User Journey Mapping, Mobile UI Benchmarking
