Tactics Board App Development for E2C
We created an online interactive board that enables customers to design soccer drills, strategies and line-ups.
Services
- Architecture
- UI/UX
- Front-end
- Mobile
Duration
Project overview
Technologies
AngularBack-end
Fabric JSFront-end
IonicMobile
The objective
Legacy technology modernization
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.
The challenge
Interactive experience transformation across extensive range of devices
Translate the existing Flash-based experience of interactive drawing with its broad range of customisation capabilities and smooth animations to the web with its limitations and cross-browser behaviours.
The solution
Bespoke library development
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 using and interacting with DOM objects "under the hood" to achieve the performance, functionality and smooth animated transitions required. We used Angular and Ionic frameworks 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.
Main challenges
⯈What we did
-
- Outdated technology
- Developed a custom library to ensure smooth animations and interactions on multiple types of devices.
-
- Large volume of customizable assets
- Mapped the entire library of objects, modified them to be easily altered by the user and focused on performance optimization.
-
- Smooth interaction on multiple devices
- Designed the user interface of the application and considered how it would be adapted to fit different screens.
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.