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, TheTVDB is an accurate and affordable entertainment metadata solution.

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. Having a comparison of before and after for all of the components helped the developer implement the new styles.

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

Having regular meetings with TheTVDB team allowed me to iterate quickly based on their feedback.

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.

Initially, I was making changes based purely on their suggestions. But I had to think of the users and learned how to defend my design choices to find the best solutions.

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. Links to several online databases were listed as “references.” 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 modals that users could easily digest. These screens would highlight the benefits and logistics of the game.

Fun graphics for each modal could also attract user interest so they would spend more time looking at the content before starting to play.

Clear instructions and notifications

Pop-up instructional modals could show users exactly where they needed to go, and what information they needed to get.

Before users moved to another question, the game could let them know 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.

I initially made animations for each screen in Adobe Photoshop but switched to AfterEffects for later versions for a smoother effect.

I also simplified 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 reduce extraneous options 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 they were confused by the look and placement of the Report link. It got lost amidst the available game options, when its purpose was more relative to the record information.

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