shelley huang | design

TADA: Data Visualizatoin tool for UGC


Client: Electronic Arts

Type: 4 People Team
16 weeks

Skills: User Research, Usability Test, Interface Design, Data Visualization

Role: UX Designer

EA owns one of the biggest game players communities in the world. Thousands of gameplay videos, images and gifs are uploaded every day. 

Player created content has been an important metric for companies in the game industry to evaluate a product and also drive business decisions. However, in the current market, there isn't any helpful tool. Our client, Electronic Arts, expect us to provide a solution to solve this problem. 

How can EA better utilize the player generated content to drive
business decision and also evaluate the product performance?

User interview - Think inside of scope

To start with, I conducted 4 one on one interviews with EA employees including two analysts, one marketing, and one community manager. By doing the interview, I learned how their work is related to these player generated content, and what features we can include helping them work more efficiently. 

We'd love to include all the needs, but we only have four months. We want to start small but creating the MVP so that we can test around to see if the idea/design works.

Persona of Community Managers


Brainstorming digital mockups - Think outside of box

As the lead designer on the team, I came up with several different designs of the possible interface. There are two key components I want to include for the design: Information parsed from videos and the videos themselves. I quickly created mockups in 2 weeks and show our client - in this way I can learn our client preference and also iterate based on the feedback.


Motion Design

Another essential component for this product is the motion design. We're not building a dull dashboard. From the research,  learned that interaction in data visualization motivates the user to explore more. I use Figma and sometimes slides transition to show motion design to the client and my teammates. I frequently communicate with developers to make sure my plan is doable under our time scope.

make action GIFs like this at MakeaGif

TA-DA! Final Product including 3 main features:

  • Label

The label is one of the key function we want to include.  We use Google Vision API to parse the data from youtube videos, creating the name tags/labels, and then tag them to the videos. In this way, we can categorize them and make the videos searchable. Also, I use heat map design for the labels. The horizontal axis means timeline, showing past 30 days. One vertical stripe means one day. The darker the color means more videos are uploaded on that day.

make action GIFs like this at MakeaGif
  • Videos(dots)

The video is the meat of TADA. How to present it interactively and engagingly is a challenge. We've tried different kinds of design and locked down to this moving dots. Each dot represents a video. By hovering over user can browse the title and views from the pop-up. Besides the label selection, the user can also select through the filters - View counts and Like/View ratio.

make action GIFs like this at MakeaGif
  • Display of selected Video

For the display of video, we parse everything on Youtube so that users don't need to navigate to an external website for info. We also have a video managing feature. If the user finds something valuable or interesting, they can create a list of videos and share with colleagues.

make action GIFs like this at MakeaGif