coming soon
this project is currently optimized for desktop
concept: making sex ed less scary
Goal: Expand Planned Parenthood’s hip new sexual health chatbot “Roo” into a fully functional cross-platform experience
Professor: Paula Seo
i see you're on a mobile device
I'd love to show you the whole project! Please come by on desktop sometime for the full experience.
more projects:
[what is it]
Normal provides a frank, engaging platform to give young people more control over their developing sex lives.
Sex education is an incredibly important topic to me. So many young people become sexually active before ever receiving accurate and relatable information.

I am very inspired by Planned Parenthood and Work & Co’s development of Roo, the cute, friendly, nonjudgemental sexual health chatbot, so I designed a way to expand the project into a more holistic app & web experience.
This is an individual project completed during 14 weeks at ArtCenter College of Design.
interactive prototype
(adobe xd)
responsive web
(limited features)
mobile app
(full features)
the full system
Responsive web platform gives a taste of the features, whereas the app delivers more content, personalization capabilities and the “multiplayer skit” feature (my personal favorite)
primary features
Live Chat
Teens can ask questions to Roo, the fun, friendly chatbot. Or reach out to a live sex-ed professional.
Scripted interactions are a great way to practice for the real world. Skits uses new technologies to reinvent the traditional scripted role play.
Teens can read / listen to retrospective stories from young adults. These stories can help them to contextualize their experiences in a broader framework.
freebie map
Many teens WILL have sex, so it's important to give them resources to do it safely. This map shows trustworthy places to get free contraceptives.
experience map
I was initially inspired by the original Snapchat UI, with its fluid left / right movement & departure from traditional bottom nav. This type of navigation matches teen mental models, while also making it clear that it ISN'T an app for their parents.
Journey Map
It was important for me to find the right story to best showcase my designs in a realistic way. By analyzing the current teen's pain points, I was able to design a system that answered them and could set the user on a more positive trajectory during their developing years.
foundational research
This diagram summarizes the findings of a paper that synthesized 55 publications covering 48 studies on young people's feelings about school-based sex education. I used this heavily as I moved through ideation & feature development.
value of script as a tool
Probably my favorite feature I developed in this project is the multi-player skit. In multiplayer skits, teens are able to connect with close friends via video chat to role play common teen scenarios. The feature uses facial features and scripts delivered in a playful fashion to take an age-old practice and make it new again.
Scripts are used across many disciplines as a way to practice and normalize subjects that may be challenging. When it comes to topics like sexual health and education, our society's taboo nature makes these things very difficult to talk about. However, having a playbook ready when confronted with the scenario in real life can empower teens to say what they mean.
skit selection & onboarding
character / filter & script intro
post-skit convo starters
& some final documentation
Process Book
Final Presentation
(Animated Keynote)
Presentation "Script"
Positioning Matrix

By positioning the current mobile landscape, I found that most offerings focus on the scientific / anatomical aspects of sex education as opposed to a more holistic approach to intimacy and relationships.
Feature Comparison

Combining for max value: AMAZE teaches lessons using relatable animated stories, REAL TALK lets teens make tweet-ish posts about their (highly relatable) experiences, while ROO uses modern tech to create a sweet chatbot for learning.
About Roo

Roo's progressive approach to sex education resonated with me. I love the open-ended answers, but my gut told me it might be stronger when paired with a feature that provides a stronger POV. This is where I came up with the idea for "stories" (real retrospective stories from young adults 18+)
Study: Big Idea #1

In my online research I came across a study from 2016 that synthesized 48 international studies regarding students' experiences and opinions regarding sex education. The key insights from this study were integral to how I designed Normal's feature set.
Study: Big Idea #2

This study felt so relevant to my mission with the app because it acknowledged:

1) the need for a more comfortable learning context
2) the problematic moral / scientific framework
3) the disconnect between sex-ed curriculum and the developing lives of teens.
Study: Insights

INSIGHT #1: mobile context is perfect
INSIGHT #2: Roo + Live Chat give expertise, privacy, and boundaries
INSIGHT #3: Stories + Skits add fun and acknowledge the digital-native dating landscape, plus Free Map acknowledges teen sexual activity & provides resources
Expert Interview #1

The key quotes I've highlighted directly influenced my feature set.

1. Normalcy is a theme: it's "Normal"
2. Role play + tech = Skits feature
3. Real situations = Stories feature
Expert Interview #2

The key quotes I've highlighted directly influenced my feature set.

1. Planned Parenthood alliance can clarify design direction
2. No posting, commenting, or liking
3. Validating a new approach to traditional situational role play
Chatting w/ Potential Users

These conversations helped me to understand the needs, feelings and experiences of my target group, and informed the persona I would build.
process | ideation
User Persona

Creating a persona helped me to understand Olivia's user journey, and therefore how I could design a system that would remove pain points and answer needs she would never admit she had.
User Journey: Before Normal

Secondary research, interviews, and persona all came together to inform the user journey. Googling sex-ed questions is a huge pitfall for teens since results tend to be a mixture of social myths, dry science, and scary worst-case scenarios.
Information Architecture

Before final features were decided upon, I designed the general architecture of the app in order to take inventory of features and understand the flow between screens.
User Journey: After Normal

This is a simplified version of my original journey map: it paints a picture of how interacting with Normal can help a teen to develop the confidence and forethought to safely navigate their sexual & intimate world.
Rough Storyboard

This is a snapshot of the first (rough) iteration of my scenario. The overall story didn't change too much between the 7th week and 14th week. Parts of the physical story were cut back, while the digital story was boosted to show full details of the interface.
process | development
final scenario
Paper Prototyping

To begin, I used the information architecture to start sketching the interface on index cards. We did some light user-testing with the flow. I got feedback that the multiplayer skit AR experience could be more abstract, rather than reading like a linear script.
Initial Hi-Fi Designs

This was the first iteration of the interface. Too many circles made hierarchy difficult to interpret. Although the abstraction is fun, the break in hierarchy could make learned behaviors more difficult.
Changing Bottom Nav

I ended up moving away from a more traditional bottom nav structure in favor of a simplified directional flow (center, left, and right). Bold use of colors makes it clear for the user exactly which section of the app they're in.
Skits: First Time Use

Because this feature is completely different from anything I've seen in an app before, it made sense to do a quick on-boarding swipe-through. The information can be skipped and re-opened at any time.
Providing Feedback

It became clear that with a self-development app like Normal, it's important to give the user a sense of how they're progressing. I put this hub in the Skits section. Their Skit results live here, as well as new challenges to encourage exploring more parts of the app.
Roo + Live Chat: Together

These are both resources that Planned Parenthood already offers, but they largely exist in different spaces, preventing a user from easily transitioning between the two as needed.
Roo Color Palette

This is the original color palette that Roo currently uses. It's largely neutral with rich purples and little sparks of brighter colors used for accents.
Normal Color Palette

I continued to use Roo's rich purples for the more serious features: Live Chat & Free Map, while integrating brighter, more playful colors for features that skew more toward edu-tainment. Overall I wanted the interface to feel approachable and edgy, rather than academic and intimidating.
Final Scenario

This snapshot shows the style of the final scenario. I used the free Humaaan asset library for the people, but made their heads proportionally larger to make them look younger. I built the other vector graphics using Sketch.

I hand-crafted the letters in Normal to show variations in shape and size, hinting at the idea that "normal" looks lots of different ways. Upside-down letters give a subtle wink to genitalia ;-)

The logo lives inside a radiused square, a key component of the Planned Parenthood logo
full documentation
final presentation
presentation script
process book
final presentation:
animated keynote
presentation script:
process book:

say hi