One mom's mission to create a safe online space for teens

Yoursphere.com is a safe kids-only social network (built with Drupal 5), which is complemented by an online safety blog and discussion site, internet-safety.yoursphere.com (built with Acquia Drupal).

Founder Mary Kay Hoal is a savvy mother of five. When her children started spending time on social network sites such as MySpace she did a little research and was shocked to find that social networks were magnets for sexual predators and rampant with inappropriate content targeting youth. "We wouldn't open our front door and invite 29,000 registered sex offenders into the house," Mary Kay told her kids, "so why should we accept that online?"

So she banned social networking from her home and saw her approval rating dip below that of steamed broccoli. Besides being unpopular at home, Mary Kay also knew that trying to banish MySpace would be a hopeless game of whack-a-mole. She really had no choice -- it was her duty as a mom to create a safe alternative.

The core idea: kids-only space with privacy but not anonymity

One of the most liberating features of the Internet is its anonymity. However, lack of accountability also seems to empower predators, enable bullies and invites a general coarsening of behavior. So, the first step in creating a safe environment for Yoursphere.com involves completely removing anonymity and vetting each parent carefully by verifying their identity and conducting an exhaustive background check for a record of sex offences.

To encourage kids to enjoy using the network, Mary Kay came up with a simple formula: parents are vetted but then are not allowed into the actual social network area -- that area is only for kids. This compromise satisfied both parents and kids:safety appeals to parents, privacy appeals to kids.

Creating the company

Mary Kay's first move was to partner with CEO Leland "Lee" Rees, who had recently sold his high school sports nexus MaxPreps.com to CBS Sports and was looking for a fresh challenge. Together Mary Kay and Lee marshaled the teams necessary to build a media company, including marketing (Premise), PR (milk milk collective), bookkeeping (Montgomery Professional Services Corp.) and legal (Bullivant Houser & Bailey).

With a business structure in place all they needed now was...er, a website!

To lead the Yoursphere web development team Mary Kay and Lee aimed for an expert in security, law enforcement and big-database systems. Enter Chad Jones, a developer from the California Department of Justice sex-offender tracking network (VCIN). Jones arrived with experience in Oracle, Enterprise Java and a bouncy smile, but he came with a quirky requirement: the site must be built in Drupal.

The Drupal Team

The Yoursphere team is entirely remote - located throughout North America - from Canada to Texas. Team members share enthusiasm for Drupal development, a sense of humor and a live Skype chat room.

The team (four full-time, four contract) includes includes Caleb Gilbert (Caleb G) of HigherVisibility who mapped the OG architecture and wrote the highly customized signup process. Chris Shattuck (stompeers) of implied-by-design implemented most of the social networking functionality including the Ajaxy theming goodness and the custom contest engine. Chad Laurans (chadcrew) helped build out the billing system including automated reports and integration with Authorize.net's CIM. At the core of the team Anne Easterling serves as the project coordinator, weaving an entirely distributed team together and translating current priorities into actionable unfuddle tickets.

The Pieces

Putting Yoursphere.com together presented several unique challenges: How could they accommodate the variable traffic certain to follow an audience limited by school schedules? How could they integrate the necessary background search and subscriptions? And most importantly, how could they leverage Drupal functionality to save time and development cost?

A little bit of custom Drupal stuff…

Several Yoursphere.com needs demanded custom programming:

• Multi-step registration: The multi-step signup process is highly customized, with linked accounts, identity verification, and a parent background check. The process had to accommodate accounts being initiated by either the child or parent. And in the case of a parent creating multiple child accounts, it must also accommodate multi-account creation in registration form.
• Identity safekeeping: All personal identity data is fragmented and maintained in secure offsite facilities. Because our database links parents to children, it's important for security purposes to avoid storing data that would allow a database breach to result in a list of kids identities. Even the billing system is structured without local storage of parent identity.
• Multiple subscriptions: The custom billing system allows multiple variable subscriptions per parent.
• Detailed reporting: The custom reporting module centralizes numerous key metrics and reporting, then periodically delivers various reports to the appropriate party. For example, the CEO gets a daily overview, the accountant gets monthly revenue summaries, and the marketing team gets funnel tracking reports.
• Member contests: The custom contest engine allows us to constantly roll out interesting and varied contests to pull kids into the sphere activities. The contest engine integrates OG, Fivestar, CCK and the Voting API. Contests are group-centric and time-sensitive, have multiple voting mechanisms and automated winner reports.
• Sophisticated feeds: A new Power Tool module (soon to be contrib) provides Ajax sortable and searchable feeds and lists with a high degree of SQL control -- allowing us to easily provide fast and DB-optimized custom searches with complex application-specific rules. For example, we have layers of age restrictions on user searches to limit interaction between kids under age 13 or between teens with too much age difference.
• Customization for user-created groups: The OG-editing page was customized to allow Farbtastic-integrated theming of user-created groups.
• Drag-and-drop “top friends”:The buddylist module was customized with lots of Ajax-fun to allow members to select and edit their “top friends”.

…And a whole lot of leveraged Drupal contributed modules

While the team realized that custom solutions were needed, they were also committed to getting the most of Drupal core and contributed modules. These are highlights of how Yoursphere leverages that functionality:

Spheres of Activity

A major shortcoming of most social networking sites is that there's just not enough to do. The “sphere” in Yoursphere stands for social hubs, or spheres, where members can participate in contests, converse with one another, and share photos and stories. They can also create their own spheres within sphere categories. For example, we set up the Music sphere category, and one of our members created a Country Music Sphere.

• Sphere membership: To handle memberships to spheres, we use ORGANIC GROUPS. We tap into various OG functions to display what spheres a member belongs to, and provide a quick-jump menu of spheres so a member can quickly navigate to a particular sphere.
• Sphere theming: The ORGANIC GROUPS / PANELS integration was our first choice for managing custom content and theming on spheres, but because the interface was a little complicated and our target user is between 9 and 18 years old, we instead decided to use CCK to hold configuration options and provide a simpler, more restricted form instead. Using the integrated FARBTASTIC color wheel, members can select colors for their theme, and through some custom CCK fields, they can select what content to enable in their sphere.
• Sub-spheres: Associating spheres with sphere categories presented a unique challenge, since there isn't a default way to accomplish this hierarchy in ORGANIC GROUPS. Our solution was to develop a hierarchical vocabulary using TAXONOMY and associating each sphere with a taxonomy term. To insure that the taxonomy links properly with the spheres, we use hook_nodeapi to make the association upon sphere creation.
• Sphere activity: We created several content types for members to use for content, including textual posts, the ability to upload photos, and video content. For photos, we use IMAGECACHE extensively to auto-generate newly sized photos in thumbnail grids and previews. We've also started to use some of the more advanced features of Imagecache to give the generated images some character, like tilting images randomly. We don't host videos directly, so members can add videos via YouTube. We use some custom code to re-size the videos for thumbnail and full page previews.

Owning Your Profile

On a social networking site, the profile page is the member’s identity. Our challenge was to balance the need for a simple interface with a desire to have many fields that teens can share their interests.

• Custom profile edit form: We use the BIO module to provide custom member information, like favorite music, books, likes, etc. The BIO module creates a node of a particular type associated with the user that created it. Typically, the member will see an additional tab on their user page which will direct them to a different page where they can input their info. We wanted something simpler and more intuitive, so we integrated the user edit form with the bio form using hook_nodeapi() and other api functions provided by the Form API. We then hid all the fields that members won't be editing using the FORM FILTER module. The result is a single, simple form where every input is meaningful.
• Finding members: Using the information members provide in their profile, members can search for other members with similar interests using an ajax-y search form generated by the POWER TOOL module.

Keeping up with Friends

As with any social network, making and keeping up with friends is essential to the member experience on Yoursphere. After weighing a couple of options, we decided to use the BUDDYLIST module because of the additional contributed modules that extend its functionality. We also layered a custom module that allows users to select top friends via a nice ajax-y drag and drop interface.

• Appropriate friendships: In order to comply with COPPA restrictions on the activity of pre-13 year olds, we have to intercept friend requests to make sure that pre-13 year olds can only befriend other pre-13 year olds. After 13, we check to make sure that there is only a few years between the ages, otherwise it's considered a risky relationship.
• Friend activity: We use the ACTIVITY module to generate feeds of friend activity. The activity module provides the API for registering the activity, and then we layered some custom code to generate the activity based on buddy list relationships.
• Private Messaging: We use the PRIVATE MESSAGING module to allow users to send messages to one another. We also had to layer in some custom code to only allow members to send messages to users they had befriended. To accomplish this, we mostly used hook_form_alter().

Instantaneous Contests

We wanted to provide the ability for non-expert admins to create contests for members. These contests would involve a member submitting a particular type of content, and then aggregating submissions into a page where other users could vote on the submissions. The contests needed to be time-limited, and most are also sphere-centric. That meant that in order for a member to participate, they needed to be a member of the sphere that was associated with the contest. A tall order!

• Contest configuration: CCK is used to generate a contest form with associated configuration settings. For a couple of the more tricky inputs, we had to use hook_form_alter(). Contests can be configured to allow only a certain number of total submissions, only a certain number of submissions from each user, and allows the votes of different users to count for different values based on role.
• Voting Mechanism: We use the VOTING API and FIVESTAR modules to track votes. We created a custom fivestar theme that looks like a single button that says "Vote". We wanted to use this mechanism to discourage negative voting. So in our fivestar configuration, we have it set to a single star and hide all the extra text that it would normally add to voting.
• Tallying the Votes: We use a custom SQL statement provided to the POWER TOOL module to create an Ajax-refreshable table that tallies the results of each contest for each sphere independently. The winner can be chosen on the basis of the number of votes, or chosen randomly.
• Promoting the Contests: We use some custom blocks on the sphere pages and in the side region to automatically display recent contests that the current user is eligible to participate in. These blocks make sure the the member belongs to a participating sphere, and that they have been a member of Yoursphere for the duration of the entire contest.

Growth-oriented infrastructure

Social networking sites are especially hard to scale on the database tier having fewer caching opportunities. For example, with Yoursphere's particular application the team expects to see a couple spikes in traffic each afternoon and almost no traffic at night. The ideal infrastructure would automatically scale the web and database tiers based on actual current load--provisioning an extra dozen boxes for just one hour each day to handle a traffic spike, and then offloading the extra servers when no longer needed.

This was achieved by partnering with WorkHabit to prototype their ground breaking Elastic2 cloud-based, auto-scaling Drupal platform. With the automatic scaling promise of cloud computing fully realized, Yoursphere can scale to billions of pageviews or more, allowing us to focus on building a really fun product rather than babysitting servers.

Then a place for parents

After Yoursphere.com officially launched in August 2008, the team quickly realized that parents needed their own space. Since Yoursphere.com is exclusively for youth age 9-18, parents couldn’t have a place there. So the team set out to create a place where parents and youth leaders could learn about Internet safety and network with those who shared their interests, and thus internet-safety.yoursphere.com was created.

Because this new site needed to be developed separately and as quickly as possible, the team decided to use the Acquia Drupal package. The package included the key features – blog and forum – which meant that the site only needed theming and a few supporting modules to be ready to roll.

The end of the beginning

There’s no doubt that the flexibility of the Drupal platform has been instrumental in creating a complex, feature-intensive site in a few short months. Even as the site begins to attract families – youth and parents alike – the team is already planning new and exciting ways to apply even more Drupal functionality to fulfill the mission of providing an engaging, safe social networking home for youth.

Drupal version: Drupal 6.x