Case studyFanfinity

Fanfinity: building fan engagement through technology, data and immersive digital experiences

Fig. 01Product film · Fanfinity for the Saudi Pro League

I led product on Fanfinity, a native iOS app that gives football fans a digital home for the passion they already bring to their clubs. We built it in SwiftUI and Swift, and treated design, features and engineering as one product problem rather than three separate workstreams.

We designed the app for supporters of Saudi Pro League clubs. The entire interface adapts to each fan's chosen team whilst keeping a single, cohesive design language, and everything (live match experiences, merchandise, fantasy football, augmented reality) lives in one place so each touchpoint reinforces the bond between fan and club.

Project length

2024–2025

Investors

Sanabil Investments (PIF)

Role: Head of Product
Platform: iOS (SwiftUI)
Market: Saudi Pro League fans
Scope: Strategy, design system, architecture

01Research

User research and discovery

We began with an analysis of contemporary football fandom, focusing on the fast-changing dynamics of the Saudi Pro League. Through surveys, interviews and behavioural studies, we identified the insights that shaped our design approach.

We found that modern football fans want immediacy and exclusivity from their digital experiences: platforms that build emotional connection through personalised content and interactive features, not just deliver information. Fantasy sports, digital collectibles and social viewing have changed what fans expect a football app to do.

We discovered that Saudi Pro League fans span traditional local supporters and a growing international audience drawn by high-profile signings. That duality was our hardest design problem: an experience that resonates across cultural boundaries whilst keeping each club's identity authentic.

86%

Check live updates on mobile

3×

Fantasy uptake after star signings

67%

Retention lift from social features

8×

CTR on exclusive notifications

Our research found 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.

01Live Engagement Behaviour · Match Day Research

In our interviews, international fans drawn by star signings wanted authentic club culture experiences, whilst local supporters sought digital preservation of traditional fan rituals.

02Cultural Duality · Fan Demographics Study

In our market research, fantasy football participation increased 3x after high-profile player arrivals, with fans wanting simplified, mobile-first experiences over complex web platforms.

03Gaming Integration · Fantasy Sports Analysis

Our research found younger fans (18-25) spend 4x more on digital collectibles and exclusive merchandise when connected to memorable match moments.

04Digital Commerce · Monetisation Research

Our research found social features that enable live reactions and group watching experiences increase app retention by 67% during match days.

05Community Features · Social Behaviour Study

In our market research, personalised content based on favourite players and preferred match highlights increased daily active usage by 45%.

06Content Personalisation · User Preference Analysis

Our research found AR features for virtual stadium tours and player interactions drive 2.5x higher engagement amongst international supporters who cannot attend matches.

07Immersive Technology · AR/VR Research

In our testing, push notifications with exclusive content and time-sensitive offers achieved 8x higher click-through rates than generic match reminders.

08Notification Strategy · Engagement Metrics

Our market research found multi-language support with culturally adapted content increases international user acquisition by 120% across key markets.

09Localisation Impact · Global Reach Study

Our research found integration with local payment methods and loyalty programmes drives 3x higher conversion rates for in-app purchases.

10Payment Systems · Transaction Analysis

02Personas

User personas and journey mapping

From our research, we developed three primary personas that guided 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 fast, social interactions and gamification.

Our journey mapping revealed where emotional engagement peaked: during live matches, on discovering exclusive content, and whilst taking part in community activities. Those moments drove our information architecture and feature prioritisation, so the high-emotion parts of the app got the most design attention.

Characteristics & needs

Traits

Season ticket holderAttends every matchDeep club knowledgeCommunity leader

Core needs

Exclusive content
Behind-the-scenes access
Community features
Historical stats

Emotional journey map

Pre-Match

85%

Checking team news & lineups

Match Day

100%

Live updates & community chat

Post-Match

70%

Analysis & discussion forums

Off-Season

60%

Transfer news & club updates

03Architecture

Information architecture

03·01

Structural foundation

I designed Fanfinity's information architecture as a hub-and-spoke model, with the home feed at the centre connecting each feature module. Users keep their context whilst exploring different parts of the app, 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.

03·02

Navigation strategy

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.

We used sheet presentations for detail views and full-screen covers for immersive moments, creating a clear hierarchy of information. Users always understand where they are in the app, with natural escape routes back to familiar territory.

Fig. 02Router-based navigation holding state across transitions

04Design language

Design principles

04·01

Adaptive team identity system

We built an adaptive theming system that transforms the interface based on the user's club, a complete visual environment reflecting each club's identity, not just a colour swap.

Our colour extraction analyses team assets in real time and generates dynamic palettes with reliable contrast, so personalisation never costs readability.

04·02

Typography & visual hierarchy

We chose Geist as the primary typeface for its mobile readability and a variable weight system that carries both authority and approachability.

Custom display fonts like SlamDunk add personality to specific moments, whilst Aoi Mono handles technical displays, keeping numbers aligned in statistics and timers.

04·03

Motion & microinteractions

We tuned animation to match each moment's energy - subtle eases for navigation, spring animations for playful interactions, and dramatic reveals for special occasions.

Shimmer effects, parallax scrolling and particle celebrations hold 60fps through Metal shaders and Core Animation optimisations, so the polish never makes the app feel slow.

Fig. 03The dynamic colour system adapting to three different club identities

05Features

Inside the app

05·01 · ARKit · RealityKit

Augmented reality experiences

We built location-aware and image-triggered AR experiences with ARKit and RealityKit, placing 3D content in real-world environments whilst keeping performance steady across device generations.

We preload 3D assets based on a user's proximity to AR zones, and degrade gracefully on older devices: when AR capability is limited, fans get 2D alternatives rather than nothing.

Fig. 04AR experiences built with ARKit and RealityKit

05·02 · Commerce

Merchandise store

In the store, we set out to create desire through design. Product presentations use video backgrounds and dynamic lighting for a premium showcase feel, and the Lightning Deals countdown timers synchronise with the backend so every fan sees the same deadline.

We designed the checkout flow to remove friction: Apple Pay integration and saved preferences streamline purchase completion, and order tracking sends real-time updates through push notifications, keeping fans engaged beyond the initial purchase.

Fig. 05Product showcase, Lightning Deals and checkout flow

05·03 · Loyalty

Memberships

We designed digital membership cards that adapt to tier levels - Bronze shows subtle gradients, Gold features shimmer effects, Diamond displays animated holographic backgrounds. Each card carries 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.

Fig. 06Membership cards adapting to Bronze, Gold and Diamond tiers

Fig. 07Pack opening: 3D card flips with three rarity tiers

05·04 · Collectibles

Card packs

We built pack opening around anticipation, with 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.

05·05 · Game

Fantasy

We designed the lineup builder as 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.

Fig. 08The lineup builder: player cards dragged into formation

Fig. 09Stadium tours, meet-and-greets and VIP packages

05·06 · Real world

Experiences

We gave each experience type its own visual language - stadium tours show panoramic videos, meet-and-greets feature player imagery, VIP packages display luxury aesthetics.

06Engineering

Under the hood

Behind every smooth animation and instant transition sits architecture we built for performance at scale. This section covers the engineering decisions that made the creative vision hold up in production.

From memory management that keeps the app responsive during peak moments to caching that delivers content instantly, we relied on these foundations to make the experience feel effortless whilst handling real-time data, high-resolution media and thousands of concurrent users.

06·01 · State

Data flow & state management

We built the data architecture around a unidirectional flow: centralised managers hold shared state whilst view-specific models handle local data. That keeps features consistent, prevents unnecessary re-renders and keeps the app fast.

We manage state with 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 shows the 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 cache frequently accessed resources, including team assets, player images and video content. The `VideoResourceManager` singleton coordinates video playback across the application, preloading content based on navigation patterns and automatically managing memory. The multi-tier cache combines in-memory storage for immediate access with disk persistence and prefetching that anticipates where users go next.

Network synchronisation uses optimistic updates - the UI responds immediately and reconciles with the server afterwards. When users make predictions or purchases, the screen updates instantly whilst background services sync with the backend, with conflict resolution that preserves user intent whenever possible.

View layer

SwiftUI Views@StateObject@ObservedObjectView Models

State management

TeamManagerAuthServiceTransitionCoordinatorObservable Objects

Cache layer

NSCacheDisk StorageVideoResourceManagerImage Pipeline

Network layer

Optimistic UpdatesConflict ResolutionBackend SyncWebSocket Events

Data flow ↓ unidirectional

06·02 · Foundations

Technical implementation

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 cut boilerplate and simplify state management. Preference keys enable adaptive layouts.

Asynchronous architecture

Swift's structured concurrency with proper cancellation handling, so abandoned screens stop fetching instead of wasting battery. Actors protect shared state from races; MainActor keeps UI updates on the main thread.

Security & privacy

Keychain storage with biometric authentication. Certificate pinning stops traffic interception, whilst privacy-preserving analytics respect user data.

06·03 · Code

Architecture showcase

MembershipCardView.swift

1struct MembershipCardView: View {
2    @State private var revealPlayer: AVPlayer?
3    @StateObject private var teamManager = TeamManager.shared
4
5    var body: some View {
6        ZStack {
7            if let revealPlayer = revealPlayer, !hasPlayedReveal {
8                TransparentVideoPlayer(player: revealPlayer)
9                    .manageVideoPlayback(player: revealPlayer)
10            }
11            // Card content with sophisticated layering
12        }
13    }
14}

We componentised the codebase so each feature module keeps clear boundaries whilst sharing common utilities. The membership card component, for instance, encapsulates complex animation logic whilst exposing a simple interface that accepts configuration parameters.

We repeated this pattern of encapsulation with clear interfaces throughout the codebase, which let the team build features in parallel without losing consistency.

VideoResourceManager.swift

1class VideoResourceManager {
2    static let shared = VideoResourceManager()
3
4    private var assetCache: NSCache<NSString, AVURLAsset> = {
5        let cache = NSCache<NSString, AVURLAsset>()
6        cache.countLimit = 10
7        cache.totalCostLimit = 100 * 1024 * 1024  // 100MB limit
8        return cache
9    }()
10}

We designed video resource management around a hard iOS constraint: memory. The cache caps both item count and total size and cleans up automatically, rather than letting video assets exhaust the device.

The singleton centralises resource coordination, whilst the cache limits hold even when users navigate rapidly between video-heavy sections.

UIImage+Extensions.swift

1extension UIImage {
2    func dominantColor(identifier: String) async -> Color {
3        // Intelligent sampling and caching
4        guard let inputImage = CIImage(image: self),
5              let filter = CIFilter(name: "CILanczosScaleTransform") else {
6            return .clear
7        }
8        // Processing pipeline with performance optimisations
9    }
10}

Our colour extraction underpins the adaptive theming. We use Core Image filters to sample images efficiently and determine dominant colours whilst keeping the UI responsive.

We cache extraction results to avoid redundant processing, with thread-safe operations keeping concurrent requests consistent.

06·04 · Patterns

Design patterns & architecture

protocol

Protocol-oriented design

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

coordinator

Coordinator pattern

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

repository

Repository pattern

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