The Client and Their Brief

Elite Skills Arena are leading providers of football training technology across the globe. They have designed and constructed a wealth of training equipment to help both amateur and professional footballers improve their skills and fitness. They reached out to us as they required a developer that could construct a web and mobile app for their business. The application had to allow the user to view data tracked during training sessions, view local and global leaderboards, compete with friends and view their statistics.

What We Did

We constructed the application using the Angular Framework, paired with Ionic to release builds to web, iOS and Android. The pages and components within the apps were built to match the designs provided by the ESA team. We also constructed a bespoke API to communicate with ESA’s existing services.

Linked User Accounts

As the platform already had a large volume of users and tracked sessions, we decided to create a separate database for datahub specific functionality. This meant that users accessing the new app would first need to register a datahub account. In order to link the new and existing accounts, we requested the user’s existing username during registration. We then constructed an API that bridged the gap between systems, allowing users to fetch and view their profile information, analysis data and statistics. In building the system this way, we were able to create the additional functionality with only minor tweaks to the existing system. This meant that the transition process for staff and customers was as simple as possible.

Analysis Data & Graphs

As per the designs, we created an intuitive interface that allowed the user to view and filter their past session data. This data was presented through the use of a responsive and multi-layered line graph with a list of sessions acting as a key. As a result, selection of a session from the list would highlight the corresponding graph node and vice versa. Each item in the list contained details about the session with a link to view further detail if required. The purpose of the graph was to allow the user to view their progress over time across multiple game types. To keep the interface clear, each game type was represented by a distinct colour. As ESA have a wide variety of different game types and machines available, we implemented filters to allow the user to find data for specific sessions. The filters constructed allowed the user to search by game type, machine type, duration and sessions recorded between dates.

Tracking Health Data

In addition to displaying the user’s session data, ESA requested that we allow users to track their heart rate, steps and the distance travelled during each session. After analysing the current configuration, we realised that this data couldn’t be captured automatically. Instead it would need to be uploaded after the session had been completed. Therefore, we implemented connections to both Healthkit and Google Fit within the app. The reason for this was to ensure that the app could support a wide range of health trackers. Popular providers such as Fitbit and Garmin require the implementation of individual APIs to fetch data, however, they can also be configured to automatically synchronise with Healthkit and Google Fit. It therefore made sense to use the most supported option. This integration allowed us to fetch and store the required health data recorded between the session’s start and end time.

Friends & Leaderboards

Using data from the ESA systems, we created a local and global leaderboard within the app. This allowed users to view the top ten scoring players across different game types. To incentivise the user to improve their score, the leaderboard also displayed the user’s position if ranked outside of the top ten. To allow users to view different leaderboards, we implemented a series of filters including game type, age group, duration, machine and gender. In addition, we also created a notification and invitation system that allowed users to send invites to others. If accepted, the users would be able to see each other from their friends list. From this list, they had the ability to create custom leaderboards to compete with each other.

The Result

We constructed an application that seamlessly integrated with the existing systems provided by ESA. The app is now used by ESA users around the world, allowing them to view analytical data that was not previously available to them outside of the centers. This data is allowing their users to view their progress over time, helping them to determine areas where they need to improve. The app has provided ESA with a platform to continue engaging their users as it evolves and expands over time.

A Word From The Client

Working at Elite Skills Arena, we chose Square Flame to design and develop our applications. Ryan and the team were a joy to work with from start to finish, and it was brilliant seeing our initial ideas come to life. Would highly recommend.

Sam Roots, Elite Skills Arena

Get In Touch

Thank you for your interest in our business. If you have any questions about our services, a project you’d like us to help with, or if you just want to say hello, please don’t hesitate to get in touch. We look forward to hearing from you!