SERVICES

Design & Illustration, Strategy / Writing, Social Media Integration, HTML / CSS, Javascript / PHP

[unex_ce_button id="content_wkp6q4lst,column_content_zu7fgogyq" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffd300" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]READY TO TALK?[/ce_button]

Unplanned pregnancy among teens is a persistent and troubling public health problem. Every year, The National Campaign to Prevent Teen Pregnancy distributes a quiz aimed at educating teens about safe sex and healthy relationships. Bluecadet was tasked with creating a fun online quiz that helps teenagers make smart decisions.

While working at BLUECADET I was tasked with helping design, test, create, and illustrate the Stay Teen website. The result is an eye-catching, responsive, and intuitive website that can showcase creative content while providing easy access to important information. The quiz lets teens create custom avatars to personalize their experience and directly connect with the story. Users create custom characters for themselves, their crushes, and their best friends. These characters then go through a series of scenarios, each with a problem and several outcomes. The personalized experience prompts teens to think about how they would respond to a challenging situation and its potential consequences.

stayteen_slideshow_3-1024x711stayteen_slideshow_3-1024x711

PERSONALIZED EXPERIENCE

The quiz lets teens create custom avatars to personalize their experience and directly connect with the story. Users create custom characters for themselves, their crushes, and their best friends. These characters then go through a series of scenarios, each with a problem and several outcomes. The personalized experience prompts teens to think about how they would respond to a challenging situation and its potential consequences.

Playful custom illustrations bring each situation to life. After they decide how to move on, users get personalized feedback and score points based on their answer.

fullwidth_web_stayteen-1600x600fullwidth_web_stayteen-1600x600

SOCIALLY SHAREABLE SNAPSHOTS

The final results screen gives users their total score and encourages them to share the quiz with friends via social media. They can also choose to take the quiz again to improve their score.

The “Take a Pic” feature lets users instantly share their experience via Facebook or Twitter by posting a snapshot of their avatar in action. Users can scroll through snapshots of each scenario that’s been presented, helping them remember what they’ve learned.

Given the high rates of mobile web use among teens, mobile functionality was a key priority for this campaign. We created a streamlined version of the quiz for use on mobile devices that still provided the fun, educational experience of the desktop version.

stayteen_fullwidth-1600x600stayteen_fullwidth-1600x600

RESULTS

  • Over 460,000 participants took the quiz
  • 23% of users accessed the site from tablets and smartphones
  • 88% said the quiz made them think more about the topic & prevention
  • 66% said the quiz made the risks of sex and teen pregnancy seem more real to them
  • CSS Awwwards, Honorable Mention 2013
  • Horizon Awards – Silver: Health/Human Services
[unex_ce_button id="content_193qm16np" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffd300" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://stayteen.org/quiz/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT THE SITE[/ce_button]