Monette T. Punzalan

TheTVDB Gamification

Awarding points to users for gathering data about movies, TV shows, and actors
My Role

UX Designer

Our Team
Project Manager
Programmer
UX Director
Lead UX Designer
UX User Researcher
Chief Executive Officer
Duration

5 months

Overview

Context

TheTVDB is a community-driven TV and Movie databases. With content metadata available for 133,000+ TV Series and 327,000+ movies, thousands of developers use theTVDB digital media metadata API to power their apps, utilities, and projects.

Objective

To improve the integrity of their data, TheTVDB wants users to contribute critical pieces of missing data to series, movie, and actor records. How could TheTVDB entice users to enter data? 

Moreover, although the site has 25 active editorial moderators, how could we get users to enter the correct data and to report errors?

Solution

TheTVDB team had implemented the gamification feature but wanted to make improvements based on structural changes and on the results of user testing. I was tasked with the following objectives:

Tour of TheTVDB Gamification

Reflections

Being conscious of future UX designers

The previous UX designer had developed the gamification feature using Figma. However, the lead UX designer used Sketch for the rest of the site. 

To streamline the process of applying new styles for myself and future designers I recreated the wireframes in Sketch so the next designer would not have to update styleguides in both programs.

Completing a design audit

Before implementing the new styles of the lead UX Designer, the UX Manager wanted an audit of the live site. Creating a detailed comparison of old and new components helped the developer with implementation.

The process helped me see that up to that point elements had been styled on-the-fly. It showed me how to create a more consistent experience for users.

Presenting to stakeholders and developer

I honed my presentation skills to defend my design choices and find the best solutions. Having regular meetings with TheTVDB team allowed me to iterate quickly based on our discussions.

The lead UX designer reminded me not to limit the designs on what I thought was possible because the developer could give feedback about what would be feasible.

Discover & Define

User test interviews

What’s the purpose?

Overall, users could not tell what kind of benefits they and TheTVDB could reap from the gamification feature. In their eagerness to start the game, they largely ignored the explanation of rewards and instructions.

Where am I? Where am I going?
Users didn’t realize they were going to other database sites to verify data. Once the sites opened, they were unsure if they were at the right one. They also didn’t realize when they completed tasks successfully.
 
 

Ideate

Onboarding

We decided to replace the text at the beginning of the game with fun modals that users could easily digest. These screens would highlight the benefits and logistics of the game.

Clear instructions and notifications

Pop-up instructional modals could show users exactly where they needed to go, and what information they needed to get. They could also inform users that they had submitted the entry correctly and would earn points upon verification.

 

Iterate

Onboarding modals

The team worked together to condense the copy on each modal. Just as we simplifiied the text, I also removed extraneous elements from the graphics to make them more straightforward.

Earlier version of onboarding modals

Final version of onboarding modals

Instructions

Initially, we tried to prime users for the sites they would be going to using the destinations’ colors for the buttons, but users were not familiar with them. The colors also got mixed up with TheTVDB color scheme.

I got rid of the button to make the interface clearer and put detailed instructions in a help modal.

Users were too distracted to see this instruction

Then users did not know what to make of this button

Turning the instruction into a link helped the flow and made the layout clearer.

Test

Reporting a record

Users can report a record for being adult content or miscategorized. During testing, the “Report” got lost amidst the available entry options and confused viewers.

We determined its purpose was more relative to the record information, so I moved the link up to the information section and highlighted it with an error color and icon.

Users could not find the "Report" link among the other options

Adding a flag icon and moving the "Report" link to the information section helped users find it better

Design System

I developed a new design system for TheTVDB site. To facilitate its implementation, I audited the live site and created a chart comparing the old and new components.

Limiting the color palette made the site more cohesive and helped highlight CTAs. I also set styles for possible components to prepare for the future of the site.

TheTVDB Style Guide - Colors
TheTVDB Style Guide - Typography
TheTVDB Style Guide - Components
TheTVDB Style Guide - Components