Alliance of American Football
Mobile App
Designing the future of sports entertainment
Focusing on MVP
As the beginning of the season drew closer and closer, we decided to focus on the differentiating feature of the app after some serious consideration of the stakeholders and input from Apple.
MVP release, with animated game, schedule, shop (web-view) and tickets (web-view) remain.
Original designs with news, games, teams, video highlights, schedule, teams, shop, tickets and about.
Focusing on the hero feature
Alliance of American Football is the first and only league to make real-time telemetry data available to fans watching the game. With our data, fans can watch a real-time animated version of the live game and predict what happens next.
Home screen focused on showing the animated game, call-to-action to enter the game and schedule.
Improving the Call-to-Action
We wanted to make the CTA to our live telemetry game (preCast) more obvious and engaging. It was an important improvement because preCast was the unique feature we had in the app.
Original CTA.
Made the CTA buttons resemble the buttons in the actual game.
Mini-game CTA to give fans a taste of what they can do in the real game.
Change the CTA text to be more directive and added more flair to the buttons to be more obvious.
Designing for modular components
Once we nailed down the core experience of the app, we started to add minor features and small enhancements into the app. Under the time constraint we were facing, we started to modify the schedule cards and turned the cards into multi-purpose components as a way to introduce new features and enhancements quickly.
We made the schedule UI element into cards of various sizes to adapt to different needs and directions we were exploring. The new schedule cards also laid the foundation for our Action Design System, explore more here.
Expanded CTA section for even more clarity.
Schedule card for future games and CTA for getting tickets.
Schedule card for pre-game and CTA for
watching live stream on the field
Schedule card for different game states and CTA for watching live stream on the field
Schedule card for past games and CTA for watching replays
Rethinking the "home page"
As our app started to mature, we added ever-increasing features and enhancements to reach parity with other sports apps. As a result, we overloaded schedule cards with different CTAs and that became infeasible. It was time to rethink the home page.
Taking cues from apps like HQ Trivia and Apple App Store, we wanted to turn the home page
into a curated portal of cards to help fans find what they want to engage with.
We started with the animated game section.
Creating dedicated cards
With the new card design, we wanted to make sure each card has a section for content and a section for call-to-action.
Our goal was to make each card focus on its unique content and make its CTA obvious and clear.
Live game card - default thumbnail.
Animated game card.
Standings card
Game final card
Live game card - feed thumbnail.
Top news card
Upcoming game card
Bringing it all together
Here is the final interactive prototype for our app. This is the culmination of our design and engineering effort to create something unique yet familiar.