Alliance of American Football

Mobile App

1.x Screen 1.png
1.x Screen 2.png
1.x Screen 3.png
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 Screens.png

MVP release, with animated game, schedule, shop (web-view) and tickets (web-view) remain.

Original Screens

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.

Animated Game Screens.png

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.

1.1.1 Live Game Blackout with NO Concurr

Original CTA.

1.1.1 CTA - MiniGame.png

Made the CTA buttons resemble the buttons in the actual game.

1.1.1 CTA - MiniGame Pill Btn.png

Mini-game CTA to give fans a taste of what they can do in the real game.

1.0.4 Home - Live Game with Game Data an

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.

Schedule Cards Different Sizes.png

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.

1.0.4 Home - CTA Expansion Full Schedule

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.

1.0.4 Home - Animated Game Card.png

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.

Card-Home-preCast.png
Card-Home-Feed-Default.png

Live game card - default thumbnail.

Animated game card.

Card-Home-Standings.png

Standings card

Card-Home-Game-Final.png

Game final card

Card-Home-Feed.png

Live game card - feed thumbnail.

Card-News-TopNews.png

Top news card

Card-Home-Upcoming.png

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.