Join-a-game Mobile App: Keep Your Football League at Your Fingertips

Fixing a Five-a-side Match is No Sweat!

join game mobile app header
  • Organize a match
  • Search and join a match
  • Hand-pick players to your liking
  • Private/public matches toggle
  • Rate the players in your game
  • Measure your success globally

Context

Client

A French company IPLAY approached CodeTiburon with a concept of a social networking app that will help find or create a community of football players and organize Five-a-side matches.

The challenge

The application had to be designed from scratch and included an entire development cycle: ideation – prototyping – UI/UX – development – production.

Our primary challenge was to work out universal designs that would look and feel natural on both iOS and Android platforms.

The app’s business logic was also a matter of importance, in particular, the social approach meant implementing an adequate system of ranking and assessment.

Solution

Interactive design

The app is a virtual platform for soccer players. It’s a search engine, a schedule tool, and a networking app all rolled up in one. The participants cast themselves in three primary roles:

  • Game seekers
  • Game organizers
  • Player assessors

Game seekers search games in a particular location or nearby and join in.

Game organizers schedule a match and invite players from their network or volunteers in the vicinity. They set up the time, location, and level.

Player assessors rate players after each match and get their own rating against a custom scale. This algorithm allows to build a global hierarchy of players. The more matches you play, the better are your chances for higher ranking.

Features

Register / Log in

A user registers via facebook account or phone number. They select a location where they want to play. Logging-in is permanent, like in FB.

User profile

The profile includes a picture, name, age, location, global evaluation and ranking, average skill and behavior rating.

Invite friends to play

Users can invite their Facebook friends and smartphone contacts to download the app, register and join a game.

Organize a match

A user can organize a new match by creating a title, defining the date, time, duration and location. The number of players can be altered from 4 x 4 to 11 x 11, five-a-side being a default setting. Toggle between ‘public’ and ‘private’ to make the announcement visible/invisible outside your network. A ‘virtual player’ is a placeholder for a real non-registered participant (can be added by an organizer).

Receive an invitation

In case an invitation is sent to join a match, a user gets notification and can see the details of a sender, match specifics, and a list of participants. He/she then accepts or turns down the invitation.

Find a match

The feature uses geolocation to show open invitations nearby. Alternatively, you can type in a city/postal code in the search box. If not invited personally, a user may still enlist for a public match. The ‘Join the match’ button will trigger a push notification to the match organizer. The organizer then chooses to approve or decline the candidate.

Evaluation

Evaluate your fellow team players technical skills and behavior within 24 hours after the game and get your own score to base your ranking on. This is a custom feature, a UVP of the current app.

Ranking

A custom algorithm allows users to see their ranking against the app’s global community.

Favorites list

No more need to use a telephone book to contact your friends for the game. Add all your favs to the ‘Favorites’ section and invite them to the next game in one click. Edit the list whenever need be.

Push notifications & alerts

Important elements of user interaction are push notifications and alerts, indicating users’ activity and changes in status, like receiving an invitation, approved/dismissed candidates, cancelled/pending/closed matches, etc.

Technology

The choice of React Native allowed to preserve the native look and feel of the mobile application on iOS and Android devices. Using cross-platform JavaScript APIs considerably reduced the time and resources for the development.

Read also: React Native vs Native. How to Choose the Best Platform for Mobile App Development.

Results

The client got an intuitive and handy solution. The application has passed the quality testing on Play Store and App Store and is attracting its customers. We’re happy to contribute to a good cause of uniting like-minded individuals round the globe.

Technologies

PHP (back-office), React Native (cross-platform iOS/Android)