Hearst: Trivia Treat

Trivia Treat is a multi display interactive trivia game for Amazon Alexa. It is developed in partnership with Hearst’s Emerging Technology Group and King Features. The voice skill brings a new digital dimension to King Features’ robust and rich history of developing engaging games and puzzles.

triviatreat-play.png

PROBLEM

How do we leverage King Features' existing trivia quizzes in this new medium? The format and the scoring were not optimal for a voice first product. Alexa's voice in skills can also be monotonous. How to we make this delightful for the user using voice first and then Alexa displays as well.

We also had to launch this along with Amazon’s tight launch of multimodal screens. We were using a lot of their recourses that were updating frequently and in partner beta mode.


RESEARCH

King Features team gave us stats and use feedback on their current users playing the trivia games. We explored the top gaming skills with displays on Alexa. This was a really great excuse to also play games at work. Some of the questions we researched on where:

  • What makes them habitual for users?

  • How do they score

  • Is it multimodal or single player? Can you play with friends?

I also attended a voice conference to check out what other companies, like Volley and Assistwere doing in the space.

tt-superbot-conference 2018.png

IDEATION

After reviewing our collected material, we did a number of brainstorming sessions of how the quiz could be constructed with the existing format. We decided the single player with 5 questions in 3 rounds was quick and simple for users to play and for scoring. In those sessions I suggested it would be great if we use Alexa like a ‘Vanna White’ for questions and do recorded audio of a host.


PROTOYPE

I started with a simple dialogue of the script, talking it out with the team and modifying accordingly.

tt-vui-dialogue.png

Once the foundation script was in place, I mapped out all the additional paths I needed (new user, returning user, incomplete game, already played, etc.). Adding in the conditional paths mixing the host, Alexa, the user, and sound effects inserts, a VUI was ready to be tried out in the development prototype.

We tested the script in the skill template with the developer. I researched sounds for rounds, wins and losses. Once it felt smooth, we separated the phrases that needed to be recorded for a host voice. Once recorded we incorporated it into the skill. We tested out the initial prototype and and to slow and speed up some of the audio and adjust sounds with Alexa’s tone for smoother transitions. King Features team also added a jingle which tied the whole thing together.


DESIGN

BRANDING

The name trivia treat is playful. A lot of people on the team had great ideas on the logo. I tried all of them with some of my own and grabbing some vectors from the Noun Project. Eventually everyone agreed it should be a smart treat. It also had to be original for trademark purposes. So I drew a smart popsicle that I used for branding.

logo-draw.png

MULTIMODAL DISPLAYS

Once the script and the flow was drawn out I completed the VUI with multimodal screens. These included displays for the spot, show, show 2, tablet, and tv alongside the flow.

I thought it would be fun to have the ice cream to melt and change positions in each round.

tt-question-screen.png
icecream-phases.png
tt-background-trade.png

On the scoring screen, I switched up the popsicle character based on the score result. We collaborated throughout with these. For instance, the ‘bummer’ ice cream I had was white. But a product manager pointed out it should be purple with the mix of colors. Ofcourse!

tt-scoring.png
tt-score-screen.png

CMS

We had to update UI in our current cms for editors to add content for the quizzes. This task was pretty straight forward as I was using existing components of our library.

ONLINE PRESENCE

In addition, I was tasked to create a simple online page of the skill, as well as assets for the social accounts to complete the whole ecosystem of the product.


DEVELOP

Developing for Alexa’s multimodal displays was challenging, since we were using their tools in beta mode and with a tight launch. There was an absence of standardized guidelines. Also it was summer and developers were on vacation. Prior to leaving, I asked my teammate to set up a template for me to work on multimodal screens. With a template, I coded the display screens and tested for each device and deployed for Amazon’s feedback. Not without hurdles though as code would change on their end, also figuring out environment errors. But it was a great learning experience. Below is a display example for a screen.

tt-multimodal-code.png
tt-tv.png

Troubleshooting errors from Amazon and internal team.


MEASURE

Smaller group user testing was conducted using an emulator and available devices. Overall people enjoyed playing the game and wanted more quizzes. So we redid the model to 3 quizzes per day with an option to buy more later.

When it launched in the skill store, we saw some people mention the correct answers were taken as wrong answers. We optimized the phrases and added more utterances. Some of NPL issues were also because of Alexa’s misinterpretations which we tried to work with Amazon on.

Screen Shot 2018-12-04 at 11.56.36 AM.png

Our team monitored the skill on analytics tools. Every month, I presented to the team and stakeholders how the skill performed. Analyzing metrics and generating insights to validate proposed solutions.

tt-analytics.png

Project

Interactive voice game on Alexa for King Features

Goal

Design and build a trivia game in Alexa with dynamic multimodal displays

Timeline

Spring—Summer 2018

My Role

Skill concept, VUI, UI and UX, code multimodal displays for voice assistants, logo and branding, design and build splash website, track and report analytics, marketing and social graphics, testing. CMS UI for editors to upload quizzes.

Get the Skill