Kaye Kagaoan | Senior UX Designer
smash intro.png

Smash! Trivia

Fixing one of America’s “touchier” subjects
(iOS, 2019)

smash-mockups02.png

Brief

For this project, I collaborated with two of my colleagues to explore an opportunity space of our choice. We chose to solve a problem within the scope of America’s lack of accessible, comprehensive sex education.

Our solution was Smash!, a sex ed trivia and discussion app that allows audiences to learn about issues in an inclusive and engaging space.

 
 

Responsibilities

User Research, Personas, Strategy, Feature Prioritization, Low-Fidelity Sketches, High-Fidelity Wireframes & Prototype, Usability Testing, UI Specifications Document, Presentation, Case Study

TOOLS

Sketch, InVision, Google Suite

 
 
 

Our Team

 
 
 
Animated on InVision Studio

Animated on InVision Studio

 
 
 

Understanding the Problem

Research

In order to better understand America’s sex ed problem—as well as guide our decisions when designing for our chosen target audience of Generation Z—our team used a combination of online research, competitive and comparative analysis, and user research. Through online research, we gained a more thorough understanding of the exact severity of the lack of comprehensive sex education in the U.S. Read my case study for more information on our secondary and comparative research (via UX Collective).

We also conducted several user interviews to get direct insight on the sex ed experiences of people in our target audience. Following a screener survey, we interviewed a total of 11 participants, ten of whom were interviewed by phone (one was interviewed in person). Eight participants are considered Gen Z (18–24 years old), enabling us to get an accurate representation of our target audience. Interviews were 15–20 minutes long, wherein we asked questions such as:

  • Can you describe your sex education experience?

  • How did you learn about consent growing up?

  • How did you learn about safe sex practices?

  • What is something you wish you knew when becoming sexually active?

IMG_2313.jpeg
 
 
 
[My high school teacher] told us holding hands was bad enough to send us to hell.
— E., 23, from Indiana
I wish I’d known it was okay to say ‘no’ at any point. That would have been nice.
— L., 22, from New Jersey
 
 
IMG_2344.jpeg

What we learned

Young adults rely on the internet for information on sexual health because school isn’t enough.

There is little to no emphasis on consent in high school sex ed.

Sex ed is often preventive instead of practical.

Queer people are often excluded from the sex ed experience.

Misconceptions about sexual health have led to heavy consequences.

 
 
 

The Problem

Young adults in the United States are often unprepared to navigate the health risks and emotional nuances of sexual relationships due to the various state laws on high school sex education.

How might we fill the sex ed gap in a way that’s fun, engaging, and relatable?

 
 
solution screens.png
 

Our Solution

Smash! Trivia

Smash! Sex Ed Trivia is an iOS platform that empowers teens and young adults to make more informed decisions about sexual health through live trivia and open discussion.

Smash! has two main components: a nightly trivia game and a discussion forum where users can gain knowledge on sexual health from verified sources as well as each other.


Why Trivia?

Playing trivia helps people improve and expand our knowledge without noticing, allowing us to learn and memorize new information. It’s engaging, it’s naturally competitive, and it’s fun!

Why a Forum?

Forums are the “OG” (original) online community. They encourage open dialogue while enabling moderators to track the relevance of specific topics and content.

 
 
 

Primary Persona

Carrie.png

Carrie Ng, 18

“I don’t think sex ed actually prepared me for sex.”

Carrie is a college freshman from New York City. Diving headfirst into her college’s hookup scene, she wants to gain a better understanding of her agency as a woman. She usually parties hard on the weekends, but she also enjoys more relaxed activities like playing trivia games with her friends.

 
User Journey Map - PERSONA 1 Copy@2x.png
 
 

SECONDARY PERSONA

Zeke.png

Zeke Montgomery, 20

“I only learned anatomy and to wear a condom in a hetero relationship.”

As a queer person who grew up in Bloomington, IN, Zeke wasn’t a huge fan of his sex ed experience. Growing up, he was often excluded from sex ed discussions and felt a need to suppress his sexuality. Now that he’s in college, Zeke wants to make up for lost time and understand sexual health from a more inclusive perspective.

 
User Journey Map - PERSONA 2 Copy@2x.png
 
 

Information Architecture

Map sketch. Our team devised an app map as a whiteboarding exercise.

 

App map. This is a digitized version of the adjacent sketch.

 
 

Early Paper Sketches

Design Studio. Early sketches showing the live trivia and forum sections of the app. The first two sketches show different ways of showing the correct answer after a live trivia question. The forum sketches show that upvoting and downvoting comments…

Design Studio. Early sketches showing the live trivia and forum sections of the app. The first two sketches show different ways of showing the correct answer after a live trivia question. The forum sketches show that upvoting and downvoting comments á la Reddit was conceived in early stages of ideation.

Live Trivia. In the app’s original stages, I imagined trivia questions to live on a virtual card and flip over at the end of each time period.

Live Trivia. In the app’s original stages, I imagined trivia questions to live on a virtual card and flip over at the end of each time period.

Leaderboard and Profile. These sketches show discarded ideas such as the leaderboard main page and a college-based profile page.

Leaderboard and Profile. These sketches show discarded ideas such as the leaderboard main page and a college-based profile page.

 

Wireframes & Prototype

01. Trivia Home Page

The first screen users see when they log in. As the wireframe designs increased in fidelity, we prioritized adherence to mobile patterns and creating an inviting “Join Now” button.

low-med-high-1.png
 

02. Trivia Question

Trivia Questions will be curated by the editorial team. As the product scales, we would hope for trivia content to be sourced from forum questions. Questions will range from common knowledge to even more common misconceptions about sexual health.

 

03. Trivia Final Screen

We decided to reduce the number of actions that can be done on this screen for the MVP. Future iterations would reintroduce a Share function which would trigger the iOS Action Sheet. 

If users answer a question incorrectly or run out of time, they’ll be invited to discuss the topic in the forum.

 

04. Forum Home Page

Forum topics can be viewed by popularity (based on Reddit-esque upvotes and downvotes by users) or their date of posting.

Users can start a new topic by tapping the Floating Action Button above the tab bar. 

low-med-high-5.png
 

05. Forum Thread

Users can comment on a variety of discussion topics related to sexual health. In the app’s early stages, an editorial team will moderate the topics. As the product scales, forum content will primarily be user-generated.

low-med-high-7.png
 

Clickable Prototype (InVision)

UI Specifications Document

 
 
I would do the daily trivia because most people are interested in this topic.
— K., 24, from New York
 
 
 

Next Steps

A strategic partnership with a large media company such as YouTube that would allow us to incorporate a live influencer video host

Audio and language options to increase the live trivia’s inclusivity and make information accessible to a larger audience

In-app purchases & increased gamification through lives and boosters that can be purchased through real and virtual currency

Themed trivia nights, forum categories, Slack-like emoji reactions to forum topics & comments… the list goes on.

 
 
 

Case Study

Smash! Trivia was one of my most research-heavy projects, and I had a blast working on it with my team!

For more info on our research methods, insights, and usability testing, read the full case study on UX Collective. It should take about ten minutes:

 
 

Team Credits

Ladd Evans - User Research, Market Research, Strategy, User Flows, Sketches, Brand Design (Colors & Mood Board), Mid-Fi Wireframes & Prototype 1, Usability Testing

Eliana Teran - User Research, Competitive Research, Partnership Research, Strategy, Personas, User Journeys, Sketches, Mid-Fi Wireframes & Prototype 2, Usability Testing