Mobile App · Product Design · UX Research

SoccerGOAT

Where Passion Meets Simplicity and Personalization — a soccer companion app and physical display device designed to bring North American fans closer to the beautiful game.

SoccerGOAT Cover

Role

UX Designer Product Designer

Deliverables

Mobile App Design Physical Device Design UX Research

Tools

Figma · Blender User Interviews · Surveys

01 — Background

The Problem

As a soccer fan living in North America, I experienced the challenges that hinder the sport's accessibility and enjoyment firsthand. Soccer trails far behind the NFL and NBA despite rapid growth — particularly among younger, diverse audiences under 45.

01

Fragmented Broadcasters

Soccer content is scattered across CBS, NBC, ESPN, Apple TV, and more — each requiring a separate subscription.

02

Lack of Soccer Culture

In the U.S., only 20% follow soccer vs. 52% NFL and 42% NBA — a huge gap in cultural engagement.

03

Complex Interfaces

Existing apps are cluttered with ads and unnecessary features, making it hard to find key match info quickly.

04

Missed Matches

Busy users miss games due to scheduling conflicts with no simple way to stay updated on the go.

Region
UCL
Champions League
EPL
Premier League
BUN
Bundesliga
LAL
La Liga
SER
Serie A
L1
Ligue 1
MLS
MLS
🇺🇸USA
Paramount+NBC / PeacockESPN+ESPN+Paramount+beIN SportsApple TV+
🇬🇧UK
BT SportSky SportsBT SportSky SportsBT SportBT SportSky Sports
🇨🇦Canada
DAZNDAZNDAZNDAZNDAZNbeIN SportsApple TV+

Soccer content is scattered across multiple platforms — each requiring a separate subscription

Lack of Soccer Culture in North America
Soccer trails NFL & NBA in cultural engagement
Commercialization of Soccer in North America
Soccer's growing momentum in North America
Tourism, Economic Impact and Brand Sponsorships
Tourism, economic impact & brand sponsorship opportunities

Market Opportunity

1.75M

viewers for Messi's MLS debut — the most-watched MLS match in 20 years

795M

minutes watched of Ted Lasso S3 — entertainment broadening soccer's appeal

$5B+

projected economic impact from the 2026 FIFA World Cup in North America

02 — Research

Understanding the User

A survey of 98 respondents explored needs and frustrations with existing sports apps, alongside in-depth interviews to uncover deeper motivations.

98

Survey Respondents

73%

Have Used a Sports App

88%

Prefer Mobile Access

75%

Want Favorite Team Info

Primary Research

I collected quantitative data through a structured survey and followed up with qualitative interviews to understand the deeper motivations and frustrations behind users' soccer app experiences.

Survey Results
Survey · 98 respondents
User Interviews
In-depth user interviews

Synthesizing Insights

Research findings were synthesized into an empathy map to identify what users say, think, do, and feel — revealing the emotional and functional gaps in current solutions.

Empathy Map
Empathy map synthesizing research findings

User Personas

Two primary personas emerged from the research, representing the core user segments: the casual fan looking for simplicity, and the engaged fan craving real-time access.

BS

Bella Stones

22 · Marketing Coordinator · Ann Arbor

I would like to have easier access to soccer related news and knowledge!

Pain Points

  • Overwhelmed by complex apps
  • Too much beginner friction
  • Intrusive ads and pop-ups
RB

Rob Bowen

21 · CS Student · Washington, DC

I would like to experience a better soccer app!

Pain Points

  • Misses matches due to busy schedule
  • Cluttered apps with unnecessary features
  • Hard to quickly find match info
User Persona
User persona profiles

03 — Design Process

From Chaos to Clarity

The design process began with affinity mapping and post-it sessions, evolving through information architecture, wireframes, and low-fidelity prototypes before reaching high-fidelity screens.

1

Affinity Mapping

2

Information Architecture

3

Wireframing

4

Hi-Fi Prototype

Affinity Mapping
Affinity mapping — clustering user insights
Information Architecture
Information architecture
User Flow
User flow diagram
Low-fidelity Wireframes
Low-fidelity wireframes — 12 key screens

Key Features Designed

Personalization

Choose your favourite club, jersey number, and typography to make the app feel like yours.

Morning Newspaper

A daily digest of the latest soccer news, curated around the teams and leagues you care about.

Live Interaction

Post-game sentiment analysis and real-time fan community features keep the experience social.

Integrated Cross-Play

Seamlessly connects with the SoccerGOAT physical display device for in-stadium and at-home use.

One-Click Access

Home team logo shortcuts and a simplified menu bar reduce friction to near zero.

Loyalty & Pins

Earn loyalty rewards and collect pins as you engage, adding gamification to the fan experience.

04 — Physical Design

Beyond the Screen

SoccerGOAT extends beyond mobile — a physical display device designed from initial sketches through multiple 3D modeling iterations, built to sit on a soccer ball and deliver live scores and ratings in real-time.

Hardware

Live Display Device

A compact, soccer-ball-inspired physical device with an embedded display screen. Designed through sketch, foam model, and multiple Blender 3D iterations before reaching the final render.

  • Compact form factor fits on a soccer ball
  • Embedded display for live scores & ratings
  • Green + white + navy brand colorway
  • Connects wirelessly with the mobile app

Design Journey

Sketch → Model → Render

1

Concept Sketches

Initial hand-drawn explorations of form and function, exploring multiple silhouettes.

2

Foam Prototyping

Physical foam models to test scale, grip, and placement on a real soccer ball.

3

3D Modeling in Blender

Multiple mesh iterations refining the organic, tubular form wrapping around the display.

4

Final Render

High-fidelity 3D render with SoccerGOAT brand colors and materials.

Concept Sketches

Concept Sketches
Hand-drawn concept explorations

3D Modeling Iterations

3D Modeling Iterations
Progressive mesh refinements in Blender
Final 3D Rendering
Final high-fidelity 3D render with SoccerGOAT brand colors

05 — Final Design

The Result

A cohesive green-accented mobile app covering onboarding, home feed, live scores, standings, and the fan community — paired with a striking physical device.

High-fidelity Final Design
Create Account · Home Feed · Live Scores & Ratings · Standings Table · Customized Page · Live Display Device

Thanks for reading

Want to see more work?

← Back to All Projects

Available for opportunities

Let's work together)

Sifan Xue

Open to collaborations, internships, and new opportunities.

View Resume
sifanxuecreate@gmail.com
Seattle, WA 98105
WeChat: TONYXUE020711