Menu

Case Study: WePlaygroup – Find. Meet. Play!

October 8th, 2010

Case Study: WePlaygroup – Find. Meet. Play! WePlaygroup was designed to be a social networking site for parents, with a focus on finding and creating playgroups. A playgroup is simply a gathering of similarly aged children, with one or more accompanying parents, that meet in social settings, which helps build interpersonal skills for the children. The site revolves around a user’s ZIP code, and provide location based information with regards to "near-by" content. I wanted parents to easily locate local playgroups, activity centers and kid-friendly restaurants.

To help maintain a member’s interest, I wanted to offer a host of other ancillary services: playgroup activities, parenting tips, articles and news feeds, family coupons and a general classifieds section - all of which can be contributed from and rated by other members. My goal was to provide as many opportunities as possible for the community to interact with each other, and the relevant content.

I also wanted to establish a sense of connectedness between content types. No matter where the user might end up, they would always have a chance to find some other resource that might be of interest (near-by restaurants to the playgroup they are considering joining; recent parenting tips on the playgroup activity page they’re replying to, etc.).

Case Study: WePlaygroup – Find. Meet. Play!

Why I chose Drupal

"How I built a social networking site on the bus"
I chose Drupal for its ease of use and low barrier of entry. I did my fair share of research amongst the other players in the open source CMS community, but ultimately found my way back to Drupal. I knew that no matter the choice in platforms, some diligence would be required to get past the functionality offered by an out-of-the-box site.

While I still find the backend aspects of Drupal to be a bit taxing (e.g., updating Drupal core, keeping modules in check), getting out of the starting blocks is entirely painless, if not trivial. I loved being able to spin up new local sites, test potential modules, work out their kinks and then integrate them into my production site. The development process became so fluid, that once I had the initial framework for WePlaygroup developed, I spent the vast majority of my free time (riding mass transit to and from my regular job in downtown Houston) fleshing out the mechanics of the site.

Truth be told, I ultimately chose Drupal because of the community. I had only dabbled in the PHP waters prior to starting the website, and the Drupal community not only answered questions about the CMS, but fielded general programming questions as well. That in turn motivated me to help others – I knew that working with a CMS that I cared about would make all the difference in the development process.

Case Study: WePlaygroup – Find. Meet. Play!

Design & Theming

The site leverages the default Garland theme, and has obviously been heavily customized using CSS and images created in Photoshop. The color scheme was derived from a logo I had initially contracted a professional company to develop, but after some early initial feedback, I opted to strip the logo down to something my testers felt was more “kid friendly”. For the curious, the logo/text is based off the Calvin & Hobbes comic strip.

Overall, my intent was to develop a "Web 2.0" style interface (however overdone that phrase may be). I wanted big buttons, large/legible text and a low barrier to registering on the site. My initial design was somewhat "sterile", according to one of my testers – she felt the color scheme was warm and inviting, but the icons were too "corporate". A short time later I thankfully discovered the wonderful set of "cute rabbit" icons (thanks Flameia Design), used primarily on the non-authenticated homepage, and a few list pages.

It was this change that prompted me to include a new carousel on the homepage, leveraging my new bunnies to their fullest potential. Since Drupal let me control specific regions of my front page, I was able to drop in some custom jQuery magic. The introduction of the carousel also afforded me the change to further drive new users to the registration process, as the last slide displays the rather large "Register" button.

Case Study: WePlaygroup – Find. Meet. Play!

Implementation

As with any new undertaking (and when I started this project, I was very new to Drupal), the best approach is to dive right in an experiment. I started simple, and began with what I knew would be one of two focal points on the site – groups – or in Drupal’s case, Organic Groups. I knew that the heart of my service would revolve around users finding or creating groups, and that that would be accomplished via ZIP code searches.

Once I had the basics of OG working, it was a matter of simply "tacking on" all the other features I thought would make the site useful to parents looking to find playgroups, and meet other parents: forums, friend lists, sharing content, photo galleries, bookmarks, etc. The bulk of this functionality was handled by out-of-the-box Drupal community modules (with some slight tweaks here and there for formatting purposes primarily). This interconnected idea leant itself to a few helpful "near-by" modules available from the members homepage, showing both playgroups and other moms with a specific radius to their provided zip code.

From the onset, it was my intent to make the site as "socially accessible" and acceptable as possible. To that end, virtually every content type can be voted on by other members, or shared using either a custom Share this! module or the integrated Facebook module. In turn, the comments can be flagged (discouraging and removing negative comments) or marked as helpful (encouraging and rewarding user feedback).

Case Study: WePlaygroup – Find. Meet. Play!

Features & Highlights

Playgroups: The focal point of our service, this section allows members to search for playgroups in their zip code as well as view three corresponding lists: all groups, those that were recently added and a list of the user’s current group memberships. From this page, members can also create a new playgroup using the consistent “add new” button.

Activity Centers: Of almost equal importance to the playgroups content is our list of available activity centers – locations where groups can meet and play (aside from member homes). Members can create events at a particular center, and manage all aspects from their group’s homepage.

Restaurants: This section provides access to “kid-friendly” restaurants that have been submitted and rated by other members. Again, the content is searchable, and displayed in three formats: complete list, recently added and highest rated.

Activities: Similar to the restaurants content, this section displays activities that playgroups can leverage during their sessions. Members can search via context or age group, as well as view a complete, recently added or highest rated list.

Articles / Tips: Both of these areas provide useful playgroups (and parenting) advice for our members. The contents can be voted on, and following suit with the other content types, is context searchable and listed in several formats.

News / Coupons: These two sections leverage the default Drupal Feed Aggregator module. By pulling in specific parenting / playgroup related RSS content, I was able to create two areas with virtually no effort on my part.

Contributed Modules

As most new Drupal users fall victim to "module overload", I set an objective to limit my number of active mods to fifty or less. This is by no means a comprehensive list, but I think represents a broad spectrum of modules in use on the site:

  • Activity (OG Activity, User Activity, Flag Activity): keeps track of and displays all user activity on the site, for other members to view
  • CCK: absolutely essential, and used in the creation of our numerous custom content types
  • Calendar / Event (Calendar Signup): enables members to register for group related activities
  • Flag: members can flag content (positive and negative), as well as bookmark content for future reference
  • ImageCache: several of our content types allow for associated images, and this module provides the necessary resizing
  • Location (GMap): pivotal module, as the focus of WePlaygroup is location based search and content creation
  • Organic Groups: as mentioned before, this was the entry point for our project, and the rest of the site was developed around this module
  • Panels: controls several of the “content-heavy” pages, such as the user’s homepage
  • SEO Checklist: as the name implies, this provides a pretty concise means of following Search Engine Optimization best practices
  • User Relationships: we had intended for the site to be “friend driven”, and as such, needed a means for members to easily become friends
  • Views: another undeniably essential module, used in the creation of virtually every page of the site
  • Voting (Fivestar): as a community centric site, having the means for members to rate other member content was crucial

Some other very noteworthy modules in use are: Aggregator, Fbconnect, Content Profile User Registration, Messaging / Private Messages, Notifications, Pathauto, Thickbox, Watcher, CAPTCHA, Google Analytics, XML Sitemap.

Hosting

After much debate and forum scouring, I settled upon Linode.com as my host. This was in part due to the affordable price point, but also the broad access to the environment you’re given with a hosted account. I knew fairly early on that Drupal was a resource intensive CMS (I’m not entirely sure there is a viable CMS that isn’t to be honest), so I wanted to make sure I had some good performance for the initial launch, and early part of the website’s lifecycle.

The downside was that I was far from a bona fide sysadmin, and knew next to nothing about Linux environments. Thankfully the Web is teaming with helpful tutorials, and equally helpful individuals who are all too happy to assist in the development of an efficient environment. Linode themselves have some wonderful tutorials, and those, coupled with some incredibly helpful Drupal folks (http://groups.drupal.org/node/25425) made setting up my new server almost painless.

Now the current environment is far from optimal, and I have no illusions that I could handle the "Slashdot effect", but I am confident that my host can grow with my needs. This, along with Linode’s recently launched backup/recovery solution made my hosting decision all the more acceptable.

Conclusion

I am honestly amazed at the power and simplicity of Drupal. Let me re-phrase that – the power and simplicity, once one has become immersed in the Drupal lingo. The learning curve may have initially been steep, but the rewards far exceeded my expectations. Drupal is an extremely versatile CMS, with a very robust and supportive user community. To everyone who has contributed, and to those who tirelessly support the community, my hat is off to you all!