CONTROL TOWER

Control Tower is Electronic Art’s internal web service tool that monitors the status of EA games and services. Through a clean visual language, Control Tower unifies various information sources and highlights critical needs in real-time – for a more efficient and holistic monitoring of player experience.

Note: The data has been modified and randomly generated to adhere to EA’s confidentiality agreements. I have received permission to share my internship work on my portfolio.

Adobe CC, Sketch, InVision

 User Experience Design

Electronic Arts CTO Leadership Award

PARTNER & ROLES

Mikei Huang, UX Designer
Lorina Navarro, Lead UX Designer

PROJECT OBJECTIVES

Control Tower was initiated by EA’s Player Reliability Engineering team as a three-month internship project. Working as the UX Designer, I was tasked with redesigning the company’s internal monitoring web dashboard, improving usability and unifying visual consistency across EA’s data visualization tools. One of the challenges from this project was to condense and minimize critical data into an at-a-glance informational dashboard. EA hosted more than 90 active online game titles and used multiple dashboards to track individual game statuses and services. Many users found the current dashboards visually overwhelming and confusing. To address this issue, the focus of the project followed a user-centered approach to design dashboard prototypes that easily highlights information users need to see.

PROCESS

The project followed a define-prototype-test-iterate process. As the UX designer, I assisted Lorina to define user requirements, heuristic analysis of current tools and translate findings into low-fidelity prototypes. Then, I created visual assets and designed a mid-fidelity prototype on InVision for user testing.

Research

We took the first step and defined our primary user group for Control Tower. I helped interview members of the Mission Control team to find out how they use the current monitoring tool and the problems they face. Their main workflow includes triaging issues such as server drops, so they need to find relevant information when and where these happen, and what could have caused them.

Card Sorting Exercise

The next step was to review the current monitoring tool through heuristic evaluations. Through our evaluation on the current monitoring tool, we realized that there was a total of 24 menu categories and more than 100+ user-defined tags. To organize the site map and simplify the categories, we conducted card sorting exercises with the Mission Control team to define a new categorization scheme. From the card sorting results, Lorina organized the categories into a site map and prototyped a low-fidelity wireframe in Balsamiq.

Site Map

DESIGNING PROTOTYPES

Based on iterative feedback sessions, I created the mid-fidelity interactive prototype in Invision, designing each screens based on site map and testing materials.

Low Fidelity Prototype
Mid Fidelity Prototype

VISUAL IDENTITY

To separate the visual language created for the EA Wall, I designed new color schemes specific for the web platform using fundamental design principles of color, space, unity, balance, and hierarchy to enhance readability and visibility of data displayed.

Control Tower Color Palette

Light tones are easy to read on desktop monitors. The status colors are brighter to create high contrast between states.

EA Wall Color Palette

Dark tones applied on EA Wall. The dark tones are suitable for wall-mounted display monitors. See EA Wall for more details.

Control Tower Logo

The Control Tower logo is used in conjunction with the EADP logo. Designed to be readable at any scale.

Menu bar design

Text-based drop-down menu is preferred over graphic banner to increase readability and functionality. The drop-down menu enables user to quickly drill down to specific pages, and includes a time filter to examine graphs at different time scales. On the top right corner of the menu, there is also a login option to modify user preferences and settings.

Pixel-Perfect Modular Layout

Control Tower features many different visual components, including bars, charts, lists, and score cards, all presented in a text-based design. Since users are able to customize their dashboard by arranging each sections in different order, I created layouts that are modular and dynamically changes based on user preferences.

USER TESTING

After finishing up the mid fidelity interactive prototype, we tested it with the Mission Control team members. Overall, the system received a System Usability Scale (SUS) score of 93.13. Users liked the clean visual design, and noted its improvement over the previous interface in data presentation. They also completed all task protocol designed by Lorina, and rated the functionalities as useful and easy to learn.

INTERN TECH FAIR

In the last week of my internship, our team presented the final project at EA’s CTO Intern Tech Fair in Redwood Shores. The event showcased more than 60 internship projects and attracted both the general public and EA tech employees. My work was selected as one of only seven intern projects to receive the CTO Leadership Award.