Metabolife, based in San Diego, manufactures and distributes weight-loss dietary supplements throughout the U.S. To stand out in this crowded market, Metabolife needed to transform itself from a simple weight-loss product into a brand that supported people as they tried to make themselves more healthy. They decided to give their site a fresh design and offer a whole new set of interactive tools.

Design and development shop ISL Consulting of San Francisco partnered with ClearMetrics, a New York digital agency, on this project. ISL and ClearMetrics are sister companies, with ISL focused on engineering and theming and ClearMetrics on marketing and campaign management. Together we decided that the best way forward was to create a social business site that promoted Metabolife’s wellness brand by letting customers form a community to support one another in their pursuit of healthy lifestyles.

We chose to re-design Metabolife’s site with Drupal because Drupal offers multiple community features and allows for easy integration of Flash (and other) applications. The new site would support the company’s brand goals by allowing users to access online health-promotion tools and giving them the ability and incentive to interact with the site through Facebook. The site would also integrate an Ubercart e-commerce platform that would tap into users’ social interactions to drive sales.

The Problem

Metabolife’s web problems began with its URL. Prior to relaunch, Metabolife’s site was hosted at www.mlifesupport.com, a domain that was difficult to remember and didn't clearly link back to the company's brand. Mlifesupport.com was a simple static page, with all content hidden behind a membership wall. Its design reflected a pharmaceutical tone, precisely the image Metabolife wanted to distance itself from. There was no opportunity for users to interact with one another, to support each other in pursuit of a healthy lifestyle or to measure their activity and successes. The site’s existing e-commerce platform was clunky and inflexible.

Community and Social Tools for Healthy Living

After we relocated the site to the more sensible domain www.metabolife.com, we focused on creating features that would let people connect with one another. In addition to enabling the site with interactive content, such as workout videos and nutrition quizzes, we also created two major interactive tools. Each was designed to help users help themselves and one another live healthier while at the same time maximizing their time-on-site and exposure to the brand.

Motivation Gallery

Often, the hardest part of staying fit is staying motivated. The more public a commitment to do something, the more likely that the participant will persist.

To tap into that common experience, we created a fun, user-generated “Motivation Gallery”.

Visitors to the site can upload photos and short statements about their health goals and motivations, in order to remember their own aspirations and draw strength from others’ motivations. The whole gallery can then be rotated in a 3-D view.

We could have tied this to the Drupal registration system. However, to encourage broader participation and avoid the user overhead of registration, we created a standalone form based on a content type that participants used to upload a photo, their goal, their motivation, email address, and agreement to the site's terms of service.

A separate check-box also lets them add their name to an email list. This node-approach was even simpler than using the usual tried-and-tested Webform module.

An XML feed output from Views drives the Flash application. The XML is always current, so when someone posts something, it shows up immediately. (We removed the approval step when it turned out to be unnecessary.)

For the client, this is one of the site's highlights. It is easy to re-purpose with another XML feed for another type of campaign. We have since found other clients asking about how to adapt this tool to represent activity on the part of their users who are committing to doing something visible in their community. The wall can of course show anything, not simply images of the user.

Weight-Loss Tracker

The site’s Weight-Loss Tracker was an application that allowed visitors to plot and track their weight over time. Its primary use, however, was social: Weight-Loss Tracker users could plot their weight loss against that of their friends and share their progress. Once again, the idea was that social visibility increases the probability of making progress.

The Weight Loss Tracker (which we internally called "Benchmark Buddy" because it can track more than just weight loss) is a largely custom-coded application. Virtually no contributed modules are involved. Instead it uses its own tables to store user and application data. It receives XML posts from the Flash front-end, and delivers XML to Flash, all from its own callbacks. In similar applications, we would normally use Views to generate simple XML output, but in this case the structure of the XML was deep and complex, requiring custom functions. The XML stores the participant information, grid points, time information, user groups, status of invitations to friends and more. It handles all of its own invitation processes and works quite differently than the invite module (which we have used on other projects) by putting users together into a group. The whole invite process integrates with the Flash interface.

The social function of the Weight Loss Tracker has had a network effect on time-on-site: the more time users spent using the tracker, the more likely they were to invite other users to track weight loss with them, thus extending both the time both they and their friends spent at Metabolife.com.

The Weight Loss Tracker’s usefulness also served as a hook to draw users deeper into the site. Of users who visited the Weight Loss Tracker, nearly 70% signed up for an account to use the program.

Facebook: My First 5K Community

To further its message and deepen consumers’ attachment to the brand, Metabolife created the Metabolife My First 5K community on Facebook. The Metabolife My First 5K initiative aimed to bridge the online-offline gap by using social media to organize and support users who wanted to run their first 5k race.

With the help of Active.com, a fitness-oriented online marketing company, Metabolife and ClearMetrics reached out to thousands of highly targeted users and invited them to join the community. Users who signed up to take part in the Facebook community received email newsletters that gave them training tips, and could engage on the Metabolife My First 5k Facebook wall, where members shared their own tips, encouraged one another, and uploaded photos of themselves and their friends running. Users who were the most serious about running could join one of over 60 teams across the country that were training for races on specific dates. Users who joined the offline training teams received individualized advice and coaching from a group trainer in their area.

We also created a module on Metabolife.com that pulled and displayed information on the community from Facebook. This allowed casual browsers on Metabolife’s main site to explore and become engaged with the Facebook group. This was an affordable and simple way to provide a social networking experience without having to build one on the site.

We used Dave Cohen’s Facebook module (http://drupal.org/project/fb) to provide Facebook integration. For a standard Facebook Connect integration on other websites, we prefer the Facebook Connect module (http://drupal.org/project/fbconnect), which handles straightforward login integration very well. We used Drupal for Facebook here in order to manage the Facebook Canvas page, so that content from Drupal appears directly on a Facebook fan page.

Facebook’s social plugins allowed content from Facebook to easily be made available by communicating directly with the Facebook API. The provided social plugins make this as easy as pasting the correct code into a block, greatly simplifying the integration.

Email Marketing: The Campaign Monitor Module

E-mail marketing was a major part of the My First 5K initiative. To ensure that the community remained active and relevant, it was important that users receive regular updates. Given that over 50,000 users signed up for the community, we decided to integrate Drupal with Campaign Monitor, an email marketing management software with an associated Drupal module.

One difficulty was that Metabolife’s parent company also owned 12 other properties they wanted to integrate with Campaign Monitor at the same time we were integrating it with Metabolife.com. To address this, we wrote two custom modules. The first allowed for a different configuration of the Campaign Monitor module on each domain, so that each domain had the ability to sign users up for different lists through a single Campaign Monitor account, and could even integrate different lists from different campaign monitor accounts. The second module we built enabled us to, with proper user permission, add users registered on one domain to the email list of another domain.

The end result was that Metabolife was able to send training (as well as marketing) emails to its community with just a few clicks.

E-Commerce

Once users had gotten to know the brand by interacting with it on the website and in social media, Metabolife wanted to make it as easy as possible for them to purchase products.

Their old e-commerce system wasn’t adequate. The UI was standard, but order information was reaching Metabolife’s fulfillment people in a fragmented and sometimes confusing manner.

Like many good fulfillment systems, Metabolife’s depends on people as well as automation. Ubercart, Drupal’s prominent e-commerce module, provided many tools for the customer support team, reducing the amount of customization needed to create a UI to maintain orders. Also, the Metabolife site’s e-commerce requires integrating with an ERP system that is used to manage the company’s nationwide fulfillment requirements. The Views module, coupled with the Ubercart Views module’s enhancements for e-commerce, served as the basis for a customized data feed to the ERP system, delivering information about the orders, as well as ERP-specific product codes and information that could be stored within CCK fields added to the basic Product content type. The requirements for the data feed were numerous and complex, such as fields that are not from the database but contain values that are the result of conditions within the order, or specially calculated figures, in effect doing much of the ERP system’s work in advance before consumption. Where there were requirements for fields and functionality that the modules could not provide, ClearMetrics and ISL worked within the Views API to develop customized Views functionality.

Results

Rebuilding Metabolife.com as a social business site was a technical and marketing success.

The site began attracting more attention. Total visits increased 7% and search engine visits jumped by 11%. Users engaged more deeply with the site: the bounce rate decreased by 31% while total page views jumped by 26% and total time on site increased by 14%. This had a direct impact on Metabolife.com’s bottom line. Sales through the site rose by 700%.

It was also a successful illustration of what can be achieved with the right partnership between a Drupal consultancy and a digital marketing company. ISL showed the client what could be done with Drupal, while ClearMetrics brought in social media and marketing approaches that could enhance a Drupal environment.

ISL Consulting and ClearMetrics

ISL Consulting is a San Francisco-based web development agency founded in 1993 that has built numerous Drupal websites. ClearMetrics is our New-York based partner that focuses on advertising and media campaigns as well as marketing tools that drive users to take action on websites or in the real world. Together both firms have built a number of e-commerce sites.

Drupal version: Drupal 6.x