EA WALL

EA Wall is Electronic Art’s internal executive dashboard that monitors the real-time status of EA games and services, in order to provide the best player experience. EA Wall is currently installed in the office space at EA Headquarters.

Pictured below shows the office space at EA Headquarters in Redwood Shores, CA.

Note: The dashboard 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, Lead UX Designer
Lorina Navarro, UX Designer

PROJECT OBJECTIVES

EA Wall was initiated by EA’s Player Reliability Engineering team as a three-month internship project. Working as the Lead UX Designer, I was tasked with redesigning the company’s internal executive monitoring 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. The other challenge was to create style guidelines that standardizes color, layout, typography, CSS, and animation for EA’s internal dashboards. Previous dashboards were made by individual teams across different departments. Without a standardized design, these dashboards tend to look very different from each other, which made it difficult for users to jump from one dashboard to the other.

PROCESS

The project followed a define-prototype-test-iterate process. The first step was to analyze current EA data visualization tools through heuristic evaluations. I worked on consolidating all of EA’s dashboard visuals to define a cohesive visual language, while my co-intern Lorina defined user requirements through on-site interviews with users.

RESEARCH

Heuristic Evaluation of Current Tool

Referencing Jakob Nielsen’s Usability Guidelines and Stephen Few’s Information Dashboard Design , we identified key heuristics that should be considered when designing a dashboard.

  1. Clear, logical organization
  2. Easy perception
  3. Adequate context for data
  4. Appropriate data representation
  5. Aesthetically pleasing

The data visualization tool, shown above, highlights some design elements that can be improved based on heuristic evaluations, including increasing the visibility and contrast of each graph, organizing information hierarchy, unifying the EADP logo, standardizing labels for consistency, and approaching minimalist design for readability.

VISUAL IDENTITY

Defining Visual Language For EA Wall

The style guidelines that I created followed fundamental design principles of color, space, unity, balance, and hierarchy to enhance readability and visibility of data displayed.

EADP Logo

The redesigned EADP logo is versatile and legible at any scale. The logo can be used for both print and digital materials.

Color Palette

Considering the brightness of the wall-mounted TVs, I selected dark tones to minimize screen brightness, and sharpens the color contrast for EA’s game characters. The lower three colors represent game statuses from healthy, warning, and critical.

EADP Logo Usage

The EADP Logo should be used in consideration of background color and space. The following highlights some dos and don’ts when placing the EADP logo.

Desiging EA Wall Graphic Banner

The graphic banner follows EA’s 58° golden angle to create dynamic movements in still images. EA’s game characters are cropped and placed on a horizon using this angle.

The EA game characters are cropped at the 58° angle with an emphasis on head and body torso. Action shots are preferred over still shots to suggest motion.

Designing Pixel Perfect Layout

The EA Wall layout is designed down to each individual pixels. Since the wall-mounted TV panel consists of six individual TVs stacked together, I started by dividing the screens into six 1920 x 1080 frames, and allocate different dashboard components inside of each frame.

REDESIGNING THE DASHBOARD

After analyzing the current tool and defining the new visual language, Lorina and I developed low-fidelity paper prototypes and conducted usability testing with internal and external teams to validate and iterate on the project. From there, I designed mid-fidelity and high-fidelity prototypes in InVision and Adobe After Effects based on feedback.

Low Fidelity Prototype
Mid Fidelity Prototype

For this prototype, I designed two color palettes for the dashboard according to their use. The dark tones are suitable for large-scale TV monitors that are often harshly bright, while the light tones are suitable for tabletop computer screens. After user testing with external teams, we decided to continue using the dark color palettes, and applied the light tones to a separate project, Control Tower.

Collecting User Feedback

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.