Adobe Success Story

· Speed and scalability: Load testing on the redesigned site, running ColdFusion Server 5.0, shows dramatic improvements in speed and scalability.
· Compared with load tests performed the previous year, the number of page views the site can handle per hour has increased by 125%.
· 50% increase in online purchases.

Project Details

by Maia Hansen, Senior Developer
Mindseye Technology, Inc.

FAO Schwarz, the giant toy and collectibles retailer, needed a website that would reflect the same luxurious image already characterized in their retail stores and catalogs. Most importantly, FAO Schwarz needed the website to have a fully functional order-fulfillment system, be visually interesting and easy for customers to navigate.

FAO Schwarz called on Boston-based design and development firm Mindseye to redesign and rebuild their web presence. Their site had to look great, be easy to use and play well with others—specifically, FAO Schwarz's third-party order-fulfillment system. When Mindseye started gathering requirements, the team quickly discovered that no single technology solution would satisfy all of FAO Schwarz's needs.

Step One: Putting Toys on the (Virtual) Shelves with ColdFusion

Mindseye first created a content-management solution that lets FAO Schwarz place products on the site's "shelves," and also lets them talk to the legacy warehouse and catalog-fulfillment service. Mindseye took FAO Schwarz's data entry for products, which had previously consisted of a series of paper forms and duplicated entry processes, and used ColdFusion to pull it all together into a single, custom-made product-creation workflow.

Using form-handling custom tags, structures, advanced security and the new ColdFusion 5 <cfdump> tag to easily verify data integrity, Mindseye created an entirely browser-based data-entry process. Content editors from different departments (and different cities) now enter product data centrally by logging in to the FAO Schwarz administrative server. If changes are needed at any point along the way, the workflow is redirected and comments sent to the appropriate department via e-mail.

click image

When a new toy is ready to be launched, a ColdFusion custom tag processes the data structure created by the custom workflow, and saves each piece of data to its appropriate data repository.

The primary data store used by the website is a relational database, which stores product data and metadata (for instance, product category, brand and target age). The metadata is stored in relational tables that contain hierarchical "keys" and "key types." The use of this modular architecture, in which different types of metadata are stored in the same database table, results in shared code that can be used for the maintenance of the varied categorization types. Also, utilizing recursion within the custom tags keeps the duplicated code to an absolute minimum.

To delete a metadata "key" (the "dolls" product category, for instance) within the custom tag, the custom tag calls itself to delete any "children" in the hierarchy of the top-level key being deleted.

<cfquery name="qGetSubKeys"   datasource="#request.appData.metadataDSN#">
   SELECT keyID
   FROM key k, keytype t
   WHERE t.keyTypeName = '#attributes.parentKey#'
   AND k.keytypeid = t.keytypeid
</cfquery>


<cfloop query="qGetSubKeys">
  <cf_recurseForMetaDelete parentKey="#keyID#">
</cfloop>

Another data store is FAO Schwarz's legacy inventory system, which is physically located 400 miles away from the ColdFusion server. This data store is the central repository for inventory and pricing information, which is shared with FAO Schwarz's catalog order-entry department. Mindseye wrote a set of JavaBeans to utilize the synaro™ Integrator, which allows for XML-based communication with the warehouse's inventory system.

Each type of data on the front end—from toys to customers—has an associated custom-made JavaBean. The ColdFusion pages instantiate JavaBeans using <cfobject>, and then call the bean's internal methods to save (or retrieve) data. The code within the JavaBeans handles communications and the parsing of the warehouse's custom XML.

For instance, to set up a toy in the legacy inventory system from within a ColdFusion page:

<cfobject action="CREATE" type="JAVA"
class="com.fao.integrator.ProductBean"
name="product">

<cfscript>
   // Instantiate the Product Bean with the
   // data collected in the workflow process
   product.init(stInput.sku, stInput.vendorid,
   stInput.name, stInput.description);
   // Call the Product Bean's "save" method, which
   // sends the Bean's data to the warehouse
   product.save(product.CREATE_PRODUCT);
</cfscript>

Step Two: Packing Santa's Sleigh

When it came time to write the code that gets the toys to the kids, Mindseye turned to Java and Macromedia JRun. We created a checkout process that could communicate easily with FAO Schwarz's order-fulfillment service while simultaneously sharing data with the ColdFusion front end.

The JSPs driving the FAO Schwarz shopping bag access the same databases as ColdFusion. To share complex data between the two sections of the site, WDDX (an XML-based technology created by Allaire) is used. ColdFusion structures containing product data are stored in the database as XML packets, which are created using the <cfwddx> tag and its "CFML2WDDX" action. The Java custom tags that run the shopping bag utilize the WddxDeserializer class, provided with the JRun distribution, to interpret this data.

click image

For instance, to find out the cost of gift wrapping, the shopping bag uses the following pieces of code:

// This class is located in parser.jar:
// C:\program files\allaire\jrun\lib\ext:
import org.xml.sax.InputSource;
// These classes are located in wddx.jar:
// C:\program files\allaire\jrun\lib
import com.allaire.wddx.WddxDeserializer;
import com.allaire.wddx.WddxSerializer;

and

ResultSet rs = dba.executeQuery(query);
rs.next();
String wddxPacket = rs.getString("wddxdata");
// Create an input source (org.xml.sax.InputSource) bound to the packet
InputSource source = new InputSource(new StringReader(wddxPacket));
// Create a WDDX deserializer (com.allaire.wddx.WddxDeserializer)
WddxDeserializer deserializer = new \
WddxDeserializer("com.sun.xml.parser.Parser");
// Deserialize the WDDX packet
Hashtable giftWrap = (Hashtable)deserializer.deserialize(source);
Double giftWrapPrice = \
Double.parseDouble((String)giftWrap.get("PRICE"));

When the customer is ready to check out, the JSPs send the customer's data to the order-fulfillment warehouse, using the same set of JavaBeans as are used by the site's ColdFusion pages. This sharing of functionality enables modular programming, not just within the ColdFusion code or within the Java code, but between the two. The JavaBean architecture, used by the site's JSPs and with the help of ColdFusion's <cfobject> tag, promises a long and scalable future for the FAO Schwarz site.

Step Three: Making it Bright and Shiny

Macromedia Flash isn't just eye candy. The "Product Parades" that occur throughout the FAO Schwarz site showcase toys that FAO Schwarz has specifically chosen to feature. By using the site's administrative area to put toys into different categories, FAO Schwarz defines which toys show up in which Product Parades. Each toy displayed in the homepage's Product Parade is hand-picked for prominent placement.

click image

The number of products displayed in the Product Parade changes depending on what area of the site the customer is browsing. This changing movie means that the Macromedia Flash files are always different. To determine such variables such as whether to scroll the Parade, display its navigational arrows, and paginate the displayed products, Mindseye used Macromedia Flash ActionScripting.

For example, a keyframe at the start of the movie checks to see if the products should be scrolled, as follows:

// set number of items in this movie
lct = "{thismovietotal}";

// set threshold for ticker to scroll
scrollThreshold = 7;

// stop ticker if below threshold
if(lct < scrollThreshold){
   tellTarget(_root){
    ticker1.stop();
   }
}

In addition, the arrows on each side of the Parade are actually movie clips, which each have two frames. The first frame ensures that the second frame is only reached if there are enough products to scroll, and the second frame of the movie clip displays the arrow:

if(_root.lct >= _root.scrollThreshold){
gotoAndStop (2);
} else {
stop();
}

Similarly, ActionScript is used to determine whether or not there are enough products being displayed to require pagination. By using ActionScript to dynamically change the behavior of the movie, the same Macromedia Flash template can be used for each Product Parade on the site.

Step Four: Keep 'Em Coming Back

To meet the demand of a good customer experience, Mindseye developed a "My FAO" section.

The "My FAO" address book lets customers save names and addresses of friends and relatives. Site visitors can also create holiday and special event reminders for each address book entry. With JavaScript enabling a streamlined user interface and ColdFusion driving a powerful reminder service, keeping customers aware of upcoming events is seamless.

click image

"My FAO" also lets customers track orders (again, using a JavaBean to communicate with the order-fulfillment service in real time), view gift ideas specifically targeted to the entries in their address book (based on the metadata of the product), and set default shipping and billing addresses for speedy checkouts.

Finally, in order to maintain customer personalization between the Java shopping bag and the ColdFusion address book, Mindseye wrote a Java class to handle the encryption of cookie data. A ColdFusion custom tag, which takes an "input" and an "output" attribute, uses <cfobject> to call this Java class:

By moving this functionality into Java and using <cfobject> to access it from ColdFusion, both areas of the site can access, understand and share encrypted data.

Step Five: Understanding the Shopper

To complete the project, Mindseye built a full-featured e-mail marketing application. This application lets FAO Schwarz marketers create and report on e-mail campaigns that are targeted toward specific customer bases. This precise strategy increases the impact of FAO Schwarz's marketing efforts, and means that each of FAO Schwarz's customers receives only those marketing e-mails that are specifically relevant to him or her.

click image

When a customer purchases a product in response to a marketing campaign, the shopping bag reports this transaction to the marketing database. Using this marketing database—which contains data from every branch of the site—the e-mail marketing application produces detailed reports and sends targeted campaigns.

Conclusion: Reliable, fast, scalable

Java was the natural choice for the transactional requirements of the checkout process, and the Macromedia JRun server was speedy and stable. Load testing on the redesigned FAO Schwarz site, running ColdFusion Server 5.0, shows dramatic improvements in speed and scalability. In a single server test, under load similar to last year's peak season, the average page response time was approximately 3.5 seconds. A load testing script which mirrored load testing done on the previous year's site showed that the number of page views the site can handle per hour increased by 125%, and the number of purchases increased by 50%.

Site Summary

FAO Schwarz

Macromedia Products:
· ColdFusion 5
· JRun 3.1
· Spectra 1.01
· Flash 5
· Generator 2

Partner:
Mindseye Technology

Platform:
Windows 2000

Database:
Microsoft SQL Server

Hardware:
Compaq 1850s

Number of Servers:
· 3 Clustered Public Web Servers
· 2 DB Servers
· 1 Admin Server
· 1 Email Marketing Server
· 1 Mail Server

Do you have a story you would like to share? Join the Adobe Customer Reference Program.