NYC FOOTY • 2025Building the first app for the world's largest recreational
soccer club
Designed NYC Footy's mobile app from scratch, giving 50,000+ players across New York City a single place to browse leagues, track standings, and manage attendance
My Role
UX & Visual Designer
Tools
Figma
Key Themes
UX/UI Design, Consumer, User Research, Market Research, Usability Testing, Design Systems
Background
NYC Footy
NYC Footy is the premier adult recreational soccer league in New York City, as well as the largest adult soccer league in the country with thousands of regular players across all 5 boroughs, all year 'round!
Opportunity Areas
Being part of a recreational soccer league is work- Players have to manage leagues, coordinate attendance, and keep track of standings. For a while, NYC Footy has partnered with League Apps to handle these core use cases, however, because the brand and community has seen so much growth, NYC Footy decided to release their own proprietary app.
As a recreational player, and League Apps user, I reached out to NYC Footy interested in helping them ensure that this app would not only uniquely represent the brand, but would have even better usability and room for feature growth
Process/Scope
I worked with the CEO and his developer partner over the course of 6 weeks where I provided research, design concepts, usability testing, and QA through the development cycle.
Research
Version 0
Before involving UX, a freelance developer set up some basic functionality within an iOS application. I offered to audit the build and flag any usabilty issues, as well as offer some tips for visual improvement
An audit of all screens on the first version of the app
Core Flow & Function
The app basically offered a list of available leagues and an egress path out to register with their third party vendor, LeagueApps.
Users were also able to create accounts, filter leagues, and view game schedules
Screen and interaction inventory
Competitor Research
In order to stay competitive, its important to see how the user experience compares on similar apps/services
In this case, there are many other apps that offer recreational sports discovery and scheduling (i.e: Volo, GoodRec, StreetFC)
I audited these apps to see how they handle key flows, such as discovery, and key interactions, such as filtering.
Branding & Visual Identity
In order to establish a design system, I needed to ensure the core components, patterns and colors stayed true to the NYC Footy brand identity. I wanted to make sure the app felt unique and distinct.
I audited the company website, instagram, emails and merch to get an understanding of the overall vibe, which I’d then try to bring into the app.
Design
New User/Registration
I stayed true to the core brand colors and used the signature purple for emphasis on buttons and banners.
Because NYC Footy is a lifestyle company that supports outdoor activity and team-building in various parks with breathtaking views, I wanted to make sure imagery that showcased the experience was prominent as a way to appeal to new users
Signed-out
Signed-out - with bookmarks
League list
Account creation
I wanted to make sure registration was as quick and painless as possible, so opted for a simple email input & confirmation in lieu of a long sign-up form
I used this opportunity to design my own icons and pictograms that would be the start to a new visual library
Sign-in/register
Email authentication
Loading pigeon
Registration Flow
A quick process that involves inputting an email, and confirming
through two-step authentication
Player dashboard
The entire app is structured across four main tabs-
Home, Leagues, Schedule, and Profile
The Homepage is purposed to give the player a quick overview of upcoming games and/or newly posted scores, so they could see a comprehensive overview without clicking into each tab
“Empty” State
Normal State (1 League)
Extra-Normal State (w/ Ad)
League discovery
During any given season, NYC Footy has hundreds of leagues to choose from across various neighborhoods, skill levels, days of the week, and other criteria
It’s important to optimize the list page to highlight key information about each league, in addition to allowing for players to search, sort, and bookmark
League list
Filters
League detail
League Detail
Uses imagery, iconography, and type styling to define hierarchy and highlight key details
Game scheduling
The most common, and important, use case for the NYC Footy App is handling schedules and standings. Because of this, players need to see the upcoming dates/times for all of their games, in addition to the official score of previously played games
We used “T-Shirt colors” as default team avatars which were programmed to match the actual jersey color of each team in the league
“Empty” State
Season schedule - 1 League
Season schedule - 2+ Leagues
Scheduling/Standings
Uses the conventional formatting seen on professional sports apps to communicate wins, losses, and ties
Player & Team profiles
I, like many other players, take pride in my commitment and the time I’ve spent on the pitch, so I introduced a fun feature that allows players to see how many leagues, games, and time played with NYC Footy
Additionally, we added customization to allow teams and individual players customize their avatars (or, “Logos”)
Default player profile card
Customized/v2 Player profile
Team profile
Captain experience
FootyHQ likes to make sure that players have the opportunity to give feedback about their games, which can at times get quite heated!
We implemented a feature for team captains to give a quick rating on each game triggered by a “push” notification
Game rating sheet
(Optional) Tell-us-more
Confirmation
Rate the game
After the game, a sheet appears on the homepage prompting a quick “Yay-or-Nay”, with the option to give more feedback detail, if necessary
Design System
I put together a design system that outlined: Layout grids, breaking points, text rules, colors, iconography, and more
Because the app is supported on iOS, I made a dark-mode version as well
