Dahon Folding Bicycles

Dahon, headquartered in Los Angeles, California, is a globally renowned folding bike manufacturer. The company has offices in the US, Taiwan, and China, and sells its unique range of folding bicycles and accessories in over 30 countries worldwide. Dahon recently relaunched its online presence with a beautiful new website developed by Philadelphia based Drupal shop, Zivtech. The following is a run-down of how Zivtech developed the site to meet Dahon's usability and functionality requirements.

The Challenge

Prior to relaunching in Drupal, Dahon's online presence was represented by a main static English language site, surrounded by a collection of disparate multilingual child sites used to market and sell the company's products globally. The design of the main site was beautiful, but none of the essential content was connected or reusable, making it difficult for staff to update content, and for users to navigate the site.

Being a folding bike company, one of the main functions of the site was to feature individual bikes. Each bike had connected with it a unique set of accessories, components, news, reviews, etc., that needed to be added or updated individually by staff members. This proved to be problematic and inflexible, and often resulted in sync issues between the various content types, a problem further exacerbated by the company's continually expanding product range. It soon became apparent that the update burden was just too great for a company of this size, and that a dynamic solution was needed to bring everything together, while increasing the efficiency of content management and delivery.

Site Requirements

The site required the following elements:

• A warranty form
• A theme to match the current site
• A migration of their architecture from static pages into Drupal
• A custom workflow for publishing new bikes
• An architecture that allowed for the creation of separate bikes, accessories, news, and components, and tied these elements together through bike nodes, search, and taxonomy
• Multilingual capabilities with default languages for selected countries
• The maintenance of Dahon's #1 Google ranking for bicycle-related search terms
• A country switcher that allowed visitors to select a localized product site
• An Internationalized Dealer locator
• Custom Apache SOLR search
• A Highly customized bike menu
• The general Drupal goodies (RSS, blog, taxonomy, capacity for easily updated functionality, turn on desired functionality when ready)
• Hosting w/ solution for serving 1.5 gb worth of static files (manuals as well as media)

Problems and Solutions

Multiple Domains and Mulitple Languages

Dahon has distributors located in numerous locations across the globe. The company originally relied on static files for its website which meant there was no efficient way to translate and update content, or give country specific information. Adding to this problem, Dahon had to create a different site for each country that it operated in even though in the majority of cases, they were selling the same products in each of these countries. Managing all of these different sites in different languages was proving to be extremely inefficient. Therefore, one of the goals of the new site was to bring these disparate sites together into a unified user interface, allowing Dahon to provide the same products with translations and country specific information.

Enter the Domain Access and i18n suite of modules. These modules, with proper configuration and some custom work, allowed Dahon to have one central site from which content could be shared to numerous different country sites in different languages. Further adding to this functionality, the Translation Overview Module provides a table listing the site's nodes and shows what's been translated into each language. This supplied Dahon with an overview of their multilingual content, allowing them to streamline their workflow and efficiently assign translation tasks to translators. On the development side of things, the Localization Client Module, which allows for “just in time” translation, gave a nice on-screen UI for translations during development.

Global Dealer Locator
Dahon has an extensive list of dealers worldwide and so required an efficient dealer locator system that would allow users to search for bike dealers according to the country they were in. The system needed to be flexible enough to cope with the ongoing addition of new dealers, and accurate enough to locate dealers within a mile of the user's location.

To fulfill this requirement, we built a custom module that allows users to search for local dealers by ZIP code, proximity, and country. For the initial launch of the site, this was only a one-way lookup for users. However, we built the module so that in the next phases of development, dealers will be able to register with the site and update information themselves. The module was built using many of the basic Drupal hooks such as node_api, menu_alter, form_alter, and some of the views api functions, which will allow us to implement dealer registration in the future without a major overhaul of the module.

Complex Bike Content Type
The complexity of the Bike content type was partially due to it totaling to 112 CCK fields. Things were further complicated by the fact that each bike featured on the site is accompanied by an array of feature, spec, accessory, support and review information, all of which is interconnected and easily accessible by the user. These fields needed to connect to other parts of the system, and needed to be translatable and tied to a workflow and approval process.

Faceted Search System
Due to the complexity of the bike content type and the vast amount of different features and specifications associated with each bike, Dahon required a faceted search system that would allow users to drill into search results based on their specific requirements. Unfortunately, Drupal's default search engine wasn't capable of providing this kind of functionality, and so we implemented Apache Solr Search, a highly scalable open source search platform. Solr offers full-text and faceted search, hit highlighting, dynamic clustering, database integration, and rich document handling - all the goodies that we needed for the Dahon site. To integrate this with Drupal, we used the Apache Solr Module and ran our own Solr instance on the server.

Solr provides site users with the ability to drill into search results to find highly specified information. For example, a search on the site for the term 'bike' will bring up a general list of everything related to the term. The user is also presented with a number of categories (or facets) related to bikes; i.e., components, accessories, blog posts etc. Users can then "drill down" by applying specific constraints to the search results until the desired items are found.

Custom Workflows
One of the great things about Drupal's flexibility is that it allows us to build workflows that closely reflect the internal workflows of our clients. This means that teams do not have to undergo a significant learning curve or alter their internal workflow in order to start adding content to their website. This simplicity was of particular importance to Dahon as a global company with a culturally and linguistically diverse group of employees.

Dahon needed a full-featured custom workflow to allow for content to be created and edited in a streamlined process. To build this, we used the Workflow and Scheduler modules. A key feature of the workflow is the ability to send out notifications to the appropriate roles when content moves between the content approval stages. For example, when new content is added by an Editor and is marked for translation, the workflow system will send out a notification to a Translator informing them that the content has been marked for their attention. After making the appropriate changes, the Translator then reassigns the content back to the Editor for review. All revisions are saved and made available to the editor so that if he/she is not happy with the changes, they can roll back to a previous version of the content. If everything is satisfactory, the Editor can publish the content immediately, or schedule for it to be published on a specific date. The Diff module added a nice UI for viewing edits to content.

SEO

Dahon holds the top Google search ranking for folding bike related search terms, something we obviously wanted to keep in mind while building the Drupal version of their website. As most people who have used Drupal know, it is excellent at SEO, even out of the box. So much so in fact that if all you did was setup a default install with clean urls and began writing relevant content, Drupal would get you indexed by all the major search engines with the high possibility of favorable rankings. For the Dahon project, we added to Drupal's Google juice by adding the Page Title module and by updating the XML sitemap module (with the help of Dave Reid), to get separate XML sitemaps for each domain. The Page Title module gave us granular control over individual page titles, allowing us to structure and optimize them for better SERP rankings. The XML Site Map added a structured map of the site that helps search engines to crawl the website and keep their results up to date.

Theming

Dahon already had a great design in place for their site and so the bulk of the theming work for us was translating this into a Drupal compatible theme. We used zen as our starter theme and built from there. Note worthy features are as follows:

• The folding bicycle section of the site uses Views Accordion to display the various categories of bikes. Clicking on the category title expands the accordion to display the bikes within that section. We used Beauty Tips (maintained by Zivtech developer Matthew Klein) in conjunction with this to display a larger image of the bike and a summary of its specifications when users hover over a bike of interest.

  

• Individual bike pages required some attention in terms of how we were going to lay things out so that users could quickly access the information they needed. Each bike has a Features, Specs, Accessories, Support and Reviews section tied to it, and we wanted users to be able to access this information without having to leave the page. We achieved this by implementing Quick Tabs which allowed us to place these sections in blocks of tabbed content, allowing users to click through the sections as they viewed the bike.

  

• As Dahon bikes are folding bikes, we felt that it was important for the user to be able to see the bike in its folded state. We therefore added a "See It Folded" section to each bike node. This section uses a combination of images and jQuery to display the bike in its folded and unfolded states. When a user hovers over the bike image, jQuery hides one image and displays the other, giving surprisingly good results. This is a great little feature that adds a nice finishing touch to bike nodes.

  

• The Manuals and Guides section of the site allows users to search for PDF manuals and guides relating to specific bikes and components. The whole section was set up using views. For the search component, we used exposed filters for node type, node title and taxonomy term. this allows users to narrow down their search by adjusting each filter accordingly. The results are displayed using the view table format with results separated into 4 columns - Products, Manual, Guide, and Year. All style tweaks were made using CSS.

Working with Zivtech

At Zivtech, we use a Rapid Prototyping development model when developing sites for our clients. This model allows our clients to supply us with feedback throughout the development process so that appropriate adjustments can be made during development, rather than after. To assist us with this process, we developed the Unfuddle Feedback Module which provides our clients with a feedback link on every page of the development site. The Unfuddle Feedback module is linked to our Unfuddle ticketing system, supplying clients with a way to create work tickets as they browse through their site. Ultimately, this process ensures that we are all on the same page throughout site development.

The Unfuddle Feedback module, combined with access to the dev site, allowed Dahon to provide continuous feedback throughout the development process, increasing Client/Dev communication resulting in:

• A decrease in development time and overall development costs.
• More control over priorities and outcomes.
• The ability to make small adjustments along the way rather than trying to solve problems at the end of development.
• Transparency - Dahon got to monitor how their budget was being used throughout the development process and could make adjustments accordingly.

Contributed Module Highlights

• Apache Solr - integrates Drupal with the Apache Solr Search Platform.
• Content Construction Kit (CCK) - creation of content types.
• Embedded Media Field - create fields for node content types that can be used to display video, image, and audio files from third party providers.
• Context - manages contextual conditions and reactions for different portions of the site.
• Beauty Tips - Provides Jquery based ballon-help style tooltips for any page element.
• Date - flexible date/time field type for CCK. Includes Date API - available to be used by other modules.
• Domain Access - suite of modules providing tools for running a group of affiliated sites from one Drupal installation and a single shared database.
• Image Cache - creates presets for image processing.
• Location - allows admins to collect addresses, geocode them, and associate locations with Drupal nodes and users.
• Menu Attributes - allows additional menu attributes such as id, name, class, style, and rel, to be specified.
• Meta Tags - allows meta tags to be set for each Drupal page.
• Internationalization - extends core multilingual features to make the site fully multilingual.
• Node Queue - allows administrators to collect nodes in an arbitrarily ordered group.
• Better Formats - adds more flexibility to Drupal's core input format system.
• Diff - shows differences between node revisions.
• Invisimail - provides a content filter to hide email addresses from spam-bots.
• Thickbox - wrapper for the Thickbox jQuery plugin.
• Google Analytics - Integrates Drupal with Google Analytics.
• Taxonomy Image - allows site administrators to associate images with taxonomy terms.
• Views - a smart query builder that, given enough information, can build the proper query, execute it, and display the results.
• Workflow - allows the creation and assignment of arbitrary workflows to Drupal node types.
• XML Sitemap - creates a sitemap that conforms to the sitemaps.org specification, helping search engines to more intelligently crawl a website and keep their results up to date.