An Article

Athletic Apps: How To Design Interfaces for Sports

Ayana Campbell Smith By Ayana Campbell Smith // 1.29.2021

Sports technology is a massive global industry with an estimated worth of $9.8 billion in 2018. Fitness tracking apps prevail. Esports continues its meteoric rise. And the use of data in professional sports helps with better understanding and enhancing athlete performance on and off the field. These are just a few of the signs pointing to an industry with no intention of slowing down soon. As such, the supporting interfaces and teams who create them must adapt to match the rapid pace of growth.

Let’s dive into the similarities, key differences, and tips to consider when designing the products and interfaces that keep the game going.

What Are The Similarities Between Sports App and Traditional App Design?

Designing for sports apps offers many similarities to traditional product design:

Data-Driven

Like most business intelligence applications, sports interfaces are driven by data. They provide users with a variety of useful data points to draw valuable insights from. Tables, charts, and other forms of visualization must be designed to present potentially complex data in a way that users easily understand.

Power Users and Information Density

Power users will have more advanced needs than novices or casual observers. For example, compare the needs of the average college football fan to those of an on-air sportscaster. Both have a vested interest in knowing the details of a game. But the latter benefits greatly from increased information density and the corresponding ability to quickly review and analyze more data in a single view. Information density must be properly balanced to accommodate the unique needs of all user types.

Jobs to be Done

You may be running errands and want to check the latest scores. Or you’re out with friends and you settle a debate by looking up an obscure stat from the early 90s.

Users come to sports apps with very specific tasks to accomplish. Whether it’s checking what time the game starts, who’s playing, how certain players are performing, or the current standings, a seamless experience is required to keep users satisfied and coming back for more. An app’s ability to provide this will go a long way in building a loyal user base.

What’s Different With Sports App Design?

The similarities will help you get in the game, but the differences will require additional skills to excel with these sorts of apps.

Designing For Real-Time

There’s less than a minute left in the big game and you can hear your neighbors shouting about something, but your app still shows your team down by 1.

With events happening in real-time, you must design interfaces that can handle the prompt delivery of important information. For the fans and industry professionals who view their favorite sports as a religion, any delays or failure to deliver on this need would be a cardinal sin.

Access to real-time data also lends itself to creating engaging fan experiences. A great example is the US Open Sessions — an experimental project that turned live tennis data collected via the IBM Cloud into real-time music paired with fun animations.

More Creative License

From FIFA to the NBA to the Olympics, sports design is notorious for pushing creative boundaries. And with sports apps epitomizing gamified experiences, they present an excellent opportunity for added creative expression. Teams and leagues all have distinct branding, logos, and palettes, so you can really have fun creating a unique design approach that sets your interface apart from the competition.

Source: 1 | 2 | 3

Balancing Many Disparate Pieces

On the flip side, those same design elements that make teams and leagues unique can also make achieving overall interface cohesion difficult. How will you approach balancing disparate pieces?

Another potentially difficult aspect to contend with is the sheer number of assets involved with sports data interfaces. Let’s run some numbers, shall we? There are approximately 130 football teams in the NCAA and each team can have as many as 125 players on their roster. That equates to over 16,000 assets for photos alone. When dealing with quantities this large, a sustainable strategy is integral for the creation, organization, and maintenance of assets.

Multiple Uses

No task is too small or insignificant for the passionate sports fan. From checking the latest game updates on the go, to filtering through stats and data tables ahead of a fantasy draft, each move is equally important. Sports apps must be designed with multiple usage contexts in mind to ensure an optimal experience from mobile to desktop and every device in between.

Unpredictable Outcomes and States

Designing for sports means preparing for the unpredictable. Weather delays, injuries, postponements, and cancellations are just a few of the uncertainties to contend with. As such, designing for all possible outcomes, their various associated states, and ensuring all the pieces work well together is a must.

More Than Entertainment

Just because sports are fun doesn’t mean these interfaces should be taken any less seriously than an enterprise application. Sports are big businesses fueled by passionate fans who deserve a good experience – even if it’s just a hobby.

Tips for Designing Sports Apps

Now that we’ve covered the similarities and differences between sports apps and more traditional interfaces, let’s dive into some tips and considerations for designing an optimal experience.

Prioritize Data Legibility and Functionality

With most sports apps being heavily data-driven, data legibility and functionality must be a top priority. Flashy charts and punchy animations are useless if the data can’t be clearly understood by viewers.

A solid foundation starts by ensuring you’re choosing the most appropriate chart styles to convey the data being presented. Beyond that, core elements including effective typography, clear labels, and appropriate contrast will go a long way in bolstering clarity.

If you’re in need of additional guidance, Google’s Material Design Guidelines offer a great rundown of core tenets of effective data visualization design.

To Break the Mold or Not?

Every sport carries a certain history, but that doesn’t mean the tone of your interface has to align perfectly with it. With a bit of research and competitive analysis, more informed decisions can be made about the direction of your design. An important question to answer here: will you decide to fit in or will you break the mold creatively?

Compare the design directions for Golf to the 2016 Premier League rebrand for example. The former uses serifed typography and a minimal palette that matches the sophistication and legacy of the sport. The latter, however, sets a new standard by using bright colors and dynamic shapes to push the boundaries of what a sports brand can be. Despite their differences, both design directions succeed in exuding a certain level of polish and professionalism.

Cross-Platform Design

Advancements in technology have given fans and industry professionals increased access to their favorite sports like never before. Gone are the days of having to park it on the couch to catch the latest game. Now we can watch from home or office, on-the-go, and even at 30,000 ft. As such, a cross-platform design approach must be a top priority to meet users where they are with a consistent experience, no matter the device.

To avoid inconsistencies, take inventory of the most important features to ensure they aren’t overlooked in the cross-platform design shuffle. Remember – reduced screen real estate shouldn’t equate to a reduced feature set, and limiting features on certain devices will only frustrate users. Iteration will be required (especially for tricky features like mobile charts and tables), but with consistent experiments and testing, you’ll be able to score the perfect solution.

Caution When Redesigning or Updating Features

Interface updates provide the opportunity to reinvigorate stale experiences, address issues, and explore new feature additions. But when facing an update initiative, removing features is a dangerous game. This is especially true when impassioned sports fans are involved.

When Nike+ Running redesigned its app in 2016, it faced a major backlash from users blindsided by the overhaul. Many were dismayed to find favorite features had been removed including some related to performance tracking and achievements. For these users, the app was much more than charts and numbers on a screen. It served as an extension of themselves and the weeks, months, and even years devoted to hard work and dedication. So, to have these associated metrics wiped away without warning served a personal blow.

The moral of the story: Ensure you have a thorough understanding of how your app is being used before beginning any redesign effort. Reviewing analytics and user stories are both great ways to get a clear picture. And if updating or removing features is a must, do so with caution and always ensure your users are well-informed about the impacts of upcoming changes.

Balancing Information Density

When designing interfaces, determining the appropriate levels of information density is vital. Too much information on a screen can easily overwhelm new or casual users. But opting for too little will hinder power users who know exactly what tasks they need to get done and how to do them. How does one satisfy the differing needs of these user types?

One approach is offering users a means for customizing the interface to meet their needs. This could include smart filtering, configurable layouts, and intuitive navigation throughout. With these options, power users are granted the freedom to quickly adapt the interface as needed.

Additionally, you can expedite the progression from new user to power user via onboarding. Use this method to first determine a user’s starting proficiency level and then progressively introduce more complex features over time. Doing so ensures they aren’t initially overwhelmed as they familiarize themselves with the interface. As they become more familiar, information density can be tailored to match their evolving needs

Handling Assets

It’s safe to assume you may not have access to (or usage rights for) many assets including player photos and team logos. While gaining access is possible, professionally sourced assets will most often cost you a pretty penny. And even with purchased assets, consistent quality isn’t guaranteed. If you’re on a budget, a creative solution will be required to bridge the gap. There are a number of routes you can take, each with its own pros and cons.

Custom Asset Creation vs Leveraging Existing Assets

One option is going the custom route and creating or outsourcing the assets to meet your specifications. While this approach is a great way to ensure brand cohesion, it can also be costly and time-consuming. And when the time comes to redesign you’ll likely have to revise or completely redo all of the assets. This becomes an increasingly difficult undertaking as the size of the application grows.

Another solution is leveraging assets that already exist. For example, with a little ingenuity, social media avatars can be used in place of official player photos. And team color hex values can be used to programmatically generate assets if access to logos or brand elements is limited. This approach is a great example of working smart and although it’s not a perfect solution, it provides a good balance between cost and effort. Whatever the approach, the decision you make should be mindful of balancing costs, timelines, and ease of maintenance.

The future for sports and technology shines bright, and with it comes a world of opportunity.  With these tips, you’ll be able to design fun and engaging interfaces for sports fans and professionals alike.


Next Up

Designing Links: Tips for Implementing a Fundamental Piece of the Web

Ben Stankich By Ben Stankich // 12.23.2020

Because links are one of the primary interactions we have online, website link design is of great importance. Read our comprehensive guide now.