Talk: The New Sex Ed
Mobile Onboarding

User Research + Interactive Prototype
for a Sex education web app

Client

Talk: The New Sex Ed

Duration

3-5 Months

My Role

UX Research,
UI Design

Team

Danielle Shoshani,
Payal Bhujwala

Sex Ed is broken.

We live in a sex-saturated culture, but the topic is rarely discussed openly or effectively by schools or by parents. This leaves teens without the knowledge and support they need to make good decisions and keep themselves safe.

For over twelve years, Talk: The New Sex Ed has been on a mission to design, study, and advocate for best practices that empower young adults to make informed, responsible choices about their relationships and sexual health.

Virtual sex education is the future.

In order to reach and serve more young people in need, Talk is undergoing a transformation to adapt their successful classroom-based educational model to an online format.

To begin tackling this challenge, Talk is developing a mobile web app for college students across America. Our team was entrusted with designing an amazing onboarding experience and style guide for the platform.

“The quality of [sex] education young people receive should not be dictated by where they live or the school they attend.”

— Samantha Bushman, Founder + CEO of Talk

Our Solution

1. Welcome

Get users excited for sex ed like they’ve never seen it before: private, relatable, and tailored to you.

2. Motivation

Go on, we’re listening! Make users feel heard by starting with their personal motivations.

3. Background

It’s all about you! Ask the user to describe themselves and their prior sex education for a personalized experience.

4. Sign Up

Now that you’re onboard, get a sneak peak of what’s waiting for you and sign up to get started!

Just want to see the final product?

Jump to Solution

WHAT MAKES ONBOARDING EXCEPTIONAL?

Lumosity

Duolingo

Calm

Trip.com

Real Talk

Ask Roo

SECONDARY RESEARCH

There’s no second chance at a first impression! Onboarding is your first (and only) chance to attract new users. Use this opportunity to demonstrate your product’s value, to get a better understanding of your user, and to transition smoothly into the app.

To see great onboarding in action, our team explored well-reviewed products across a wide array of industries, and ran a quick-and-dirty Competitive Analysis on the onboarding experiences of two other online sex ed programs: Real Talk and Planned Parenthood’s Ask Roo.

Check out some of our key takeaways below:

The Fogg Behavioral Model theorizes that behavioral prompts (like signing up!) succeed when the actor has sufficient motivation level and perceived ability.

Motivation. How much do I want this? Have the user contemplate the shortcomings of their previous sex education and how much they have to gain through a personalized sex ed experience.

Ability. How hard could it be? Give previews of how easy and fun the program will be, directing them straight to the information they want. Then, make a quick registration process that makes the final sign-up hurdle effortless.

Frame your onboarding as a personalization wizard, rather than a sales page or data mining.

Let the user set their own goals, and then prove that you're really listening by repeating back their choices and recommending relevant content to them.

Today's users appreciate and expect personalized experiences, so always give a reason when requesting personal information and guarantee privacy whenever possible.

Simple onboarding gets more users to the sign up page, but slightly longer or more complex onboarding has been found to increase the final conversion rate. (See: Lumosity's Onboarding)

Gradual engagement postpones registration until after an engaging onboarding survey or app preview, at which point the newly-invested users must register in order to progress further. Registration is then a small step in a larger process that has already demonstrated value, rather than the primary obstacle between the user and the app.

Maintain the user's motivation throughout with gamification elements like progress bars and incremental positive reinforcements, such as well-done messages, animations, and illustrations.

Plus, delayed registration provides an opportunity for Talk to establish its trustworthiness before finally asking young adults for identifying information, like their name and email address.

QUESTION YOUR ASSUMPTIONS

“PRETOTYPE” + CONTENT DESIGN

Our team worked with Talk to develop a set of informative interview questions, followed by the lowest-fidelity onboarding prototype possible: just text on paper.

Our “pretotype” document included basic paper questionnaire formatting, potential content, and specific language provided by sex educators at Talk. All other details and styling were purposely omitted to aid participants’ focus on the relevant information.

UXR + TESTING

Our team conducted semi-structured interviews with five American college students. We tested the pretotype via the Think Aloud Protocol, asking users to verbalize their thought process as they imagined completing this survey document on a mobile phone.

Each interview was transcribed (Otter), organized by interview question (Google Sheets), and imported to a collaborative digital whiteboard (Mural) as virtual sticky notes. Our team then synthesized the qualitative data using affinity mapping to come to a shared understanding and generate insights.

Synthesis of Paper Pretotype user testing results. (Click image to see more) — Synthesis of Paper Pretotype user testing results.
*(Click image to see more)*

Get Your Ideas Out There

Mascot

Teacher Caricature

Welcome Carousel

Curriculum Carousel

Motivations Survey

Curriculum Survey

Messages Inbox

IM Chat Fiction

Conceptual Sketches

Sketches are the fastest, easiest, and most inexpensive way to help clients and teammates visualize what’s possible and give even more constructive feedback. Use parallel prototyping to independently create super-quick illustrations that demonstrate a wide variety of ideas.

Based on our client’s feedback, we were able to move forward to iterate on three viable interfaces: carousels, questionnaire forms, and text messaging.

Time to Design

Launch Carousel with Informal Language

Launch Carousel with Formal Language

Forms on Motivations

Forms on Goals

Forms on Background

Forms on Recommendations

Chatbot Inbox

Chatbot Conversation

Low-Fidelity Prototypes

We designed three mobile-first, low-fidelity prototypes to save product design time and put Talk in the ideal position for a responsive website design later on.

1. "Informal / Formal Launch” Carousel

An introductory carousel, with two language styles: “friendly + casual” content (light gray circles), or “motivational + informational” content (dark gray circles).

2. "Better-Formed Forms" 3-part questionnaire

A classic questionnaire + progress tracker. Asks the user about their motivations, goals, and background. Ends with a personalized program recommendation.

3. "Text Messages" chatbot

“Text” with a friendly bot that introduces the app, and asks the user about their background and interests. (This instant messaging design also reflects the “chat fiction” device that Talk was considering for the rest of the app.)

Testing

Our team ran six semi-structured interviews with American college students over video calls, screen-sharing each prototype in randomized order for user feedback.

Here’s what we learned:

Top Design: “Informal Launch” Carousel

Our users enjoy familiar interfaces with progress bar + questions by category
Long questionnaires can easily feel impersonal, boring, + slow
Text messaging feels natural + relatable, but limited + confusing as onboarding
Users prefer short + informal wording with emotional appeal, over more formal wording with educational appeal

Users appreciate content about:

Anonymity (“No one sees your answers”)
Personalization (“You are unique”)
Difference from traditional sex ed (“Not your grandma’s sex ed”)
Scientific basis (“Built by teens, parents, educators, and scientific research”)
Inclusivity of demographic options (sex, gender, orientation, etc.)

ITERATE, ITERATE, ITERATE

MID-FIDELITY INTERACTIVE PROTOTYPES

Equipped with new findings, our team iterated on each low-fidelity design based on user feedback and fidelity level.

1. WELCOME

Due to its popularity, we begin the mid-fidelity onboarding flow with an updated Informal Carousel to introduce Talk and the web app’s top user benefits.

2. PERSONALIZATION SURVEY: OPTION 1

Learn about your user with the updated Questionnaire Forms, including fewer questions, more engaging language, + skip options.

3. PERSONALIZATION SURVEY: OPTION 2

Alternatively, keep your user engaged with the updated Chatbot Messenger, including expositional modal dialogs + skip options.

4. SIGN UP

With the onboarding experience nearly complete, users are given their personalized recommendations and directed to an easy registration screen.

TESTING

Our team ran user + usability testing with six American college students. With interactive access to each prototype, they were asked to complete the onboarding experience while verbalizing their though process via the Think Aloud Protocol.

BEST USER FLOW: WELCOME CAROUSEL + QUESTIONNAIRE FORMS

The Questionnaire is simpler, better organized, more recognizable, and feels more anonymous.
The Chatbot is more fun and personalized, but at the cost of feeling less anonymous. Not everyone wants to “talk” to a chatbot about private or sensitive topics.

OVERALL FEEDBACK

All participants thought that the current onboarding length is good.
All participants loved the current wording.
Most of the participants said that they would download this app if it was available.
However, half of the users wanted more examples of the app’s content before they would sign up (e.g., real screens in the personalized recommendations).

THE FINAL DELIVERABLE

HIGH-FIDELITY MOCKUP

Informed by our prior research, we created a full-color, mostly functional Figma prototype and corresponding style guide. The final onboarding user flow has been broken down into five sections that can be further tested and used modularly.

Talk Welcome Carousel.gif — 1. Welcome

**Brand Launch Screen + Top User Benefits Carousel**
Carousel to summarize intent & capture interest
Get users excited with a sneak peak at what Talk’s app can do for them
Reassurance the user that Talk’s sex education is modern, relatable, private, and tailored to them

Talk Motivation.gif — 2. Motivation

**Self-Selected Personalization**
Go on, we’re listening! Make the user feel heard by starting with their personal motivations.
This ‘hook’ helps users recognize their own unique goals, and helps Talk deliver a personalized experience.

3_ Demographics 1.gif — 3. Demographics

**Gather Basic User Info**
It’s all about you! Ask the user to describe themselves for even further personalization.
At the same time, Talk gets to gather a wide variety of quantitative and qualitative data on their users. Win-win!

4. Experience

**Gauge Existing Sex Education Level**
What do they already know? Meet users where they are by asking about their past experiences with sex education.

5. Sign Up

**Personalized Recs + User Registration**
Based on their responses, get a sneak preview of the kinds of interactive stories and materials Talk offers.
Now that they’ve put in time and energy, finish with an easy account registration!

BONUS!

Outside of onboarding experience research, our team did some extra sleuthing to benefit our clients at Talk.

USABILITY TESTING OF PRE-EXISTING “CHAT FICTION” APP DESIGN

A prior team of user designers had come up with a prototype for Talk that our client opted not to use. But that doesn’t mean we can’t learn from it!

Our team conducted five semi-structured interviews with usability testing of the old design, and used the results to inform how we could help both our users and our clients succeed.

Synthesis of “Chat Fiction” design usability testing results. (Click image to see more) — Synthesis of “Chat Fiction” design usability testing results.
*(Click image to see more)*

Additional UXR: SEX + EDucation via the web + apps

Our clients at Talk have been working in-person with teens and young adults for many years, but still had some questions about their digital and mobile sex ed experiences. These insights will be vital for further development of the Talk app’s content, so we offered to finish each of our user testing sessions with a series of questions related to sex education in the digital sphere.

Rectangle (white, 50percent opacity).png — WHAT’S NEXT?

Check out Talk’s upcoming app, **CampusTalk**: a text-based “chat fiction” story platform for sexual health and relationships.

Back to Top