If you’re a sports fan who likes to stay up to date on the latest scores, trades, matches, and more, chances are that at one time or another, you’ve checked out TVA Sports to get your fix.
As the biggest French-language sports broadcaster in North America and the #1 destination for NHL, MLB, and MLS content, TVA Sports has a loyal, sizeable audience, and tons of relevant content that it broadcasts on a daily, hourly, and even minute-by-minute basis.
They reached out to us because they needed a way to deliver this vast quantity of news, stats, and live-streaming content quickly and efficiently through an app that would work flawlessly on both iOS and Android. The mobile app that they had released previously simply wasn’t cutting it in terms of functionality, performance, or design, so it was time for a serious upgrade. Read on for the scoop on how it all went down.
TVA Sports chose Osedea based on our React Native experience, which they knew would allow them to bring to market a high-performance, aesthetically pleasing app to both iOS and Android platforms using a common code base (which ends up being less expensive than coding an app without using React Native, and also means less app maintenance and support - both important cost- and time-saving measures).
But what TVA quickly realized was that we were also uniquely equipped to build them an app that would offer a remarkably smooth user experience. This turned out to be crucial, given that users would be able to view so many different types of information and content from within the new app.
From the very beginning of the project, the TVA team shared with us that they immediately knew they had put the creation of their revamped app in capable hands. It was clear we were going to work well together, and even have a lot of fun in the process!
TVA Sports wanted to deliver better, faster stats and news than their original app did, but even more importantly, their primary goal was to minimize the elapsed time between the occurrence of a live event (such as a goal or fault) and its related app notification, creating a sense of immediacy that would be superior to what their competitor’s app offered. This would position TVA as the most reliable sports news broadcaster around. So, we had to work closely with their team to devise an innovative and reliable way of fetching and distributing stats.
Notifying thousands of users of specific in-game sports events within just a few seconds of them happening, and doing this for several concurrent sports games, was of course a challenge - but it was an exciting one. In order to make this kind of in-app “reporting” possible, we worked with state-of-the-art infrastructure and scalable professional services such as Amazon SNS.
Creating the users’ subscription interface and working with several sources of truth (as notifications for news and game events are pushed from separate infrastructures) was also a great experience. The TVA app now allows users to “subscribe” to receive updates on specific teams or sports, for a personally curated feel.
We also worked hand in hand with the TVA team in crafting a beautiful and efficient experience that guides the user through a wide range of contextual sports content. Whether users are navigating from one news post to another, switching from news to stats, or simply opening up the app to go directly to matches or player statistics, there’s no chance of getting lost or confused. The information architecture, design of the stats tables, and layout for the homepage newsfeed were all carefully planned out and meticulously executed.
There were a few major hurdles involved in this project - the first being that we had to connect to a Direct TV feed via several different online TV providers. Working with a variety of authentication infrastructures and integrating them into the functionality of the mobile app was tricky as well, but we made it happen!
From a design standpoint, one of the most important aspects of our work on the TVA app was ensuring that the stats tables were easy to read across every type of sport, and on every screen size.
Sorting the most relevant stats, ordering them properly, and determining the best font family, size, and weight was the result of extensive research, discussion, and trial and error - and finding the right abbreviation or acronym for the columns in the stat tables was the icing on the cake. Once these elements of the app had been tested and decided on, we knew we had a winner on our hands.
Branding-wise, finding a creative way to display all the news and stats that reflect TVA’s brand, while standing out from the other sports apps out there, was an iterative process that we handled like champs. TVA Sports even changed their branding when we were working on the app with them, so needless to say, we had to be ready to make adjustments on the fly.
To give TVA Sports plenty of flexibility in terms of what information appears within the app for specific sports, matches, and teams, we focused on API-Driven Development. This involved giving the client two ways that they can use an API to control what users see when they open up the app.
The first is the ability to insert dynamic tabs into the app homepage at any time, offering users a new perspective on the sports event(s) of the moment. For example, during the NHL Finals or the FIFA World Cup, the TVA team can easily add related content to the app. The second is the ability to alter what shows up in the sports stats tables (making them more or less detailed by removing or adding certain rows and columns) - all from an easy-to-use backend.
TVA Sports had a pretty clear vision for what they wanted in their new app, but as we do for all our clients, we also proposed additional features that we felt would enhance the user experience. For example, we suggested a more graphical way of displaying one team’s overall stats, as well as adding links to related content at the bottom of every news article, inciting users to explore more of the topics that interest them, and linger longer inside the app.
We also pitched in on optimizing typefaces used in the app, including multiple title and subtitle lengths in a card format that would stay on-brand and respect the image ratios selected by the client. And finally, we inserted a dynamic box into the app that seamlessly serves up the various score types used in different sports, and that can be used for publishing pre-game, live, and post-game statuses.