Real-time fantasy football

Overview

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.

My Responsibilities

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.

User Journeys

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

Information Architecture

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 Design

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.

Interaction Design

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.