PROJECT

Electronic Arts Internship

UX Designer | Summer & Fall 2020

PROJECT

EA Help Experience Improvements – How might we enable players to find help faster?

To comply with my non-disclosure agreement, I have changed some of the quantitative data and omitted some information in this case study. All information in this case study is my own and does not necessarily reflect the views of Electronic Arts.

Skills

UX Design

User Testing

Design Systems

Team

Me

1 Senior Experience Design Manager

2 Product Managers

My Role

UX Design Intern working under my manager, a Senior Experience Design Manager

Objective

My goal of this project was to improve the player’s experience on EA Help to enable them to find help faster. The number of support tickets will be reduced leading to more time saved for the company.

Overall, my final designs have increased the average task completion rate of finding help from 25% to 92%.

Final Designs

Problem

Majority of players find it difficult to find the help they need from the EA Help homepage.

Goal

Enable the players to find help by themselves to reduce the number of support tickets. By providing an intuitive and easy for for players to get help, it ultimately saves the company more time.

Current Pages

Pain Points Takeaway: Players had difficulties understanding the sequence of actions they should be taking to find help

Market Research

I conducted a competitive analysis of the help sites of other large game companies. Many players of EA games also play the games from other large game companies.

Understanding common ways other game sites enable players to find help gave me an understanding of common flows. This helped me define which solutions to include in my design.

Takeaways

After examining various game help sites, I realized Electronic Arts was missing:

  • Product (game) selection very visible
  • Top help issues clearly displayed
  • Account self service tools clearly displayed
  • Product specific page dedicated to top issues in that game

Wireframes

The wireframes introduced a new user flow inspired by common patterns found in market research. It includes:

  • Product selection page as the landing page upfront.
  • Product page, top issues of the specific games are displayed.

Product Selection (Home) Page Iterations

The games are displayed upfront so the player can quickly find their game to meet the user needs. The promotional content is displayed to meet business goals. In the first iteration, more games are displayed, hiding more promotional content.

The pros and cons are also evaluated from user testing on the high fidelity prototypes.

Product Page Iterations

Players will land on this page after clicking on a game tile from the home page. The page layout stays consistent with all game titles.

First Iterations

I followed Electronic Art’s existing visual design style guide to make the first high-fidelity mockups. I've also added new features such as "Contact Us" and a layer of personalization (sort by categories)

Home (Product Selection)

Overall, this addresses the pain point of having understanding the sequence of actions. Players can see and personalize the games and navigate to their help problem in this design.

The navigation menu features a more discoverable way to contact support.

Product Page

User Testing

Goal

Enable players to find help with their game on their own.

Impact

Reduces the number of support tickets sent → Saves company more time

Tool

Marvel App

# Players Tested

24

Metrics

Task Completion Rate

Satisfaction Rate

Qualitative Feedback

Tasks

  1. Recover your rewards using the Draft Token tool
  2. Find help on why you’re getting disconnected from Sims 4
  3. Get in contact with customer support about this issue
  4. Reset your password without logging in
  5. Login and change the email address associated with your account

Results

Overall, my final design has increased the average task completion rate of finding help from 25% to 92%.

  • Players had a positive and intuitive experience completing the tasks.
  • The self-service tool and top help topics were easy to find.
  • The account management dropdown were also intuitive to use.

Key Takeaways

Subsequent Iterations

After user testing, I created iterations of the home page. Differences between the authenticated (logged in) and unauthenticated pages are designed to cover multiple touch points.

Authenticated Version

In order to differentiate between owned games and non-owned games, I also explored different ways of show games that are owned. This is shown when the player is logged in.

Unauthenticated Version

Before & After

The redesigned homepage makes finding help easier. The search bar, account management, and help with a game are all easier to find.

The redesigned product page helped players find where specifically to resolve issues easier. As account management issues are the most common, they are also displayed on this page. The top topics are also organized by category.

Design System

I created a design system using EA's existing branding guidelines and added the elements designed in EA Help.

Design System Case Study →

Next Steps

Coming up next, I plan to run another usability test to measure task completion rate. The goal is to enable players to find the help they need on their own. By increasing the task completion rate, the number of support tickets is reduced. This ultimately saves the company more time.

This website is set to be live mid 2021.

Lessons Learned

  • Displaying top help topic related to games helped players find help faster.
  • Over-communicate in everything to all stakeholders and never make assumptions. I worked with other designers, product managers, users through usability testing.
  • Always test out the usability test with a few others before sending it out to all the participants. Our first test had some language that was confusing that could have been proof read.
  • Design for scalability in my design system is essential so it can be reused efficiently.

Other Projects