Adding a webshop to your site can be a headache, especially if you have a large sales catalog which has to be migrated online. You don’t want your existing site to experience any downtime, and you want customers to find shopping online with you easy and intuitive, while still providing them with the products and information they expect. When Advanced Marine Technologies wanted to consolidate their product catalogs and add a new online store, they came to Gossamer Threads to give them all the functionality they wanted without any hassle or unnecessary change to their workflow. Here’s how we helped AMT make the move into e-commerce smoothly and securely, using Gossamer Links and a custom shopping cart, and implementing a careful and detailed import of AMT’s multiple product catalogs.

Building Webshops to Suit

AMT has a unique history, in that it represents the amalgamation of three existing marine part manufacturers, representing the full price spectrum available to customers. A key issue in building AMT’s webshop would be the creation of a new, consolidated product catalog, while maintaining the information contained in the legacy catalogs. Maintaining these legacy catalogs was of critical importance, as AMT’s customers need to know which products are compatible with each other.

Building a webshop from scratch presents challenges, but also allowed for customization from the ground up, tailored to address AMT’s existing workflow and unique catalog situation. Our Gossamer Links platform with a MySQL database offered the versatility this project needed, but would have to be augmented by a completely new shopping cart to accommodate the specificity of AMT’s data.

The new AMT storefront page.

• The new site was custom-built for an established customer base accustomed to phone ordering, rather than online shopping.
• We created accommodations for the rigorous detail of AMT’s boating parts catalog: weights, schematic files, and compatibility with other parts all had to be incorporated. While new product numbers were created, legacy product numbers were also maintained, ensuring that AMT’s customers had all of the compatibility information they needed to make informed purchases.
• Printer-friendly versions of all product pages were also designed, giving prospective customers all of the information they need on a single sheet.
• We used Paypal Pro for payment integration, giving customers the option to stay on AMT’s site while making payments, rather than being redirected to Paypal’s site.
• Shipping prices are calculated in real-time: data is pulled from FedEx and Canada Post, giving customers a range of shipping options and prices as soon as they enter their address, all on the same page.
• A custom back-end payment administration system was built for AMT’s staff, allowing them to view, search, and update customer orders instantly, informing customers of the progress of their orders and storing all sales records in an easily manageable format.
• During the course of our development, AMT incorporated two more extant parts manufacturers into their umbrella company. The new indexing system we created was able to integrate those manufacturer’s catalogs as well. We gave AMT the infrastructure to expand their business in the future, and add more products to their webshop as the company grows.

An order as it appears in the AMT Order Management Panel. Note the options to update the order’s status and generate invoices.

Importing Two Tables

After analyzing AMT’s existing product database, we determined that storing data within two separate Gossamer Links tables (but one installation) would be the optimal route. With many of AMT’s products being available in different sizes, materials, and colours, we realised that normalizing the data – ie, building one table with the core products, and another with the different variations of those products – would have multiple benefits.

• Shoppers can browse and purchase different styles or sizes of a product without having to view multiple product pages – ten of one product in red and half a dozen in blue can all be added to the cart from the same page.
• Normalizing data makes for less maintenance: rather than having to update thirty different records when a core product description or price is changed (ie, one for each colour or size), modifying the core product’s record in the first table is all that is required.

A sample item on AMT’s webshop. Multiple styles and sizes can be ordered, and extra images and compatibility can be viewed.

Once an order is completed, two e-mails are sent: one to the customer with an auto-generated PDF containing the order number, and one to AMT’s staff containing another PDF. After AMT ships the order, a third e-mail containing a tracking number is automatically sent to the customer.

Importing AMT’s existing product data into this new table structure was a challenge. The product catalog was stored in a single Excel file which contained a wide range of data: this had to be organized into numerous categories and product types before the import could be performed. Custom import code had to be written in order to preserve category and subcategory hierarchies in the new tables. Given the large range of types of products and sub-types of products contained within the file, many table columns had to be accommodated in this code.

Advancing E-Commerce

Implementing an e-commerce platform can seem like an insurmountable task, but GT has the expertise to integrate sales into your website while maintaining your inventory’s diversity and appeal. Interested in moving your business forward? Let’s talk.

We’ve partnered with Start Local, Australia’s premiere business directory, since their inception, helping them to establish themselves at the head of their market as well as managing their hosting. Recently, Start Local wanted to expand upon the ways in which their usebase interacts with their site in a major way: introducing “gamification” – adding game-like systems of scores and rewards for utilizing their site – to Start Local. Here’s how we added a new dimension of user experience to Start Local…

Why Gamify?

Gamification is being embraced by companies of all types to engage users and customers in new ways. For Start Local, gamification was the next step in making their site more appealing to users after social media integration. By allowing users to interact with Start Local’s content via their social media accounts, initial visits to the site are made more appealing and interaction with it easier. The game-related features, then, are designed to make repeat visits and interactions more rewarding, making their successful implementation a high priority.

Users receive badges and awards which are displayed on their profile as they interact with Start Local.

Integrating Gigya

The core of our gamification of Start Local began with integrating a suite of social media and gamification functionality from premier gamification platform Gigya into our existing Start Local site design. This provided Start Local with many of the features and rewards they wanted to offer their users for interacting with their site.

• Personal badges awarded to users when they reach certain “milestones” of interaction: writing a certain number of reviews or comments, for example.
• Leaderboards which rank users as they compete for various awards and titles.
• A user profile page which allows users to view and track their and other users’ interactions quickly.
• User profile popups displaying awards and badges while mousing over a user’s name.
• Scheduled competitions which allow users to vie for prizes on the basis of criteria given by Start Local (for example, the most popular review of the month).

Expanding the Game

While these features gave Start Local a great first step, there were still further measures to be taken to achieve the type of user interactivity they wanted to achieve. Taking Gigya’s existing code as a starting point, we custom-built new functionality to take Start Local’s gamification to the next level. We started this process by tracking users’ interactions with the site in parallel with Gigya’s servers on our own servers, which gave us more latitude to provide Start Local with the additional functionality they were looking for.

We customized popup windows to keep Start Local’s users up to date on their achievements.

• Tracking interactions with user-owned records: User submitted records (ie, comments) are a major part of Start Local, but Gigya’s out of the box functionality had no way to connect interaction with those records to the original poster. To achieve this, we stored all interaction IDs, and then cross-referenced those with user information. We created custom code which melded Gigya and Start Local data in order to provide points and awards to users based upon Start Local’s custom criteria (comments or reviews which prompt the most replies, for example).

• Comments are displayed live but are not validated (and thus tabulated into leaderboard or badge consideration) until they are approved by a mod, preventing users from spamming the site to unlock achievements.
• Managing Start Local’s user records in parallel on both GT and Gigya’s servers initially meant sending and receiving surplus ajax queries and slowing performance on users’ browsers. We bypassed this problem by routing leaderboard information to Gigya solely through GT’s servers, using Gigya’s REST API, rather than back through Start Local a second time.
• Redesigned Gigya’s leaderboard via REST to correct design issues.
• Redesigned pop-up windows for badge and award notifications.
• Notification of reply to comments: responses to users’ comments appear in Facebook-style corner popups.
• Added a new toolbar to the bottom of the page.

Step Up Your Game

Can gamification help draw in your site’s target demographic in new ways, or are there other web strategies which could best help engage your userbase? Get in touch, and let’s talk about solutions that’ll work for you.

Site performance can be a complex issue, with all manner of interdependent factors conflicting and cascading in unexpected ways. When one of our clients’ sites starts experiencing problems which can quickly take a toll on their business, we take a methodical approach, examining all of the components that go into a website’s performance, and enacting a point-by-point plan which addresses front and back end issues. Here’s how we developed a solution for The Student Room, a high-traffic forum which ran into trouble after a routine software upgrade.

An Unexpected Problem

The Student Room is the UK’s largest online student community, and is home to over one million users. With over 38 million posts and an average of a million page views per day, TSR’s forums (powered by a highly customized vBulletin installation) need to be as efficient and user-friendly as possible.

The Student Room Forums. Note the fast posting rate and incredibly high numbers of posts.

A problem arose when TSR updated to a new version of vBulletin, however: users’ posting rates took a dramatic 30% drop, even though traffic was increasing. Monitoring revealed that page load times (especially on thread view pages) had increased by roughly 500 milliseconds. While that may not sound like a significant increase, it was enough to radically affect activity on the TSR forums; while the site’s established user base was still visiting, they weren’t interacting with and posting on the site nearly as much.

Most web optimizations involve rectifying obvious, drastic inefficiencies in software, but the problem presented in TSR’s case was a more subtle one: counteracting the effects of a minor and irreversible script update. In response, we fine-tuned the site at two levels: back-end database and server issues, and front-end script and HTML management.

Back-End: Rebuilding Server Architecture

The overarching goal of our back-end optimizations was to to reduce the load time of The Student Room’s main pages to less than 500ms, faster than they’d been even before the slow-down caused by the vBulletin upgrade. Here’s a breakdown of how we went about achieving that.

Server optimization is crucial to any plans for decreasing load times.

Server Infrastructure

• We investigated TSR’s existing cluster setup and checked for bottlenecks using metrics like hard drive and memory utilization, processing power and bandwidth.

Code Profiling

• We profiled PHP code using programs like XDebug and Cachegrind, New Relic‘s monitoring suite, and custom written profiling scripts to find bottlenecks and inefficient code.
• We checked for and rewrote inefficient code.

MySQL Query Optimization

• We investigatied the frequency and distribution of SQL queries, and optimized slow queries.
• We reviewed and optimized query caching.
• We optimized column indexing.
• We reviewed and optimized the cluster’s MySQL server configuration to suit this specific use case.

Memcached

We cached heavy SQL queries and expensive functionality on a dedicated Memcached server within the cluster to reduce load on other back-end servers. After this, we reviewed and tested various setups to optimize this server. This process in particular yielded the most significant performance impact.

• We studied and tested multiple Memcached PHP client libraries and decided to switch to the faster Memcached library.
• We implemented support for the Memcached PHP client library in vBulletin.
• We consolidated cached objects to reduce overhead.

Varnish

Varnish is a web application accelerator which caches rendered HTML pages and static content to speed up delivery and reduce server load by caching frequently accessed content, which we also integrated into TSR’s cluster.

• We implemented Varnish caching of rendered forum pages for guest users, drastically lowering load times.
• We also tweaked server settings in order to maximise Varnish’s impact.

Having a technical partner who can get the most out of your site’s servers can open new doors for your web performance.

Front-End: Designing a Smoother User Experience

We weren’t satisfied with simply retooling The Student Room’s server architecture. We set a goal of displaying the content of the first post in a thread in 2.5 seconds for a uncached page on a user’s browser, and took the following steps to make that happen.

• First, we profiled the site’s existing front-end performance using GTMetrix, New Relic and SmokePing.
• We reordered JavaScript and CSS to optimize the simultaneous downloading and processing of scripts and style sheets.
• We performed JavaScript and CSS minification, removing superfluous data like whitespace and comments.
• We optimized the distribution of static content between static servers to allow browsers to download more resources in parallel.
• We consolidated images in sprites

.

• 3rd party scripts (such as tracking code and social media buttons) are now loaded separately from and simultaneous to core pages, and are loaded in asynchronous order to prevent pauses in rendering of the core page.

The Results: Faster Loading, Less Server Costs

These measures prompted immediate and dramatic results. Main pages load times were reduced to 500 milliseconds; an over 100% speed increase for some pages.

Perhaps most importantly, all of these changes had a marked effect on the original issue at stake: user participation on The Student Room. Posting rates returned to and exceeded pre-upgrade levels.

In addition to making their userbase happy, our optimization gave the people working at The Student Room plenty to smile about. Our back-end work decreased server load which allows for more traffic on the same hardware. The bottom line? A sleeker, faster site which costs substantially less to maintain.

Charting load times.

Here’s what the team at The Student Room had to say about the optimization:

“The Student Room Group and Gossamer Threads have been working together for many years, overcoming countless technical challenges as the popularity and scale of www.thestudentroom.co.uk has grown. Websites need to be as responsive as possible and today’s sophisticated users demand speed. The upgrade caused a significant slowdown and our members reacted accordingly. We needed to act quickly and, with a multi-disciplined team implementing cutting edge optimization strategies, together with some state of the art hardware, GT greatly improved our response times, and variance was pretty much removed entirely.”

Get More From Your Site

As we’ve seen, website optimization can be a win-win scenario for both you and your users. Interested in finding out what a tune-up could do for your site? Let’s talk.