Civics 101 Trivia

An audio-based trivia app that educates and engages NHPR Civics 101 listeners.

Overview

The engaging Civics 101 trivia game is an Alexa application contains audio content that furthers the knowledge and engagement of NHPR’s main audience through an enjoyable, informative and motivating gamified learning experience.

My Role

With my background with Alexa, sound architecture, and variety of sound platforms, I led our design team of 3 through the process in integration UX and Audio. I am most proud of the team culture to think big and celebrate innovative ideas.

Project Details

Skills
Audio UX
User Testing
User Research
UX/UI Design

Team

3 Developers

3 Designers

1 project manager

Duration

10 weeks in the DALI Lab

The Challenge

Americans lag behind their peers in areas of general civics knowledge.

U.S. school curriculums vary greatly with their approach to civics, and many don’t include it whatsoever. Although there exists a wealth of civics information available online, much of it is dry material or simple study guides for the citizenship test.

This leaves a lack of resources to engage and excite Americans about civics knowledge.

Our partners, NHPR's Civics 101 hosts, approached us with this problem to further their podcast with an Alexa trivia application to help widen their audience.

By the numbers...

Throughout the 10 weeks, the three designers were challenged to design on a new platform for all of us: Audio.

Here is an overview of our design process from beginning to end.

The Process:

How might we make American civics more engaging?

Design Objectives

After collaborating with the Civics 101 hosts and a lot of brainstorming, we approached our design process with 3 primary objectives.

Research

1. What are the existing civics platforms?

Given the audio skills of our Civics 101 partners, we saw a great opportunity in designing an audio-based app. We did began our research looking at competing Alexa skills and mobile apps with a trivia-focus.

In the phase, I got the opportunity to play trivia games... for research. While this was a very humbling experience, I enjoyed learning about existing audio apps, and how my team can make them even better!

Common KnowledgeAlexa Skill

00:00 / 01:24

Screen Shot 2020-12-12 at 7.40.43 AM.png

2. How do you design for Voice UX?!

After getting a feel for the state of the art, my team and I researched the possibilities of Voice UX and Alexa Skills.

1. Within the developer console we encountered and entire library of resources such as How to Build and Engaging Alexa Skill and the Alexa Skill Design Guide to be extremely helpful.

2. We found Sina Kahen's podcast, Voice UX, to have valuable insights on the strategies that has made voice UX one of the fastest growing technologies.

Screen Shot 2020-12-14 at 3.42.06 PM.png

Screen Shot 2020-12-07 at 11.33.10 AM.pn

Define

"Life is like a game, you can play it safe and be good, or take a chance and be great."

We took the chance, and here's how it went.

Empathy Maps

Here is a part of the process that our team struggled with A LOT. We were torn between who our user truly was, and the influence that it would have over what interface we would design for.

I will be fully honest, after our research, I was intimidated by designing on an entirely new device and experience with only 10 weeks. However, I knew that there was an incredible potential to have an impact in the NHPR and Alexa community.

Click to enlarge

Initial Personas

We began by creating potential personas for potential users of our Alexa Skill or Mobile App, and sent out surveys to people of a variety of NHPR engagement.

Initial Personas

Survey Responses

We received 53 responses on our survey from NHPR's contact list.
Here are our key findings.

Committed Audience: NHPR has a committed user base, as over 90% of their listeners are up-to-date with their content.
Millennials: Most listeners are older than 30, so the high school citizenship test does not apply to them
Tech-Savvy: Over 80% of listeners own a smart speaker

Screen Shot 2020-12-14 at 11.04.43 AM.pn

Interview Guide

To solidify what device we would design for, we created a comprehensive interview guide. We interviewed an array of high school civics teachers, current NHPR listeners, college students, and trivia junkies.

Screen Shot 2020-12-14 at 10.36.27 AM.pn

And our final user is...

Current Civics 101 Podcast Listeners!

By week 4, we had a MAJOR design (and confidence) breakthrough.

After our user interviews and survey responses, we determined that the user was right in front of us: current Civics 101 Podcast Listeners.

Civics 101 Trivia is an Alexa skill for current Civics 101 podcasts listeners from the ages 30 - 50.

Given the extensive ownership of Amazon audio devices, we decided to design to our partners audio strengths.

Whether it is to learn more civics knowledge or explore their competitive edge, listeners can now engage with the podcast in a new form!

Ideate

Flows and Features

Now that we decided on a device and user, we hit the ground running. We brainstormed a list of desirable features and game flows, and here are my notes!

Click to enlarge

Key Features

After A LOT of brainstorming and user testing, we generated 3 core features for our skill that directly related to our initial design objectives of accessible, engaging, and educational.

Click to enlarge

1. Learn and Play Mode

"It would be really cool to have a choice on whether I wanted a more educational or competitive trivia experience."

While both flows stem from the same introduction, users are able to easily choose what game mode they are up for!

Audio Clip of Learn & Play

00:00 / 00:14

Learn Flow

Screen Shot 2020-12-12 at 4.05.41 PM.png

Click to enlarge

Play Flow

Screen Shot 2020-12-12 at 4.05.49 PM.png

Click to enlarge

2. Global Commands

"What if I change my mind during my trivia session?"

Users articulated a desire to easy access to a variety of essential commands. The global commands are simple and easy to remember so users can enhance their trivia experience.

Global Commands Explanation

00:00 / 00:12

Screen Shot 2020-12-14 at 1.48.52 PM.png

3. Categories

"I love trivia based on today. History is not my forte!"

NHPR listeners articulated a passion for variety in content. We collaborated with NHPR to create Citizenship test, General Knowledge, and Current Events.

3 Categories Explanation

00:00 / 00:07

Screen Shot 2020-12-14 at 2.14.28 PM.png

Testing... But Without Testing?

Prototype 1: Garage Band

While our developers were still working to code the Skill, I created a prototype of our user flow using Garage Band, Google Translate, and my own voice!

Prototype 1Sara Falkson

00:00 / 01:40

Prototype 2: Wizard of Oz

The MVP was great; except we needed to find a way for users to actually engage with the Skill, before the Skill was actually a Skill. Tricky right?!

We turned to Google Slides to guide our users through essentially a blind-folded user testing experience, virtually.

Users were asked to say "Alexa Play Civics 101." With my video off, I then played clippings of audio recording to coordinate with their chosen mode, answer, and use of global commands.

Sample Wizard of Oz Test

Final Solution

"Hey Alexa, Play Civics 101!"

Our designs encapsulate all of our design objectives as an educational, accessible,

and engaging trivia game.

Interact with this game excerpt flow by pressing the play buttons!

00:00 / 00:12

00:00 / 00:14

00:00 / 00:06

00:00 / 00:07

00:00 / 00:02

00:00 / 00:13

00:00 / 00:17

00:00 / 00:08

00:00 / 00:04

00:00 / 00:03

Having fun?

Continue your game with the NHPR Civics Trivia Alexa Skill today!

Conclusion

Reflection:

1. Think Big

We spent an extensive amount of time debating whether or not to go out of our design comfort zone. I am so grateful for the design opportunity this project brought in collaboration with NHPR's podcast team.

2. User Obsession

One of my favorite parts of this process was how much time we focussed on curating the best experience for our users. From our initial personas to hand-off, I am so proud of the teams commitment to NHPR listeners.

3. Keep it Simple

Our team struggled to narrow down one specific persona. After debating between designing for high school students to people attempting to gain their citizenship, our users were in front of us all along!

Next Steps:

1. Expand to More Platforms

To increase the accessibility of our trivia game, we hope to expand our content across other major smark speakers. We began our design process with Amazon because it had the most guidance for both new designers and developers on audio-based platforms.

2. Recycled Missed Cards in Learn Mode

To improve user's educational progress, we hope to implement a design that recycles questions that are wrong in a question deck until the user gets it right.

Skills Audio UX User Testing User Research UX/UI Design

Team

3 Developers

3 Designers

1 project manager

Duration

10 weeks in the DALI Lab

The Challenge

Americans lag behind their peers in areas of general civics knowledge.

U.S. school curriculums vary greatly with their approach to civics, and many don’t include it whatsoever. Although there exists a wealth of civics information available online, much of it is dry material or simple study guides for the citizenship test.

This leaves a lack of resources to engage and excite Americans about civics knowledge.

​

Our partners, NHPR's Civics 101 hosts, approached us with this problem to further their podcast with an Alexa trivia application to help widen their audience.

Throughout the 10 weeks, the three designers were challenged to design on a new platform for all of us: Audio.

Here is an overview of our design process from beginning to end.

The Process:

How might we make American civics more engaging?

Design Objectives

After collaborating with the Civics 101 hosts and a lot of brainstorming, we approached our design process with 3 primary objectives.

Research

1. What are the existing civics platforms?

Given the audio skills of our Civics 101 partners, we saw a great opportunity in designing an audio-based app. We did began our research looking at competing Alexa skills and mobile apps with a trivia-focus.

​

In the phase, I got the opportunity to play trivia games... for research. While this was a very humbling experience, I enjoyed learning about existing audio apps, and how my team can make them even better!

2. How do you design for Voice UX?!

After getting a feel for the state of the art, my team and I researched the possibilities of Voice UX and Alexa Skills.

​

1. Within the developer console we encountered and entire library of resources such as How to Build and Engaging Alexa Skill and the Alexa Skill Design Guide to be extremely helpful.

2. We found Sina Kahen's podcast, Voice UX, to have valuable insights on the strategies that has made voice UX one of the fastest growing technologies.

Define

"Life is like a game, you can play it safe and be good, or take a chance and be great."

​

We took the chance, and here's how it went. ​

Empathy Maps

Here is a part of the process that our team struggled with A LOT. We were torn between who our user truly was, and the influence that it would have over what interface we would design for.

​

I will be fully honest, after our research, I was intimidated by designing on an entirely new device and experience with only 10 weeks. However, I knew that there was an incredible potential to have an impact in the NHPR and Alexa community.

Click to enlarge

Initial Personas

We began by creating potential personas for potential users of our Alexa Skill or Mobile App, and sent out surveys to people of a variety of NHPR engagement.

Initial Personas

Survey Responses

We received 53 responses on our survey from NHPR's contact list. Here are our key findings.

​

Committed Audience: NHPR has a committed user base, as over 90% of their listeners are up-to-date with their content.

Millennials: Most listeners are older than 30, so the high school citizenship test does not apply to them

Tech-Savvy: Over 80% of listeners own a smart speaker

Interview Guide

To solidify what device we would design for, we created a comprehensive interview guide. We interviewed an array of high school civics teachers, current NHPR listeners, college students, and trivia junkies.

And our final user is...

Current Civics 101 Podcast Listeners!

By week 4, we had a MAJOR design (and confidence) breakthrough.

After our user interviews and survey responses, we determined that the user was right in front of us: current Civics 101 Podcast Listeners.

Civics 101 Trivia is an Alexa skill for current Civics 101 podcasts listeners from the ages 30 - 50.

​

Given the extensive ownership of Amazon audio devices, we decided to design to our partners audio strengths.

Whether it is to learn more civics knowledge or explore their competitive edge, listeners can now engage with the podcast in a new form!

Ideate

Flows and Features

Now that we decided on a device and user, we hit the ground running. We brainstormed a list of desirable features and game flows, and here are my notes!

Click to enlarge

Key Features

After A LOT of brainstorming and user testing, we generated 3 core features for our skill that directly related to our initial design objectives of accessible, engaging, and educational.

Click to enlarge

1. Learn and Play Mode

"It would be really cool to have a choice on whether I wanted a more educational or competitive trivia experience."

​

While both flows stem from the same introduction, users are able to easily choose what game mode they are up for!

Learn Flow

Click to enlarge

Play Flow

Click to enlarge

2. Global Commands

"What if I change my mind during my trivia session?"

Users articulated a desire to easy access to a variety of essential commands. The global commands are simple and easy to remember so users can enhance their trivia experience.

3. Categories

"I love trivia based on today. History is not my forte!" NHPR listeners articulated a passion for variety in content. We collaborated with NHPR to create Citizenship test, General Knowledge, and Current Events.

Testing... But Without Testing?

Prototype 1: Garage Band

While our developers were still working to code the Skill, I created a prototype of our user flow using Garage Band, Google Translate, and my own voice!

Skills
Audio UX
User Testing
User Research
UX/UI Design

We took the chance, and here's how it went.

We received 53 responses on our survey from NHPR's contact list.
Here are our key findings.

"I love trivia based on today. History is not my forte!"

NHPR listeners articulated a passion for variety in content. We collaborated with NHPR to create Citizenship test, General Knowledge, and Current Events.