Hookup (Now Juicebox) is a sex education website and iOs native app (in progress) helping teens connect more accessible information about safe sex and healthy relationships. After winning 3rd place at Startup Weekend EDU in San Francisco, we stuck as a team and successfully launched a beta test at the University of Tennessee–Knoxville Sex Week in May 2015 and during the 4.0 Launch program in New Orleans.

Hookup Feature: Share Your Story

Hookup Feature: Ask a Sexpert


Role

My role the main designer for UX+UI on the web app, marketing, the landing pages, pitch decks, and social media kits. While being the user experience designer, I helped in the user research at the beginning and worked with a dev to finalize the product with two main features. Share Your Story & Ask a Sexpert.

Problem

There isn’t a place for teens to get sex education in a fun way. Sex ed in schools is outdated and in some states, sex ed doesn’t exist.

Current chats arent 24/7, Q&A forums take too long, sex ed is currently boring, sex ed in schools aren’t as informative when ppl have questions, Google is an unreliable trusted source. Workshops offered by schools don’t happen enough, finding a community of sexperts that go with a specific topic is difficult.

Solution

A sex ed-focused app and social network for today’s under-25.The place to ask their burning questions about sex and relationships. The web app offers two features: Ask a Sexpert, which allows users to write anonymous questions and receive answers from experts who work at organizations such as Planned Parenthood in real time, and Share Your Story, an also-anonymous forum-type feature for people to share their sexual experiences.

Video of HookUp in the local news, pitch to students, animation (0:55), and testimonials.


As Featured In


Pitchdeck On Why We Started This


Process of Hookup (Before & After)

  1. During Startup Weekend EDU, worked with 1 dev and 1 business person to start a team about this idea.
  2. Did a quick mockup to see if the idea was of interest.
  3. Went out to the local malls to talk to teens about this idea with sketches and mockups to see where improvements could be. Spoke to some teens for user research.
  4. After Startup Weekend EDU, doubled down on  branding for Hookup (did a quick brainstorming and workshop with the founder to come up with the foundation of product and tone)
  5. Worked on beta for college audiences while gathering ux research. Taught the founder how to do the process for when she went out to targeted groups and meetings.
  6.  Worked on beta with developer to create ux & interaction landing pages -> login -> account -> 2 features called Share Your Story & Ask a Sexpert
  7.  Had beta test and presentation with college students

Starting with the Users:

User Persona:

User Scenarios:

Some user scenarios are singular, we should be thinking about couples/2users ones to account for too.

15 year old is texting his best friend. He has a date and his buddy responds with a joke and meme “when you forget to pull out”. He doesn’t know what this means and needs to find out what it is

18 year old queer only can find articles related to sex on sites like autostraddle/OUT that are general. They’re looking for tutorials and how-tos to help explain more deeply on toys and safe sex

16 yr old virgin was told of hookup by health teacher, curious to ask more questions, they get on hookup to ask a sexpert a question

21 year old college student watch/read the book 50 shades of grey. Wants to learn more about bdsm before talking with their partner.

14 year old Freshman lgbtq teen is just starting to come out at their new school, they dont know what lgbtq relationships/sex is like, only what theyve seen in hollywood movies, they are curious about it and want to find lgbtq sources

15 year old boy start watching porn, think sex is funny and want to read more about sex. he goes to hookup to read stories about sex.

15 year old girl thinks about having sex for the first time but wants to know what it’s like. goes to hookup to read other users’ questions about sex and what sexperts have to say. maybe gets courage to ask own question

User Goals:

Educating, informing more about sex ed, be entertained, laugh

As a user I want to get more knowledge in sex ed to be a better partner

As a user I want a question answered right away

As a user I want a sexpert that I can talk to about relationships

As a user, I want to be entertained and laugh about others’ experiences

As a user, I want to find other users experiencing things like I am

As a user, I want to find out what sex is all about and explore


Branding

Logo Before

Logo After


1st Draft of Hookup

Hookup Sex Ed app screens for Hackathon

During Startup Weekend, I partnered with a sex ed app idea to create a visual mockup of top features would be highlights.


2nd Draft of Hookup

Hookup Sex Ed app screens for REAL BETA launch

I worked with a dev to create both mobile & desktop friendly screens for the homepage, login, share your story and ask a sexpert chat features. I’d design mockups for what the UI and interactions should look like for both screen sizes and using a simple google doc, putting in HTML/CSS codes on specific UI sizes, colors, and more for the dev to easily code in.

Below are example screens of what I did for both mobile web app view and desktop view for 2 of our core main features to test out with users and for the beta: Share Your Story and Ask A Sexpert

 

Below were some quick ideas and thoughts I kept in mind when designing this:

  • Success apps are more focused. Platform apps fail, there should be only the necessary required features to make the core experience based on user scenario/goals
  • Go generic first (MVP). Getting the basic functions first, visual and other interactions comes later.

Ideas & Inspiration:

  • Be My Eyes route to crowdsource and meet demand and supply ratio.
  • People get to select sexperts, like when selecting a doctor
  • Sexperts could hold group chats/live chats, groups of students & health would find it valuable. Wouldnt have to spend money to get a sexpert to come into schools
  • Content public vs private. Content for chats now is only seen by one person, concerns can be missing out on other opinions and thoughts, sexperts having to answer same questions over and over
  • All content should be public if it is anonymized and not repeat/boring

Other features to boost for a better UX:

  • Onboarding experience (important for engagement and returns.)
  • Reward system (will add an extra fun layer and icons. Adds a system for both sexperts/hookup community to gauge their knowledge and such.
  • What about chat groups? Would having group discussions Q&A be engaging?

Core features:

  • Chat: the need to know
  • Stories: discovery/browse

Creating the UI+UX:

I worked with a developer on a web app for mobile and desktop friendly devices using a simple google doc and putting in HTML/CSS codes on specific UI sizes, colors, and more.

First, we worked on our user personas and target market of teens to college, where sex ed is the most important. We’d come up with a list of what users could do within our driven framework we thought about based off of user research we did with surveys and by asking teens in a mall.

I made quick sketches/mockups, did some research on core chat functions I should prioritize and then based off the brand identity we had established, created the UI screens. This was a collaboration effort with Brianna, the main founder, and Laura, the engineer, who would provide constant feedback.

Below are the Share Your Story & Ask a Sexpert feature.

Share Your Story interactions designed:

  1. Users can submit their stories
  2. Users can read stories (gets updated constantly as new stories get told)
  3. Hookup can moderate by approving or deleting
  4. Users can view who has submitted the story and datestamp
  5. Users can upvote

I created the upvoting icon of a condom to make it more engaging and interactive. Instead of being the typical thumbs up, I wanted to implement something branded for the app. Depending on what feature you’re on, I used fruit to create fun content as a strategy to catch attention in some marketing and onboarding.

Web app on mobile:
Reading stories <> Share Your Story <> Being able to do Upvoting

Ask a Sexpert interactions designed:

  1. Users can submit questions
  2. Users can read answers
  3. Hookup sexperts will be notified via email of an answer
  4. Hookup sexperts can answer the question
  5. Users can see who is active/inactive at the time

Web on desktop:
Asking a question+ Reading Q&A <> Selecting a sexpert

Web app on mobile:
Asking a question <> Reading Q&A <> Selecting a sexpert

Thanks for reading!

Check out Hookup (Now Juicebox).

Next steps/Improvements: logistics of how Ask A Sexpert works. Taking down the time from students having to wait by getting more sexperts to be able to volunteer was key while developing an email system in case a sexpert wasn’t available.

I wasn’t able to volunteer anymore with the project as the founder joined New Orleans startup bootcamp to further work on this idea.

Hookup Sex Ed App


ClientHookUpYear2015ServicesUX+UI, WebRecognition3rd Place, Startup Weekend EDU