FanClash is a real-time fantasy football game where an unlimited number of players compete against each other for cash prizes. Users pick 4 players before a match and points are gained by player actions in-game, real-time.
The app was designed, built and deployed within 4 months using Flutter.
Upon obtaining business requirements and running a stakeholder workshop, we promptly began to survey existing customers and customers that use competing products to better understand how they would use our product. We ran qualitative surveys, and card sorting sessions as part of our upfront user research.
Much of the game was based on a previous game by the same company, UltimateFan Live. I drastically simplified the user experience by having fewer screens and fewer actions to undertake. I found that users typically didn’t sit through a match on their devices, but would instead pick their phones up for a few short minutes during a match to check-in and use power-ups. As a result of these findings, thus most of the user experience was centred around having simple actions that can be carried out within a few seconds.
Project Length
4 Months
Platform
Flutter for iOS & Android
As part of the work for FanClash, it was important for both myself and the devs to have a new high-level understanding of what components would make up the screens
Myself and the devs decided to work concurrently due to the strict time limits, the information architecture greatly aided them in building out the backend architecture of the app.
For myself, it allowed me to cut out the “fat” from the previous application and see what the bare minimum required on each screen was.
The UI was designed in Sketch with abstract being used for version control and feedback from stakeholders. Anima from LaunchPad helped me maintain constraints and stacks in my sketch designs, allowing fast and flexible changes on the fly while maintaining component constraints.
Animations were created in After Effects and then used both as videos and animated SVGs (Lottie integration). Dynamic text animations were created in after effects and then hardcoded by the developers.
