Iheartadoption.org is a website developed by the Independent Adoption Center (IAC) that addresses the issues birth parents face when considering open adoption for their child. The site provides a social network for birth mothers, on-line counseling support, parent profiles, as well as stories, photos, and videos contributed by IAC birth parents. The site was developed in house using Drupal 6, and was made possible by a grant from the Albert & Elaine Borchard Foundation.

Social Support Network

The social networking features of the site give women considering adoption a place to find support and advice from other women who have or are also considering placing their baby in an open adoption. Users can create a profile, make status updates, create blog posts and photo albums, chat with other users, and make new friends. Because this section of the site is accessible only to birth parents, our users can talk openly about their experiences with each other. Using Drupal social communication tools, our counselors are able to engage with their clients in real-time in a non-intrusive way.

Adoptive Parent Profiles

Families working with the IAC can also create profiles on I heart adoption. With these profiles adoptive families can describe themselves in detail, upload photos and letters to birth parents, and link to their website or social networking profiles. Traffic on their profile can be tracked thanks to the Google Analytics module.

Women considering adoption can search and browse these profiles based on their preferences. Searches can be refined by location, family type, religious beliefs, spoken languages, and more. They can exchange private messages with their favorite families, and flag their favorites for future reference.

This part of the website has proven invaluable for our adoptive families. Getting a website on-line was one of the most difficult steps for many families seeking adoption, and by utilizing the power of Drupal we are now able to offer a quick and simple way to create a web presence.

Other Features

  • On-line chat support: Users can chat with our licensed social workers to get answers to all their adoption questions, all without leaving their browser.
  • Facebook integration: Adoptive families can encourage their friends and families to spread the word by liking their profile.
  • Due date calculator: Pregnant women can get an estimate of their due date using our calculator widget.
  • Counselor workflow: Our social workers can monitor the progress of their clients from account creation to publishing their profile, providing feedback along the way.

Why Drupal?

Once we had developed a plan for all the site features, we began to explore ways to implement it. After contacting a few professional web development shops for quotes and comparing it to our total budget for web and TV advertising, we decided to look at options for developing the site in-house. Doing so would allow us to build the site and have plenty left over for an associated advertising campaign.

Some research on how to build such a site quickly led us to CMSes like Drupal, Plone, DotNetNuke as well as some SAAS options like Ning. It was soon decided that having complete control over the software and the server would be a better long term option for our agency, and so we narrowed the list down to the "big three" of Drupal, WordPress, and Joomla!

With the help of many blog posts and some poking around on http://cmsmatrix.org/, Drupal soon emerged as the best option. WordPress was too limited in its abilites, and Joomla! was considered not as SEO friendly. Drupal was given the highest marks by almost every writer we encountered. Ultimately we chose Drupal because it provides:

  • A free, open source platform
  • A secure and highly extensible framework
  • A large and friendly community for support and guidance
  • Existing modules for almost every feature we wanted

Starting from Scratch

When we began this project, none of the team had any experience with Drupal (and the developer had only just learned php), so we relied heavily on the extremely helpful Drupal community. The forums were an invaluable resource throughout development, without which this project would not have been possible. Because its a volunteer community we made sure to give back help whenever we could. The Post-installation forum is a great place a beginner can help out other beginners, and there is no greater way to learn than to try and teach.

Armed with a copy of Front End Drupal, we started development with the theme layer. This turned out to be a great place to begin climbing the Drupal learning-curve. In focusing on the theme, Drupalisms like node, module, and theme hooks began to make more sense. When we were done theming we had a heavily customized user-profile.tpl.php (for parent profiles), and a decent working knowledge of how all the parts of a Drupal site come together. If we could go back, we would use the Content Profile module instead of core profile. On a site focused on profiles like ours, the work would have been greatly simplified if profiles were nodes.

Once the parent profiles were ready, the next big challenge was creating a way for users to search through them. Again, with lots of forum support and a copy of Pro Drupal Development, we dove right in. Our search is accomplished by using Drupals Form and Database API's to run queries on user profile fields. In hindsight using Views exposed filters would have worked great here, but our experience with this powerful module was limited, and so we built a custom module to suit our purposes. Several more custom modules were created during this time as well (see list below for details).

By the time we got to the social networking features we felt like pro's. By using the resources in the Drupal community available for little to no cost, we were able to complete this project in-house at a fraction of the cost we were quoted by development shops. It took some extra time and hard work, but for a project with the scope of I Heart Adoption, we felt it was a small sacrifice for a wonderful end product.

Modules

I Heart Adoption uses plenty of contributed modules and a few custom ones:

  • User Relationships: Allows birth parents to add families as favorites, and to add each other as friends on the social network.
  • Facebook-style Statuses & Facebook-style Statuses Comment: This fantastic module powers the social network wall together with Views
  • Privatemsg: Lets users send each other messages on the site without disclosing e-mail addresses
  • Chatroom: Creates a chatroom node type for real-time chatting on the social network
  • IMCE: A file manager for users, allows our adoptive families to manage their photo albums
  • Heartbeat: Provides a recent activity block, used on our social network
  • Flag: With flag users can “Heart” status updates, blog posts, and photos
  • Node Gallery: Creates gallery and photo content types to allow photo albums on the social network. Because each photo is a node, it can have comments and Heart flags.
  • Imagecache: Create presets for different image sizes and cache them. An invaluable module for image handling.
  • Token: Insert data dynamically into content. Mostly works behind the scenes to provide functionality to other modules.
  • Rules: An evolved version of the built-in triggers/actions. Lets you define rules to automate site functions, like heartbeat activity messages.
  • Google Analytics: Integration with Google's tracking technology, indispensable for SEO.
  • Views: Handles display of statuses, should have been used for search feature (see below).
  • Admin Menu: Keeps site maintainers sane by organizing admin links into a compact drop-down menu.
  • Node words: Adds meta tag fields to node edit forms, used here for SEO.
  • Auto Assign Role: Gives new accounts a default role, for when you want the default authenticated user to have permissions that other authenticated roles don't have.
  • Form Block, Remember Me, Compact Forms: Makes our user registration and login forms prettier.
  • Lightbox2: Presents content in a lightbox, used for photo presentation.
  • Menu Per Role: Allows customizing menu items based on role.
  • Profile Checkboxes: Can turn select lists into checkboxes, very useful for our data intensive profiles.
  • String Overrides: Easy way to change module output without hacking module code or writing theme functions.
  • Unique Avatar: Fixes the common caching problem for user pictures (your sites support staff will thank you).
  • User comment: Provides more fine-grained permissions for comments, allows our birthparents to delete comments on their blogs and photos.

Custom modules were created for:

  • Searching based on family data. In hindsight Views’ exposed filters would have been ideal for our search, but at the time we were unaware of the power of Views. See my tracker for details on this long, hard road.
  • The due date calculator. This module adds a block that depends on JavaScript code for its functionality. We already had this script from a previous site, so we decided to use that rather than start with a calendar module from the contributed modules.
  • A featured family rotation on the front page. This module sets a variable on each cron run with the uid of the profile to be featured (based on various internal metrics). The theme then uses this variable to show the featured profile data.
  • A module to add captions to photos parents upload in IMCE. It creates a database table to store photo file names, image weight, and caption, and uses the Menu and Form API's so users can edit their photo albums. If we had used nodes for parent profiles and galleries instead of the profile module, there almost certainly would have been a contributed module to accomplish this. In Drupal 7 this is much improved with nodes and users both being entities.
  • The counselor workflow: Gives counselors advanced search fields, and an interface to review and approve profiles. Queries on profile fields and a call to drupal_mail() make up most of this module. It was built just after our general family search, and writing this module to suit our counseling departments specific procedures proved to be a faster solution than working to integrate a contributed module.
  • And a general module for site customizations (like form alters and page callbacks).

Credit

The site was created in-house by the IAC marketing team: Sarah Bryson was project manager, Erin Grimm designed it, and Ryan Schwab (rschwab) developed it.

The Independent Adoption Center is US-based nonprofit, domestic infant adoption agency. We provide lifetime counseling to our birthparents, and adoption services without discrimination based on age, sexual orientation, marital status, religion, ethnic background, or race.

Comments

paolo12’s picture

It's really good site. I mean it is good in design, everything looks perfectly. And it is good in idea too!

rschwab’s picture

Thank you :)

ajayg’s picture

Very nicely done site and great explanation.
Have you considered donating any modules back to community?

Also can anyone write to anybody's "wall" or only if you have friend relationship? By Default I noticed you don't get ability to create your won wall so that is available for a different role perhaps? Or some other access control at play here.

rschwab’s picture

Thanks ajayg!

Our assessment is that our custom modules are a little too site-specific to be useful as contributed modules for the community. For example if we attempted to re-factor the counselor approval module for contrib, our work would have been better spent improving the Workflow module. We have, however, contributed back many patches to the modules we're using.

Regarding the social network wall, that section is set up to be private for birth parents considering adoption and women who have already placed. To gain access you must first speak with one of our pregnancy counselors. We did this in order to keep it a safe space for people to openly discuss their feelings about their situations.

ajayg’s picture

Thanks for your reply. I understand the reasoning behind the private wall. I am curious about the "drupal" ish implementation part.

Is this a role based access or some other access module? Also does the access control is given to user who can turn on and off the access to wall per relationship basis? Once counselors approved you, does one get access to All walls or each individual just gets control to whom they can allow to view their wall.

Individual control would be the holy grail that we all trying to achieve.

rschwab’s picture

Our privacy is accomplished using roles and the menu system. Because our system is closed, we don't have the same issues a site like facebook would have, but you can get very far with just the access control in drupal core.

ajayg’s picture

Thanks. That is what I wanted to know.

Digitalrecline’s picture

Great to hear about this project.
Its nice to see a great end product from someone who was "learning as they go" and not working with drupal full time. Still trying to get my head around the new D7 myself.

redndahead’s picture

Awesome site. As an adoptive parent, although from the foster system, I can see the real benefit in this to your clients. One of my dreams has been creating a site like this for foster parents/social workers. Glad to see examples of how it can work.

timonweb’s picture

Nice site and nice idea! Congrats! I wonder, what was the price range web studios asked for such kind of a project? $50000? More?

rschwab’s picture

The quotes were generally between $10,000 - $20,000, this was before we had added the social networking features.

timonweb’s picture

Aha, got it. And how much time did they estimate the project on average? 100 hours? 200? more?

rschwab’s picture

We didn't get that far in the process. The quotes were based on brief phone conversations, no RFP's or anything formal like that.

tafkas’s picture

Great project. Thanks for sharing!

tuthanh’s picture

Amazing. It is great for technical stuffs and design quality. 2 thumbs up!

d85y81’s picture

Do you have any plan to upgrade it to Drupal 7 when it's possiable?

besides thanks for your sharing, that's the look I wanna for my small dream business, maybe 1 years later I'll get it started when I get enough knowledge of Drupal.

david

rschwab’s picture

There are certainly plenty of good reasons to upgrade to Drupal 7, but its not currently on our radar because of other priorities. Our next plans include integrating our Drupal database with Salesforce and converting our hand-coded AP site into Drupal.

Regarding your dream business, I would recommend just diving right in and getting started. As I detailed above, there are many resources available for beginning Drupal site builders, and many talented and helpful people in the community to collaborate with for guidance. Instead of starting in a year, your business could be opening in one year! :)

kaakuu’s picture

The site seems and looks very pretty.
However to me it is more of an intranet on the internet.
A functional social networking site ( snw sites like facebook, myspace, orkut, bebo etc) needs to have several things like
social apps or gadgets
blocking or ignoring a person completely ( a module is there but does not function as expected )
photo tagging/marking ( non functional modules ) etc

The list is long. The posting interface is also cumbersome with respect to a social net. See how easy and cool the facebook posting interface is. Social network thrives on easiness and coolness.

I am yet to see a site out of drupal having the above minimum.
Do you have solved or needed any of the above?

One thing I find on your site is facebook buttons. Why? Facebook do not have your buttons. Please be unique and indepedent.

PS : Will you need to upgrade to Drupal 7 or is it possible to upgrade to Drupal 7 at all?

rschwab’s picture

Hi Kaakuu!

We selectively picked the features we thought would be most beneficial to birth parents in terms of facilitating group support, fostering a sense of community, and creating a fun & safe place. You're quite right, it doesn't contain many features found in social networks geared for the general public, but it was built that way on purpose.

Like you, we also value independence. This is why we chose Drupal over hosted or proprietary systems. The reason you see Facebook buttons on our site is to simplify the networking process that takes place before a birth mother and her chosen adoptive family find each other.

kaakuu’s picture

Thanks a lot. So it is not a social networking site. But a sort of closed community. Many mothers or would-be mothers are actually scared by Facebook, if you do your research on Facebook (and Google). And if its there ideally myspace ( and bebo, orkut etc) buttons also need to be there.

d85y81’s picture

Thanks Ryan, you're right I should get my dream alive now, the best way to learn a new technology is to make practise.
For now there is still little Drupal information in China, but it's getting hot, I just wanna all you know we love Drupal as well.

david

gloscon’s picture

This is very good writeup. Any newbie would get inspired that they can build a site themselves with lot of reading and community involvement.

Even more important is the cause behind the site. Great work. Keep it up.

te-brian’s picture

Well done guys.

The site is well organized and a pleasure to browse. Always great to see a site that you can tell a lot of care went into. Keep it up!

MsG’s picture

If you think about SEO stuff I recommend the module GlobalRedirect.

At the moment I can acces for example: http://www.iheartadoption.org/im-pregnant/my-options

with: http://www.iheartadoption.org/im-pregnant/my-options

and: http://www.iheartadoption.org/node/1

Some search engines *can* see that as duplicated content, which will possibly give you a lower ranking.

What Globalredirect does is that it redirects the node/1 stuff with a 301 header to http://www.iheartadoption.org/im-pregnant/my-options with that nice url in the address bar, so it prevents multiple access by different URL's.

rschwab’s picture

Great advice - thank you! I remember seeing a blog post about this very issue a while back, and you've reminded me I've got some work to do on this front.

cyberrider’s picture

I am truly inspired by your work on the site, looking at your story I am in the same situation, I recently learned php and I have a task at hand that well be a challenge, but with your story in mind it makes it easy to go head on into development. Great Job

pushpendra.kumar@globallogic.com’s picture

I went through this site and found it very good....Good job guys

lca7’s picture

It's very good example for me to learn to design a drupal powered webste,thanks.

angheloko’s picture

Hi,

I'd just like to say that the overall theme was superb and I really like it.

I noticed a "bug" though, in the front page. I am seeing this text in the "Request more information" block:

date is

Array
(
    [month] => 12
    [day] => 17
    [year] => 2009
)

I made a screenshot but I can't attach here. :/

I am using FF 3.5.

Nice job!

rschwab’s picture

Ooo thank you for pointing that out, and I'm glad you liked the site.

Whoyas’s picture

Great Site!!

How long did it take your team to build? Did you write the custom modules or outsource?

Best Regards,

Jumoke’s picture

What module did you use for the FAQ collapsible sections?
http://www.iheartadoption.org/faq

How did u get the collapse and expand to happen?

rschwab’s picture

@WhoYas: The initial build took 7 calendar months. However, in addition to climbing the Drupal learning curve, as a non-profit our team members all wear many hats around the office. During those 7 months only 5-20 hours per week were spent on developing the site. The social networking features were added later, and this process took 5 months, under similar conditions. All coding was done in-house, with the exception of one minor reverse-bounty for a contributed module tweak.

@Excalibur: That is done using Drupal's built-in JQuery, by simply adding "collapsible" and "collapsed" classes to the fieldset elements in the node.

LochNessMonster’s picture

Hi Guys,

I'm just starting out on my first drupal project and have come here looking for inspiration. I just wanted to say thanks for sharing your story and to congratulate you on the site. It looks great.

Just one small thing I noted while I was browsing the site is that on the http://www.iheartadoption.org/faq page when I expanded multiple questions I found that it ended up overwriting the navigation bar at the bottom instead of pushing it down. Not a great issue but just something you may want to check out when you have a spare moment.

Cheers.

payel’s picture

the site is beautiful.
very clean and neat design
can you please tell me how u implemented the drop down menu feature?I am new to drupal theming.
will be great if you can help.

rschwab’s picture

Thank you payel! The menu's were done with just css. If you wanted to do something similar I recommend looking into the Suckerfish menu system. Several drupal themes integrate well with it.

payel’s picture

thanks for the recomendation, I googled around and found a suckerfish menu system that I have implemented. The suckerfish menu that I have got uses some few lines of javascript which I want to avoid.
Can you tell me what exactly have you done?I mean have you used javascript as well?have you used the default primary-links that come with garland theme?

Michael3185’s picture

Can I ask how you created the extended user profiles, and whether users complete the input themselves? Thanks.

rschwab’s picture

Hi Michael! The profiles were mainly done by customizing the user-profile.tpl.php. First we defined user profile fields using the profile module. Then called them into the profile with code that usually looks something like this:

<?php 
if(!empty($account->profile_myfield_1)) { ?>
  <span class="my-class">
    <?php print check_plain($account->profile_myfield_1); ?>
  </span>
<?php } ?>

Beyond that there was some work done with our template.php file, but the main layout and features you see are accomplished as described above.

Michael3185’s picture

Thanks @rschwab, I'll hack around a bit sometime very soon. The off the shelf profile extension modules don't really do what we want, so time to get my hands dirty (and wreck my poor brain a bit more!)

Actually, some perhaps ambitious thoughts, but I'm wondering about creating different profile templates, and allowing users to select the one they want displayed to other site members. Basics first, I think.

anyr’s picture

Did either of you get a one-to-many relationship in your user profiles? I have added extra text fields which work fine, but I want to add a field for Employers where people can enter as many employers as they want, with associated job titles if possible. Any ideas gratefully accepted, and google isn't helping, but it must be possible?

unleash’s picture

hi hello dear ryan - great job

congrats - well is i t a drupal commons that you use.

It's really good site. I mean it is good in design, everything looks perfectly. And it is good in idea too!

sheth.roh’s picture

Hello Ryan,

Thanks for detailed explanation. I must say you have made a wonderful site, beautiful and clean layout.

I am doing something similar. I asked few companies to make site for me but they quoted $ 15,000 or so. We are not having so much budget so we have planned to do it our self. We have started getting acquainted with drupal but still path isnt clear.

I would appreciate if you can just provide an outline of the process. That way I can get a direction, and can save overall time.

Thanks and Very good job indeed!

Cheers
Sheth