Hang on a sec
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
Scope
  • 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:

  • • Put together a style guide for TheTVDB based on designs by the Lead UX Designer.
  • • Create graphics for onboarding modals.
  • • Create wireframes of the gamification feature that addressed layout and user testing issues.
  • • Present designs at monthly meetings with TheTVDB Director, Lead Director, UX Director, UX Lead Designer, Content Operation Manager, and User Researcher, and iterate based on discussions.

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.

TheTVDB early version of play screen
TheTVDB early version of play screen - click to enlarge
TheTVDB Help instructions modal
TheTVDB Help instructions modal - click to enlarge

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.

TheTVDB screen with report link - click to enlarge
TheTVDB with updated report link - click to enlarge

Design System

The Lead UX Designer created new styles for TheTVDB site. To facilitate the implementation of the new styles, I audited the live site and put together a style guide that directly compared 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