The Making Spot - A Social E-Commerce Site

Our Challenges and Solutions:

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 used to generate user stories:

• Novice crafter 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.

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 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 indicate to 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 localised for Europe, N. America via a cookie test for marketing purposes using .

Complex editorial content

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

Significant planning and testing of content importation was important 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 (ie Future Publishing title)

Variance in content source meant that design needed to respond intelligently. Content types were modelled on data types, migration 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 new format which we imported using the Node Import module.

Dynamic Navigation

Main site navigation are search queries rather than static pages, categories or Content Types – a tabbed design emulates content-type based searches. (see image: Search Results example)

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 when thousands of products can be added in a 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 right through the site.

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’ (eg gift, for children), Techniques used, Materials and Equipment needed.

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 your pages.

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

<ul>
   <li class="thumbnail col-5 blck" itemscope itemtype="http://schema.org/Product">
  <a href="http://dev.themakingspot.com/cross-stitch/pattern/little-angels" class="listing-title" itemprop="url">
    <span itemprop="name">Little angels</span>
  </a>
        
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price" class="large bold">£1.49</span>
  <meta itemprop="priceCurrency" content="GBP">
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" >
  <span itemprop="price" class="large bold">$1.99</span>
  <meta itemprop="priceCurrency" content="USD">
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" >
  <span itemprop="price" class="large bold">$1.99</span>
  <meta itemprop="priceCurrency" content="AUD">
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price" class="large bold">€1.59</span>
  <meta itemprop="priceCurrency" content="EUR">
</div>
      </div>
    </li>
</ul>

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 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 others 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.

Using a Solutions Architect

One of the key decisions in the success of the project was to use one a senior developer as a solutions architect in the projects early stages to handle planning, module research and validating choices through testing.

There were also significant third party elements to integrate and test – Apache Solr, external payment gateway with post-pay and stored card functionality, two analytics, performance monitoring, bespoke ad code, memcache and multiple CDN types.

Performance

We took a relatively standard approach to performance optimisation – using latest Pressflow 6.x, memcached instead of database cache storage, switched to InnoDB instead of MyISAM.

On the front-end we used CSS/JS aggregation, CDN for static assets and we also sprited the site’s theme images to reduce the number of requests to load the page.

Block and Views (query and output) caching are used and tuned to match acceptable cache lifetimes for different features.