© 2019 by Oscar Ko

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.