The Watson ESPN Fantasy Football interactive experience

With contributions by Stephen Hammer, John Kent, Jeff Powell, and Tyler Sidell.

Watson reasons from petabytes of text, audio, and video to bring artificial intelligence (AI) to life through a fantasy football interactive experience. As you are setting your weekly lineup or deciding on tactical moves, summarized evidence and player performance provides player affordances so that you can make quick and informed choices. For your long-term strategic decisions, season long and historical insights are available to help you avoid having to make a desperation move at the end of the season. The interactive experience is available on all platforms including mobile and desktop with continuous availability from anywhere around the world. The Watson Fantasy Football experience provides explainable and easy-to-use experiences that inform rookie to league champion fantasy football team managers. #WinWithWatson #WatsonExperience

In the last part of this blog series, we describe the interactive experience that combines AI with human decision making when setting fantasy football lineups.

Watson Fantasy Football experience architecture

The Watson Fantasy Football experience is an at-scale enterprise solution that puts artificial intelligence into the hands of millions of users around the world. The core design was created in partnership with ESPN using tools such as Sketch and Invision that are described in User interface design. The graphics and designs were the blueprint for the development of the Watson Fantasy Football experience. The application was built using the React framework where code was pushed and deployed by GitLab to IBM Cloud Object Storage. Cloud Object Storage is the origin server for both the IBM and ESPN Content Delivery Networks (CDN). The application is distributed around the world across hundreds of edge servers.

In parallel, the base IBM Fantasy Football system generates Java Simple Object Notation (JSON) files that contain AI insights from our machine learning pipeline. The JSON files are uploaded into Cloud Object Storage and made available across hundreds of edge servers.

Within the ESPN Fantasy Football applications, the React application is inserted into experiences through an iFrame. This gives us the flexibility to write once and run anywhere within native apps. As the iFrame is loaded, AI insights data is pulled from the CDN and combined with ESPN API information. The data and user experience enable millions of fantasy football players to make evidential decisions about their team.

Fantasy football experience architecture

Figure 1. The Watson Fantasy Football experience architecture

User interface design

To design the Watson Fantasy Football experience, we used a few tools and methods to guide our development. Fundamentally, we had to create an experience that would help fantasy football team managers set their lineups every week. During the design thinking process, we continually referenced the problem we were solving to stay user focused. We were able to use cutting-edge AI and hybrid cloud technologies while following the concept of human-centered design.

Human-centered design

Figure 2. The process of human-centered design

While creating our Watson Fantasy Football experience, we followed the three stages of human-centered design.

Stage 1

In the discovery stage, we applied the concept of understanding the user. We analyzed the current state of the ESPN player card by learning how individuals use it to research a player. Then, we explored what information on the existing player card provided the most impact.

Stage 2

Within the scenario mapping and user flow charts stage, we defined the user base. Given the volume of ESPN Fantasy Football users (millions per day), we created three broad personae: a power user, a passive user, and an average user. From these personae, we created a series of scenarios of what would prompt a user to analyze a player, why these scenarios are relevant, and which cases are most important.

Stage 3

In the design iterations stage, we further defined and analyzed our user base. Within the first iteration of design, we examined how a user would start and end their journey within the highest prioritized scenarios from Stage 2. Then, we began framing the design of the site map based on the states within user journeys.

In the second iteration of Stage 3, we defined the initial information architecture and wireframes for each screen within the user journey. When the user experience (UX) design was mature after several more Stage 3 iterations, we began creating the visual design, including color palette, typography, and branding.

Stage 4

At the end of each cycle, we follow the evaluation stage by playing back scenarios and evaluating our work. The evaluation always refers to our initial problem statement of creating an experience to help fantasy football managers pick a weekly starting lineup. Throughout this incremental process, we amended user scenarios and created new user states. At the end of Stage 4, we provided our stakeholders with high-resolution screen mockups. As a result, the design and development teams along with stakeholders co-created our Watson Fantasy Football experience.

Four stages of human-centered design

Figure 3. A depiction of the four stages of human-centered design

The designs from the human-centered design cycle are created through the Bohemian Sketch tool and pushed to InVision for review in the Craft plug-in. InVision allowed us to showcase our designs through quick prototypes.

A Watson fantasy football experience mockup in InVision

Figure 4. A Watson Fantasy Football experience mockup in InVision

Teams and users can interact with the prototype by clicking and tapping the interface. They provided us with invaluable feedback to make the UX more engaging. The use of the comment feature within InVision allowed our design team to focus on user feedback rather than capturing feedback.

Retrieving feedback from users and stakeholders

Figure 5. Retrieving feedback from users and stakeholders

The acceptance of the final design required approval by both IBM and ESPN teams. Internally, the IBM development team reviewed the designs to ensure technical feasibility, scope, and schedule. Finally, the design was approved by ESPN before implementation.

You can watch this video to see a detailed view of the process for creating human-centered design experiences.

Building the Watson Fantasy Football experience

We chose to use the React framework to implement the front-end business logic for the Watson Fantasy Football application. React is an open source JavaScript library that emphasizes component-based development for Single Page Applications (SPA). While at Facebook, Jordan Walke created React where it was first deployed in 2011 on their news feed page. In 2012, the framework was used within the Instagram platform, and was made publicly available in 2013 to developers at the JSConf. One of the key benefits of React is that the framework lets users implement small- to large-scale applications modularly without any decrease in application performance. Being component-based, React stresses code reusability and differentiation between local and global states to prevent unnecessary coupling. With the use of the SPA architecture, React allows for seamless user experiences by not reloading the browser upon visiting different routes within the application. With extensive tutorials and large community support, React has gained a reputation of being relatively easy to learn for new JavaScript developers.

React has many supporting tools that help developers streamline their workflow. One tool that was used for the Watson Fantasy Football experience was the Create React App (CRA) module. This module lets developers quickly set up and run boilerplate code for their React app while handling mundane tasks that can be cumbersome to many developers. These tasks range from the creation of production builds to live updates of a running application without a full restart of the hosting server. CRA does all of this work behind the scenes and lets the developer primarily focus on writing React components. CRA primarily focuses on the React scripts module that enables the React application to perform tasks of creating production builds, starting local environments, running tests, and exposing configurations. In one simple command, CRA bootstraps an initial React project that is ready for developers to extend.

npx create-create-app <app_name>

Next, the CRA performs the following steps:

  1. Checks operating system compatibility
  2. What package manager is being used, such as yarn or npm
  3. Initializes a package.json file with the base dependencies of react, react-dom, and react-scripts

After successfully pulling in the base dependencies, CRA enters the react-scripts module directory and pulls in the dependencies described in the package.json file. React-scripts is arguably the most important aspect of the CRA tool because it is responsible for starting the local environments, creating production builds, and running test scripts. React-scripts use webpack to streamline the tasks. Webpack enables the React application to use Hot Module Replacement (HMR) that allows the application to update in the browser without doing a full refresh of the page. Webpack also works along with Babel to transpile the ECMAScript 6 (ES6) code into ECMAScript 5 (ES5) to provide browser compatibility for browsers not yet using the latest version of JavaScript. The following code example provides a brief code snippet that shows a package.json file that details a list of app dependencies generated by running the npx command.

{
  "name": "fantasy-football",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.7.4",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@typescript-eslint/eslint-plugin": "^2.8.0",
    "@typescript-eslint/parser": "^2.8.0",
    "axios": "^0.19.0",
    "babel-eslint": "10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.5",
    "babel-preset-react-app": "^9.1.0",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.2.0",

    "css-loader": "3.2.0",
    ...

After our base application is created, we can add more components to build our Watson Fantasy Football experience. For example, React allows us to write components from different styles of development. At the time of this writing, there has been a trend to go back to functional components versus class-based components while utilizing hooks to manage state within a React application. While React classes provide clean easy-to-read and maintain code, hooks provide a simpler way of updating the state and reducing the number of callbacks to eliminate duplicate code. The following code shows an example React component.

import React, { useState, Fragment } from "react";

import { useSelector, useDispatch } from "react-redux";
import {useSpring,animated} from "react-spring";

const Onboarding = (props) => {

  const [delay, setDelay] = useState({
    time: 0
  });

  const { time } = delay;

  const Home = useSelector(state => state["Home"]);
  const dispatch = useDispatch();

  const learnMoreToggle = () => {
    setDelay({ time: 2 });
    dispatch({ type: "HOME_UPDATE", data: { onboardingText: "text-close" } });
...

For the implementation of our Watson fantasy football user experience, we used the JavaScript library D3 (data-driven documents) to create data visualizations such as box plot line charts, bubble charts, donut charts, and force layouts. Although there is a steep learning curve for D3, it provides complete control and customizations for many user-centric data visualizations. This customization is not limited to static visualizations but also to the behaviors of graph-like animations. Because D3 is a JavaScript library, we are able to easily integrate the library with the rest of our React framework. The following code shows an example of using D3.

this.svg = d3.select("svg.projections");
let width = +this.width - 50;
let height = +this.height - this.margin.top - this.margin.bottom;
this.g = this.svg.append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

//d3 graph
this.line = d3.line()
              .x(d => {
                   return this.x(d[0]);
              })
              .y(d => {
                   return this.y(d[1]);
              });
...
this.g.append("path")
    .datum(playerMidProjections)
    .attr("class", "line line1")
    .attr("stroke", this.graphColors.mid)
    .attr("stroke-opacity", 1.0)
    .attr("stroke-width", "2")
    .attr("fill", "none")
    .attr("d", this.line);

this.g.append("path")
    .datum(playerMinProjections)
    .attr("class", "line line1")
    .attr("stroke", this.graphColors.bust)
    .attr("stroke-width", "2")
    .attr("stroke-opacity", 1.0)
    .attr("fill", "none")
    .attr("d", this.line);

Watson Fantasy Football experience anywhere

We designed and developed a user experience that is deployed to mobile and desktop platforms for continuous availability around the world. Our user experience had to run in many different native applications on the same code base. As a result, our experience was designed to run within an iFrame and be included within webviews on mobile devices. With the use of the same code base for both mobile and desktop platforms, we had to ensure that our experience rendered seamlessly across many different screen sizes. SASS (Syntactically Awesome Style Sheets) was chosen for our Watson Fantasy Football experience styling and formatting. We overrode the default CRA-based React application from Cascading Style Sheets to SASS with the basic installation of node-sass and updating all references to .css extensions to scss. From here, we leveraged the strengths of SASS so that we could write clean code, use mixins to enable cross-browser compatibility, and nest CSS selection rules. The following code shows an example of how SASS provides flexible styling and formatting.

@import "assets/style/_scss/colors";

.projections-container {
  &.component-container {
    &.facebook {
      .boom-bust-container {
        margin-bottom: 8.35px !important;
        background-color: $ff-ltgray6;
      }
    }
    &.twitter,
    &.facebook {
      .boom-bust-container {
        margin-bottom: 13px;
        ...

To achieve our AI-based fantasy football experience, we had to ensure that the integration of our data endpoints were continuously available, without any planned or unplanned downtime. To achieve this, we used an architecture that would store our application code, graphics, and styles in the cloud through IBM Cloud Object Storage. As shown in Figure 1, an IBM and ESPN CDN sits between our users and the IBM Cloud Object Storage buckets that store our content. By protecting our origin servers with a double CDN, we are able to make updates to the app without users experiencing any downtime. A cached version of both the app and data is delivered to the user’s device until the latest app has finished deploying. This approach is also used for the data integration of the application. We created several Cloud Object Storage buckets to store data such as projections, player information, performance, classifiers, volume, and evidence. These buckets are exposed to the app through routes within the CDNs. Similar to the React application, any updates to the data files are not noticed by users.

You can watch four tutorials that show how we built the Watson Fantasy Football user experience with the React framework.

Go experience Watson Insights for Fantasy Football

With over 2 billion hits per day, the Watson fantasy football experience is an enterprise-grade user app that is available for you whenever you need it. Good luck in your league!

As the final blog in this 4-part series, we hope that you have enjoyed learning about our work. The next set of code releases over the next year will bring your game to another level. #WinWithWatson