Tactics Board App Development for E2C
We created an online interactive board that enables customers to design soccer drills, strategies and line-ups.
Easy2Coach (E2C) is a German company that provides software products for football players, teams and trainers. Their main products are Team Manager, Training App and Tactics App which simplify user experience in terms of organisation and planning. We helped the company develop a new interactive Tactics Board App for both mobile and web that lets customers design individualised soccer strategies and animations.
Objective
The existing app was based on Flash, but browsers ended support for this legacy technology in late 2019, and so E2C needed a partner to develop a new enhanced version of the app using web technologies. Rebuilding the app with more features and settings was part of our plan to enhance user experience.
Challenge
Translate the existing Flash-based experience of interactive drawing with great extent of customisation capabilities and smooth animations to the web with its limitations and cross-browser behaviours.
Solution
Initially we chose fabric.js as a canvas library with a great many out-of-the-box functionalities. We soon realised, however, that it would not meet business requirements so we built a custom canvas library and worked with “under the hood” DOM objects to achieve the performance, functionality and smooth animated transitions required. We also used Angular and took a cross-platform approach so the entire app could be easily distributed for web, Android and iOS.
Tactics Board
The soccer strategies app has hundreds of different icons and objects for various activities like passing, dribbling, shooting at goal and many more. It is easy to map all the possible variations and edit them later as well. All objects are interactive and highly customisable - move, resize, rotate, change colours, line types and more.
Animation Tool
Rearranging the different objects and players on a scene-by-scene basis, the end users are able to present every tactical sequence or drill and help their players visualise it more clearly.
Users need to log in or register to be able to save boards, animations and create personal folder structure.
Results
Overall, our efforts were focused on the creation of the interactive tactics board and the animation tool, successfully replacing the existing one based on legacy technology. The online web board app now gives users the chance to make modifications in real time and has expanded functionality. The product has been further enhanced with extensive customisation options.
The application is available for the web as well as for both iOS and Android.