Football Fan App — UI / UX Case Study

Project role: Lead Product Designer & Flutter Engineer
Duration: Jan 2025 – Apr 2025
Platform: Android & iOS (Flutter)
Team: 1 designer (me) · 2 engineers · 1 PM
My scope: UX research, user flows, high‑fidelity UI, Flutter component library, design‑to‑dev hand‑off.

1 · Problem Statement

Casual football fans want one place to track fixtures, compete with friends in trivia & fantasy mini‑games, and brag about their knowledge. Existing apps silo these experiences or hide them behind ads.

Goal: design a clean, game‑ified mobile experience that

onboards users in < 90 s,

surfaces match data & news instantly, and

hooks them with daily trivia / fantasy loops that reward loyalty.

2 · User Flow (high‑level)

Full micro‑flows (match report, squad stats, etc.) are detailed in Section 5.

3 · Information Architecture

Level 1

Level 2

Notes

Home

Trivia, Fantasy, Upcoming Match, News Feed

Dynamic tiles unlock as user gains XP.

News

Retro News, Social Media

Horizontal tabs preserve context.

Schedule

Competitions dropdown → Match List

Match card opens Match Detail (tabs: Match, Report, Highlight, Fantasy).

Statistics

Season Table, Top Scorers, …

5 sibling tabs share a sticky filter bar.

Profile

Stats Card, Friends, Clans

FAB shortcuts: Search Clan, Create Clan.

4 · Visual Language

Token

Value

Rationale

Primary Red

#FF2E2E

Energetic, sports branding, WCAG AA on white.

Dark Navy BG

#0E1A2B

Red pops against night‑friendly canvas.

Typeface

Poppins (600/400)

Rounded geometric forms match playful tone.

Icon Set

Eva Icons · custom line‑icons

Consistent stroke weight, easy theming.

Spacing

8 pt grid

Predictable rhythm across cards & lists.

5 · Key Interaction Flows

5.1 Onboarding ≤ 3 screens

Value prop illustrations (Lottie)

Single CTA → Get Started

Skip option bottom‑left to respect returning users.

5.2 Registration Wizard

Step 1 · Social login ‑or‑ email.

Step 2 · Profile (avatar, nickname, DoB, gender).

Step 3 · Pick favourite team & players (max 5).

Auto‑save at each step → resume if interrupted.

5.3 Daily Trivia Loop

Home → Trivia tile (enabled after onboarding).

5 randomised questions · 5 s timeout each.

Instant feedback (green / red button states).

Result screen with XP, gems, share card.

Logs allow redo via gem spend → retention hook.

5.4 Fantasy Prediction

Pre‑match: choose winner, clean‑sheet, scorers, assists, best performer.

Post‑match: auto grading → points → weekly leaderboard.

5.5 Clan Ecosystem

Public or private clans with entry thresholds (XP, trivia avg, fantasy pts).

Leaderboards (local / global) drive competition.

In‑app chat (Firebase) + invite flows.

6 · Component Library Highlights (Flutter)

Component

Props

States

CTA Button

variant primary/ghost · icon bool

normal, loading, disabled

Stat Card

title, value, unit, color

hover ( web )

Player List Item

avatar · name · position · age pill

favourite ✓

Bottom Nav

5 items · Lottie active icon

badge counts

7 · Accessibility

Color ratios ≥ 4.5 : 1 against white.

Logical focus order; quiz buttons reachable via talk‑back shortcuts.

Alt text on all images / Lottie.

8 · Outcomes & Next Steps

Metric

Baseline

v1 Result

Onboarding completion

—

87 %

Daily active trivia users

—

42 % of MAU

Avg. session length

—

9 min 30 s

Planned: personalise news feed via favourite player vector; add dark‑mode auto‑switch.

9 · Reflection

This project sharpened my game mechanics mindset: balancing reward schedules with clean, minimal UI. Building a reusable Flutter component kit cut engineering hand‑off time by 30 %. Future iterations will A/B test bottom‑nav icon labels and expand accessibility gestures.