Fanfinity represents a groundbreaking approach to football fan engagement, seamlessly blending the passion of traditional support with cutting-edge digital experiences. Developed as a comprehensive iOS application using SwiftUI and Swift, this project showcases the convergence of thoughtful design, innovative features, and robust technical implementation to create an immersive platform that transforms how fans connect with their beloved clubs.
The application serves as a digital companion for supporters of Saudi Pro League clubs, offering a personalised ecosystem that adapts to each fan's chosen team whilst maintaining a cohesive design language throughout. From live match experiences to exclusive merchandise, from fantasy football to augmented reality encounters, Fanfinity creates a holistic environment where every touchpoint reinforces the emotional bond between fan and club.
Project Length
2024-2025
Role
Head of Product
Platform
Native iOS (Swift)
Investors
Sanabil Investments (PIF)
Our research phase began with an extensive analysis of contemporary football fandom, particularly focusing on the unique dynamics of the Saudi Pro League's rapidly evolving landscape. Through surveys, interviews, and behavioural studies, we identified several key insights that would shape our design approach.
Modern football fans crave immediacy and exclusivity in their digital experiences. They seek platforms that not only provide information but create emotional connections through personalised content and interactive features. The rise of fantasy sports, digital collectibles, and social viewing experiences has fundamentally altered expectations around what a football app should deliver.
We discovered that Saudi Pro League fans, in particular, represent a diverse demographic spanning traditional local supporters and a growing international audience drawn by high-profile signings. This duality presented unique challenges in creating an experience that resonates across cultural boundaries whilst maintaining authentic club identity.
86% of Saudi Pro League fans check match updates on their phones during live games, seeking real-time stats and interactive content beyond traditional broadcasts.Live Engagement BehaviourMatch Day Research
International fans drawn by star signings want authentic club culture experiences, whilst local supporters seek digital preservation of traditional fan rituals.Cultural DualityFan Demographics Study
Fantasy football participation increased 3x after high-profile player arrivals, with fans wanting simplified, mobile-first experiences over complex web platforms.Gaming IntegrationFantasy Sports Analysis
Younger fans (18-25) spend 4x more on digital collectibles and exclusive merchandise when connected to memorable match moments.Digital CommerceMonetisation Research
Social features that enable live reactions and group watching experiences increase app retention by 67% during match days.Community FeaturesSocial Behaviour Study
Personalised content based on favourite players and preferred match highlights increases daily active usage by 45%.Content PersonalisationUser Preference Analysis
AR features for virtual stadium tours and player interactions drive 2.5x higher engagement amongst international supporters who cannot attend matches.Immersive TechnologyAR/VR Research
Push notifications with exclusive content and time-sensitive offers achieve 8x higher click-through rates than generic match reminders.Notification StrategyEngagement Metrics
Multi-language support with culturally adapted content increases international user acquisition by 120% across key markets.Localisation ImpactGlobal Reach Study
Integration with local payment methods and loyalty programmes drives 3x higher conversion rates for in-app purchases.Payment SystemsTransaction Analysis
Through our research, we developed three primary user personas that would guide our design decisions throughout the project. The "Die-Hard Supporter" seeks deep engagement with exclusive content and community features. The "Casual Fan" wants accessible information and easy participation in trending activities. The "Digital Native" expects seamless interactions, gamification elements, and social sharing capabilities.
Journey mapping exercises revealed critical touchpoints where emotional engagement peaked - during live matches, when discovering exclusive content, and whilst participating in community activities. These insights informed our information architecture and feature prioritisation, ensuring that high-emotion moments received appropriate design emphasis.
Traits
Core Needs
The information architecture of Fanfinity was conceived as a hub-and-spoke model, with the home feed serving as the central nervous system connecting various feature modules. This approach allows users to maintain context whilst exploring different aspects of the application, with the tab bar providing persistent navigation anchors.
We structured the application around five primary sections: Feed, Club, Fantasy, Store, and Membership. Each section operates as a self-contained ecosystem whilst sharing common design patterns and data models. This modular architecture enables independent feature development whilst maintaining systematic consistency.
The home feed adapts dynamically based on match context, transforming from a pre-match experience focused on anticipation and preparation to a live match companion offering real-time engagement opportunities. This contextual adaptation extends throughout the application, with features like the store highlighting match-day merchandise during relevant periods.
Our navigation strategy prioritises discoverability whilst avoiding overwhelming new users. The primary tab navigation provides immediate access to core features, whilst contextual navigation within each section guides users deeper into specific functionalities. We implemented a router-based navigation system that maintains state across transitions, ensuring users never lose their place when moving between features.
The implementation of sheet presentations for detailed views and full-screen covers for immersive experiences creates a clear hierarchy of information. This approach helps users understand their position within the application whilst providing natural escape routes back to familiar territory.
At Fanfinity's core lies an adaptive theming system that transforms the interface based on the user's club. Beyond simple colour changes, it creates a complete visual environment reflecting each club's unique identity.
The colour extraction system analyses team assets in real-time, generating dynamic palettes ensuring optimal contrast and readability for genuinely personalised interfaces.
Geist font family serves as our primary typeface, chosen for exceptional mobile readability and its ability to convey both authority and approachability through its variable weight system.
Custom display fonts like SlamDunk add personality to specific moments, whilst Aoi Mono serves technical displays, ensuring numerical alignment in statistics and timers.
Sophisticated animation systems respond to interactions with appropriate energy - subtle eases for navigation, spring animations for playful moments, and dramatic reveals for special occasions.
Shimmer effects, parallax scrolling, and particle celebrations maintain 60fps performance through Metal shaders and Core Animation optimisations.
Three interfaces demonstrate the dynamic colour system adapting to different club identities
The AR implementation pushes mobile boundaries by creating location-aware and image-triggered experiences. Using ARKit and RealityKit, we built a system that can place 3D content in real-world environments whilst maintaining performance across device generations.
The technical architecture includes sophisticated resource management, preloading 3D assets based on user proximity to AR zones. The graceful degradation ensures users on older devices still receive valuable experiences, with 2D alternatives available when AR capabilities are limited.
The store implementation showcases our approach to creating desire through design. Product presentations use video backgrounds and dynamic lighting effects to create premium showcase experiences. The Lightning Deals section implements real-time countdown timers with coordinated backend synchronisation.
The checkout flow demonstrates our commitment to reducing friction, with Apple Pay integration and saved preferences streamlining purchase completion. The order tracking system provides real-time updates through push notifications, maintaining engagement beyond the initial purchase.
Digital membership cards adapt to tier levels - Bronze shows subtle gradients, Gold features shimmer effects, Diamond displays animated holographic backgrounds. Cards display personalised details (name, number, validity) with NFC-style indicators.
Tier upgrades trigger cinematic reveal animations with particle effects. Benefits appear as expandable cards showing exclusive perks like early ticket access and VIP experiences.
Pack opening creates anticipation through layered animations - Bronze packs use simple reveals, Gold packs trigger full-screen video sequences with dynamic lighting. Cards flip in 3D with haptic feedback, revealing three rarity tiers: Common (dark theme), Rare (silver shimmer), Elite (golden animations with video backgrounds).
Empty collection slots show player silhouettes to encourage completion.
The lineup builder visualises a football pitch where users drag player cards into formation. During matches, cards display live stats with celebration animations for goals and warning indicators for injuries.
Real-time leaderboards use smooth transitions to show ranking changes, with point accumulation visualised through animated counters and progress bars.
Each experience type uses distinct visual language - stadium tours show panoramic videos, meet-and-greets feature player imagery, VIP packages display luxury aesthetics.
Behind every smooth animation and instant transition lies sophisticated technical architecture built for performance at scale. This section explores the engineering decisions that transform creative vision into fluid reality.
From memory management that maintains responsiveness during peak moments to caching systems that deliver instant content, these technical foundations ensure the experience feels effortless whilst handling complex real-time data, high-resolution media, and thousands of concurrent users.
The application's data architecture follows a unidirectional flow pattern, with centralised managers handling shared state whilst view-specific models manage localised data. This approach ensures consistency across features whilst preventing unnecessary re-renders and maintaining optimal performance.
State management employs observable objects that cascade through the view hierarchy, with singletons like `TeamManager` broadcasting changes through Combine publishers. Views observe these selectively, updating only when their specific dependencies change. The authentication flow exemplifies this pattern - when users verify their phone number, the `AuthService` publishes state changes that the `TransitionCoordinator` observes, triggering smooth transitions between onboarding and main experiences.
We implemented sophisticated caching strategies for frequently accessed resources, including team assets, player images, and video content. The `VideoResourceManager` singleton coordinates video playback across the application, preloading content based on user navigation patterns and automatically managing memory constraints. The multi-tier cache architecture combines in-memory storage for immediate access with disk persistence and intelligent prefetching that anticipates user needs.
Network synchronisation employs optimistic updates for immediate feedback whilst ensuring eventual consistency. When users make predictions or purchases, the UI updates instantly whilst background services sync with backends, with conflict resolution that preserves user intent whenever possible.
Performance Optimisation
Lazy loading throughout the interface with multi-tier image caching. VideoResourceManager intelligently preloads content based on navigation patterns whilst respecting memory constraints.
Advanced SwiftUI
Custom view modifiers and property wrappers like @TeamColored and @Persisted simplify state management. Preference keys enable sophisticated adaptive layouts.
Asynchronous Architecture
Swift's structured concurrency with proper cancellation handling. Actor model protects shared state, MainActor ensures UI updates occur on the correct thread.
Security & Privacy
Keychain storage with biometric authentication. Certificate pinning prevents attacks whilst privacy-preserving analytics respect user data.
Swift's protocol paradigm enables flexible composition with type safety. View models conform to observable protocols for reactive UI updates. Service layers use protocol interfaces, facilitating testing through mock implementations.
Composition over inheritance
Router-based navigation separates logic from view implementation. Handles both standard navigation and modal presentations with consistent interfaces, proving valuable for contextual presentations like product details.
Separation of concerns
Data access abstracted behind consistent interfaces. Whether from network, local storage, or cache, consumers use uniform APIs. Enables multi-tier caching with automatic invalidation for performance and data freshness.
Unified data access