The Making Spot - A Social E-commerce Site

Varied Search Patterns

The several thousands patterns and resources are presented as attractive images meaning there isn’t enough text content for accurate keyword search.

Search needs to be intuitive, accessible and powerful without resorting to an intimidating ‘Advanced Search’ interface – the site is focused on discovery and fun, and caters for a wide range of users.

Some of the personas we use to generate user stories:

• Novice crafters need resources to get started.
• Expert crafters want to discover new challenges and show off their talent.
• All users want to be able to search for crafting activities for specific occasions, such as making Christmas gifts or clothes for newborns.

Apache Solr and faceted taxonomy

Feature-rich and scalable search via Apache Solr and facet-driven taxonomy were key to meeting the search requirements. Version 1.x of the module was used with some extra fields indexed for performance to allow complete results to be returned without further processing.

In order to be able to show search result totals for different content types (products and articles), we needed to execute two separate searches which would potentially have had a negative impact on performance. For this reason, we made changes to Apache Solr’s standard caching settings.

E-commerce

The site’s purchasing experience was designed to be as quick and easy as possible, almost ‘an iTunes for crafting patterns’. Users should be able to purchase and download products immediately and be able to have a secure ‘wallet’ with their credit card details stored for later re-use.

Because of the low cost of items, there was also a requirement for 'post-pay’ functionality so users received a manageable number of notifications and statement items. The site needed to clearly inform users that they weren’t buying finished products but the instructions on how to make them.

The craft landing page carousels (e.g. Card-Making) are localized for Europe and North America via a cookie test.

Bespoke modules, SOAP integration

UberCart would usually be our standard choice for Drupal 6 e-commerce, but, with so much functionality being delivered off-site and the relatively rigid structure that UberCart offers, we decided to develop a bespoke module to handle external integration, site wallet and post-pay order batching.

Other factors relevant to this decision were:

• SOAP (Simple Object Access Protocol) integration for payment and account management
• bespoke order history
• purchased product assets being delivered from a CDN (Content Delivery Network)
• simple cart functionality being the only Drupal requirement
• purchases available in multiple currencies

This choice also brings a purpose-built codebase with a much smaller footprint to maintain.

Cart and price data are delivered using a mixture of Ajax callbacks and cookie preferences to allow for anonymous page caching, giving users the ability to build up a basket of products before they register to checkout. The Ajax callbacks make use of the CTools module to allow for a seamless experience where multiple items can be added to the basket and the currency changed without any need for a page refresh. 'Add to basket' buttons change colour and functionality depending on whether the product is available to buy, is in the basket, or free (i.e. the user has already bought it).

The site was set up to accept four currencies at launch but designed so additional currencies can be added as a simple configuration task.

Complex editorial content

Much of the how-to and article content is automatically repurposed and imported from a range of source magazines.

Significant planning and testing of content importation was essential to ensure that step-by-step guides such as How to create paper daisies were returned and displayed as structured data including:

• description text
• result image
• variable number of steps
• structured tags
• reference source (i.e. Future Publishing title)

Variations in source content meant that design elements needed to respond intelligently. Content types were modelled on data types, migrated from a number of different sources with tens of thousands of images.

We took a representative sample of content and modelled this against requirements. We then supported content partners to treat content data, then migrate this into a suitable structured format which we imported using the Node Import module.

Dynamic navigation

Main site navigation elements are search queries rather than static pages, categories or Content Types – a tabbed design emulates content-type based searches. (see screenshot, below)

The benefit of this is that ‘pages’ returned by the navigation bar are dynamically generated and always have the latest results – this is especially important as thousands of products could be added each week.

As search is such a critical feature of the site, the Search box is in a prominent position in the centre of every page, very close to the content, throughout the site.

SEO best practices are supported by additional modules – Nodewords, XML sitemap and Sitemap.

Scenting

One-click searchability is supported by effective scenting – content is tagged in helpful ways so users can narrow their search in a number of ways and users don’t have to struggle through Boolean syntax or the dreaded ‘Advanced Search’ boxes we all love to hate.

For example, one of the How-tos is tagged by difficulty, Craft, Designer, Technique, Related patterns (from the e-commerce section and the free downloads) plus Related Help & Advice.

And products are tagged additionally by Project Type, Designer, Who the finished product is ‘for’ (e.g. gift, for children), Techniques used, Materials and Equipment needed.

We used the Taxonomy module to organize the thousands of products using hundreds of taxonomy terms.

The tabbed searching was a custom module and allows one-click searching by content type.

Users are able to generate a wishlist of favorites. For this we used the Flag module and set up a standard flag link.

Schema.org

All the elements of the page are marked up with schema.org vocabulary. This HTML style markup adds additional meta data to the elements of the page describing them as, for example, a product with a title and the following prices in the following currencies. This helps search engines index the content of our pages.

Here is some cut down HTML from the site describing a product in a list of products:

Usability testing

We undertook frequent Don’t Make Me Think style usability testing throughout build iterations. This was incredibly useful and meant we had actionable feedback to incorporate as we went along. This resulted in changes including the moving and re-naming of major interface elements.

Social functionality

All the products and guides have comments 'open' with the ability to upload multiple images so the community can show off their work or collaborate on difficult problems.

A profile page allows users to see what other users are making, their wish list and comments so that users could, for example, make notes on the site and have them stored in a convenient location online.

Each page incorporates key social buttons for the site’s Community Editors' active engagement on Facebook, Flickr, Twitter, YouTube and specialist forums.