a RealEyes video player streams the Olympics.

 Case Study: How RealEyes Developed a Custom Game-Testing Environment for EA Games

Executive Summary:

In an industry constantly racing to release the latest, hottest new game, streamlining the game-testing process is critical. When a company operates multiple labs across the globe, each with dozens of users and 24/7 game-testing operations, it generates massive amounts of data and video that can be challenging to manage through a single system.

That was the case for EA Games, whose previous solutions involved a time-consuming manual process of managing and recording video tests without any special features for users or administrators. Their goal was to improve efficiency, streamline their abundant data and scale as many locations as necessary.

To help EA Games achieve their goals, RealEyes designed and executed the following:

  • Launched a complete application intended to streamline and manage the client’s online game-testing data
  • Developed seven brand-new components designed to streamline and ease the user and administrator experience
  • Scaled the new application across five global offices with 30 user stations each

About the Client:

Electronic Arts, Inc. (EA) is a leading global interactive entertainment software company delivering games, content and online services for Internet-connected consoles, personal computers, mobile phones and tablets. EA games has major gaming studios in Florida, California, British Columbia and Sweden.  

Client Challenges:

EA required a solution to view and manage live and on-demand video recordings of their game-testing sessions, which are created by game-testers using software in a lab environment. EA needed a way to record what their game testers were doing and subsequently manage the data from those recordings.

The biggest challenge was that their existing system—which was a disjointed combination of free and paid services—was extremely limited in both volume and capabilities. Their operational flow had been a largely manual process that was hindered by a lack of the right tools that would handle the complexities of meeting live with real time monitoring and on-demand video recording.

In order for EA Games to remain industry leaders, they knew they needed to test and improve their product faster than the competition. Around-the-clock game testing at labs worldwide generates enormous amounts of video data, and without a unified system or the in-house expertise, they were unable to capture and analyze their essential  game-testing streams.

EA needed to partner with a company that would help them create a solution to address their challenges for streamlining their workflow scale, managing their products, content and users, and enhancing users’ and product owners’ capabilities.

How RealEyes Helped:

After analyzing EA’s goals and challenges, RealEyes tapped their extensive streaming video experience and application development experience to devise a comprehensive solution. First, we developed a set of wireframes for a new interface to show the design of the application so EA could approve the plan. RealEyes also developed wireframes for the new interface to manage the game-testing workflow, much like a CMS for the content that was produced for recording videos, and created a diagram to help manage aspects of the workflow.

Next, RealEyes began to implement an entirely new solution for EA Games that allowed them to record their game-testing videos and then stream the videos to a newly created application. This included separate components for users who would browse products as well as administrators who needed the ability to edit key areas of the interface, including managing labs, scheduling, products and users.

The application RealEyes created recorded all the live video streams for EA Games with the ability to monitor them live or to view them later on-demand. Once the content was recorded, managers could perform basic editing and clipping of the recordings and add additional features such as notes.

RealEyes then took it a step further. Instead of manually setting up what happens during a game, RealEyes created an automatic schedule for testing rooms and scheduling users. Once EA Games set up the room the first time, all they had to do was begin testing. It automatically categorized everything, and users could just jump in and start testing. RealEyes included smart logic to help buffer the schedule if users went over their allotted time. Content was always associated in an intelligent manner, and everything was kept organized.

On top of that, RealEyes added in the ability for users to communicate in the system via chat (integrated) and added advanced user controls for clipping. This not only increased storage and improved infrastructure issues, but gave EA Games more insight to go further with their data. Product owners could now schedule sessions and add users with greater transparency. Game developers could watch users and chat through the app, and create a clip of up to 10 seconds to isolate whatever they wanted to see.

Approach and Implementation:

Once EA Games and RealEyes finalized the interface structure and core functionality, RealEyes began development. This involved determining the best technology stack for accelerated development and performance. RealEyes decided on a combination of MongoDB, Express, AngularJS, NodeJS and at the request of the client Adobe Media Server.

In the early phases, RealEyes created in-depth wireframes for EA Games’ whole system. The goal was to meet EA Games’ needs, then leverage our extensive expertise to deliver solutions that extended even beyond those requirements. RealEyes took the solution beyond the barebone requirements to show the customer what was possible beyond their past experience. This enabled them to see a greater path for the future of their system and tools.

RealEyes began implementation of the database structure and API, which involved careful planning to maintain the complex interrelationships between gaming sessions, labs, channels and products.

The overall application was organized into the following major components:

  • Home view
  • Login modal panel
  • Products view
  • Product details view
  • Chat feature
  • Product edit view and session scheduler subview
  • Labs panel
  • Users panel

Each of these components is explained in further detail below.

Home View

The app’s home view presents a grid of all the currently active products (i.e. games in development) and a welcome message and graphic. The overall look and feel is based on Google’s “Material Design” for maximum utility and performance, and to help foster a crisp, clean brand experience. RealEyes’ design allowed for a responsive layout to handle flexible layout to flow with the volume of content needed to render and the future options for mobile devices as well. This view by default shows all the products that the UX Research team currently have active also providing a quick visual display of the breadth of their invonvelemnt across the company.

From here, users proceed to the login view by clicking the “Access My Products” button in the header or any of the product tiles.

One of the secondary goals of this project was to evangelize the great work that the EA UX research team does every day to make sure that EA games as a whole releases the best products in the industry. In the home view, RealEyes created the ability to show all the games that EA is currently working with the UX team—a great visual perk for easy viewing of all games/projects/products across multiple teams—while still automatically filtering to pertinent projects upon log-in.

Login Modal

RealEyes devised a simple modal panel for users to log in. Once securely authenticated, the rest of the user experience depends on the user level. For example, administrators and “super users” have access to more content and management capabilities.

If the user initiates login by clicking a product tile, they are redirected to that product’s detail view. Otherwise, users are redirected to the products view which is filtered to show only the products that they are associated with by default.

Products View

The products view displays a grid of tiled products that can be filtered to show “My Products,” all “Active Products,” “Archived Products” or the results of a search. Administrator-level users see a view with an additional side navigation and an edit button (i.e. a wrench icon) on each product tile that directs them to the product details view.

Product Details View

RealEyes developed the product details view to include separate panels for future streaming sessions, past sessions and live-streaming sessions.
The live-streaming panel includes a sub-panel for every current or upcoming session (within 24 hours). Each sub-panel lists all channels (including workstations and nodes) for the applicable lab, and each channel features a live indicator that turns green when the channel begins streaming content.

Another icon (i.e. a blue circle with a white triangle) displays when there is saved streaming content that can be played back from the beginning, and allows users to make additional clips and annotations.

The past sessions panel displays every completed and current session with the ability to drill down and see all associated content. One key feature for the client is the ability to create separate clips with annotations within video content. This way, if a test reveals a moment of game-play that warrants further review or action, it can be saved and noted.

The above view shows a selected video clip in which the video player is displayed and the user is adding an annotation. Multiple video player instances can also be utilized simultaneously.

Here is a closer look at a user creating a clip.

Chat Feature

RealEyes developed a chat panel to allows multiple users to have a discussion about a specific product. Users access the chat feature by clicking the “join chat” button in the product view.

This feature enhances the teams’ interaction and collaboration with each other during and after the event, which facilitates improved communication especially if they don’t all use the same communication software.

Product Edit View
Administrator-level users have the ability to edit a product’s name, description and thumbnail image, and can archive or delete the product at will. Additionally, RealEyes created a panel to easily manage which users have access to panel sessions and video clips. Another panel displays the upcoming sessions for the product with the ability to delete any session.

Session Scheduler

RealEyes devised a calendar interface to simplify the task of creating or editing a session. Although it appears simple, the session scheduler is actually an intricate, intelligent solution that enables testing centers around the world to coordinate schedules and enhance collaboration. In this case, scheduling is all about setting up labs. Each lab has its own schedule which allows users to add more rooms, add more locations, and apply scheduling system to any lab.

All scheduled sessions are displayed in the calendar, making it easy for users to get a quick overview of all sessions scheduled in a month, or for the user to select and update a session. Times are displayed in the appropriate time zone for the associated lab.

Labs Panel

Administrator-level users can add and edit labs and their associated channels (i.e. streaming workstations). 

As with the products panel, users can view and delete upcoming sessions as well.

Upon clicking a lab, users can update or delete it and also manage the channels. A live indicator shows which channels are currently streaming.

Users Panel

Administrator-level users get advanced user management control with a single panel. This allows users to search for other users and modify or add shared team user access control. Product owners can aldo add users to their own product.

An “Add User” sub-panel allows administrators to add new users or edit existing users.

When an existing user is selected, an additional sub-panel is displayed to manage the products associated with that user.

Results:

EA Games approached RealEyes with a set of challenges that presented major roadblocks to their success and progress. By drawing on their streaming media and video application and media workflow expertise, RealEyes designed a new solution for EA Games to streamline and manage their game-testing data across global offices, opening their eyes to what they could do once they had the right tools.

RealEyes automatically catalogued every component by renaming files and categorized all of the data, with the ability to manage overruns and buffers when sessions run over their allotted time. Additionally, RealEyes built out a entire user management system with three different levels pertaining to super users, admins, and general users. Each one provided different levels of access or control so that the system could be managed with the application data being flowed into teams as necessary. This was an important component in order for EA to maintain secure access among users.

Overall, RealEyes enabled EA Games to more efficiently move forward with critical solutions for utilizing and managing their own data. The scalable new tool allows EA to streamline their workflows with high-quality annotated video that can be processed into meaningful clips. Not only that, the tool improved how EA manages all of their products and test labs worldwide.

In this case, RealEyes was able to assess the client’s needs, select the right technology stack and create a new solution from the ground up that enabled their client to streamline their systems on a global scale.

© 2018 RealEyes Media, LLC. All rights reserved.