Well.ca Labs

How We Deploy

2010-08-04T00:00:00-04:00

How We Deploy

Even though we’re a startup, Well.ca is a pretty big ship. Users just see the public website, but there are many, many other pieces behind the scenes. Our customer care team has their interface into orders and billing. The merchandising team is constantly adding new products using their own interface. Marketing wants to be able to keep track of what’s selling, and how our various campaigns are working. And that’s just a small part of the office. The warehouse is its own war zone, complete with pick and pack systems, postage interfaces, and re-order processes. To put it simply, there are a lot of moving parts to a successful e-commerce site, most of them invisible to the public. They’re all vital to the well-being of Well.ca, and they’re all ultimately the dev team’s responsibility.

So, how do we do it?

Our development team works off an Agile style process, with weeklong sprints. At the end of every sprint, we do a rollup of completed work and deploy to production. We also have a structure for deploying hotfixes mid-sprint, which I’ll cover in a bit.

We use git for source control, which lets us branch to our heart’s content. For most of our projects, we use a master and production branch model, in addition to the usual topic branches.

Topic branches are merged into master once they’re tested and reviewed. To do our weekly rollup for production, it’s a simple matter of merging master into production. During a weekly sprint, master is always ahead of the production branch by exactly the work done (and merged) so far that week (modulo any hotfixes done during the week).

To handle the actual deployments, we use the trusty capistrano, pared down via our own minicap project. In addition to production deployments, we also use capistrano to load code onto our test server cluster, which I’ll be talking about in a separate post. We favour driving automation via rake tasks as opposed to putting a lot of logic in capistrano; where we have the choice, we make rake smart and capistrano dumb. It works well.

I mentioned hotfixes before. We do hotfixes by branching off of the production mainline to make our fix, then merging that branch into both production and master once the fix is complete. This ensures that production is never ahead of master, which conceptually means that there is never code in the production environment that isn’t in our development mainline. You can see this in the above diagram.

So that’s how we manage and deploy a single project. Life is never that simple, however, and of course Well.ca is bigger than any one project. Our code is split into two main projects, which we term frontend and backyard. Frontend is the site that you’re familiar with. It encompasses our public site, catalog, and checkout systems. Backyard contains most of the web interfaces Well.ca uses internally, including systems for customer care, merchandising, marketing and accounting. Although our two main projects share a lot of code, we treat them as separate entities, and they get deployed on different schedules. We also have a number of smaller projects to handle things like affiliate management and live chat, and these also run on their own deployment cycles.

AJAX & Javascript

2010-07-11T00:00:00-04:00

AJAX & Javascript

AJAX-based user interfaces are employed throughout Well.ca. This allows for a dynamic, more seamless user experience.

jQuery

Practically all of the AJAX and Javascripting on our site is enabled using a lightweight Javascript toolkit – jQuery.

By using jQuery’s cross-browser, event-binding and DOM replacement model, we can design our pages to elegantly degrade – that is, they work for as many users as possible.

Animated, AJAX Add-to-Cart

When a user adds products to their cart on Well.ca, the product image “flies” into the cart.. The user’s gaze is pulled towards the shopping cart which begins the visual connection of the Add To Cart → Checkout process.

Animations like this are uncommon in traditional e-commerce partially because sites are worried about browser compatibility issues. In our case, we use a jQuery override method so that the site will auto-fallback to non-AJAX methods if the browser is not compatible.

After the product enters the cart, the cart update (and new totals) are also enabled using AJAX – this allows less clunky shopping, as products can be added to cart without leaving the page.

Moving Shopping Cart

Our rich shopping cart contains a lot of information, including the core button to proceed to checkout. In order to make sure that you can checkout anywhere, even if the page scrolls for a long time, we animate the cart whenever the user scrolls down.

Rich Shopping Cart

2010-07-10T00:00:00-04:00

Rich Shopping Cart

Overview

The shopping cart is the kernel to every e-commerce site. Bad shopping carts make you visit the checkout page, just to see the final price of things. Bad carts are clunky, hard to read, and disappear just when you need them.

Most shopping carts are a disappointment.

We hope the cart at Well.ca is different. It was our goal, when we built our shopping cart, to make it the most usable, fun, and information-rich cart possible. Below, you can learn more.

Information Rich

There’s a lot of stuff going on in our tiny shopping cart.

In that tiny rectangle, you can checkout, change your currency, see your dynamic totals, and view full information on each product.

Go ahead – play with it :)

AJAX Enabled

Animations like this are uncommon in e-commerce partially because sites are worried that the dependency on Javascript may cause browser compatability issues, hindering sales. In our case, we use a jQuery override method so that the site will auto-fallback to a non-AJAX method of Add To Cart if the browser is not compatible.

Hover Product Info

A user may have 20+ things in their cart. In order to give full information on what’s inside, we’ve enabled hover information boxes on the products in the cart. Try moving your mouse over a product in your cart to see an example.

It Moves

Our cart contains a lot of information, including the core button to proceed to checkout. In order to make sure that you can checkout anywhere, even if the page scrolls for a long time, we needed to animate the cart whenever the user scrolls down.

Search

2010-07-09T00:00:00-04:00

Search

Our Search Obession

Search is the primary way users find products on our site.

When we started Well.ca, we tried to implement search in the quickest and most naive way possible; by doing a "%LIKE%" query on our database (basically going through every item one by one in the database and seeing if it matches the search term). This worked well for our originally small database, but obviously became unusable as we added thousands of products to our site.

Designing an intelligent search system that finds and sorts the products that users are looking for is a challenge. Below are some of the things we’ve done to improve that.

Rich Autocomplete

As you type in the search box on our site, our software works to quickly present you with previews of the most relevant possible matches for what you’re likely searching for.

”Did You Mean?” Spelling Recommendation Engine

If a user types the incorrect spelling for a word in our catalog, we use double metaphone distance algorithms to suggest alternate spellings.

Most spelling engines are designed for pre-existing dictionaries. But it’s no help for us to recommend an alternative spelling from the english dictionary if that word doesn’t exist in our database in the first place. In addition, many of our product names aren’t in the dictionary

Ranked, Relevant Results

It’s no good for a search engine to return all the words that contain the word “arm” in them, if they aren’t sorted based on relevancy.

Our site uses a separate search appliance that we built ourselves (and integrated with Lucene) to make sure that when a user looks for a product, they find the best matches possible, on the top of the page

Faceted Filtering

Once a search is completed, we use “facets” to help the user narrow down their selection.

Backend Management

2010-07-08T00:00:00-04:00

Backend Management

Overview

Some of the coolest technology behind Well.ca happens behind the scenes – this is the stuff we use to manage orders, products, and our site’s content.

Rich AJAX UI

Since we didn’t have to worry as much about browser compatibility for users’ really old browsers, we had a lot of fun building our backend management system with a rich, AJAX UI. This enables us to have floating windows, amazing excel-like grid layouts, drag-and-drop interfaces, and much more.

A lot of this is enabled using the ExtJS Javascript Toolkit.

Charts Everywhere

We love charts and statistics here at Well.ca. Our Backend management shows constantly updated, colourful graphs of everything that is happening on our site. We wish we could show you more!

Full, Graphical POS

For taking orders over the phone, and managing custom orders and refunds, we have a fully integrated POS system that we built into Well.ca. It’s gorgeous.

Logistics

2010-07-07T00:00:00-04:00

Logistics

Overview

After an order is made, a number of processes begin. On one hand, information is sent to the bank to process the credit card. Simultaneously, our accounting department’s software is synchronized with the order automatically.

In our warehouse, we are immediately notified that a new order needs to be filled, which triggers an adapted pick-pack-ship process which efficiently pulls the products from our warehouse and puts it into your order.

Our shipping partner is digitally informed of the address and the size and weight of the box into which it will all fit, so that we can generate a mailing-sticker.

As all of this happens, our software is informing the customer and our customer service department of the status of the order so that everyone can be informed, and a tracking number is generated so that the customer can track their package to its destination.

On the other side, our software is constantly synchronizing our database with our distributors and warehouses, so that we can keep our catalog up to date. Our warehousing department uses custom-built specialized handheld computer and barcode scanner software counts inventory, track POs, and re-stock the new merchandise that arrives each day.

We’re proud of the fact that we wrote all of this software ourselves. And even though our customers don’t interact with it directly, our backend-logistics software enables us to perform our core function: get orders to people’s doors quickly and efficiently.

Smart Recommendations

2010-07-06T00:00:00-04:00

Smart Recommendations

You may also be interested in…

Well.ca’s internally designed and coded smart recommendation engine is probably our most innovative trade secret. This engine is able to dynamically and intelligently recommend products to individual customers.

What it does

Our engine is able to build an interconnected hyper-graph of all the products we have. It then begins to sort and process them using its learning and inference engine – as the engine learns about each product, it begins to build relationships with others.

Here is a page from our site, showing the result:

A/B Testing

2010-07-05T00:00:00-04:00

A/B Testing

Philosophy

We needed a simple way to test different alternatives and version of our site.

Using the Vanity for Rails project as inspiration, we built a tool that does PHP A/B Testing over Redis.

We’ve open sourced the project so anyone can use it too.

Image Manipulation

2010-07-04T00:00:00-04:00

Image Manipulation

Product Images

Product Images are a pain: we have thousands of pictures from our manufacturers of varying quality and size. Our software does its best to automatically resize them, store the originals, and render them in a pleasing fashion.

Our image manipulations include cropping, resizing, and reflection, all automatically done server-side.

In some cases (such as on our front page) we automatically render reflections of images (and cache them) to give the “sitting on a glass table” effect to some of our display boxes.

Server-side Image Manipulation is processor intensive and algorithmically complex, but it saves us time pre-processing images, and creates more visually appealing layouts.

imWell - LiveChat

2010-07-03T00:00:00-04:00

imWell - LiveChat

Overview

We wanted to allow our customers to talk to us through our website. There are many options available, but none of them fit what we were looking for. Some used Flash, others through a popup window, and most cost a lot. We built our own chat application that can go on any HTML page, can be styled however you want and the chat persists across pages on the website.

Screenshots

1. Customer requests a chat

Don’t worry, the imWell system will ask all the available agents and find someone that can take the chat

2. You can Send Links

The imWell system handles links, and will persist across pages, maintaining the history. It’s magic!

3. Transfer to Someone Else

You can transfer chats to another person in your company, it does this elegantly.

Backend

Using the popular open source chat server Jabber as the backend, we created a web chat client that is truly amazing. In the near future we’ll be opening up a beta of imWell for anyone to use.

Features

No popups. No Flash. Just JavaScript and HTML.
Style the chat box through CSS.
Chat with visitors through any Jabber client.
Managed queues. imWell will find the first available person to chat
Chat & history will persist across your website. Help the visitor navigate your site.
A hosted solution. The backend application will be hosted on our server. Installing imWell on your site will only take 5 minutes!
Support for SSL.
It’s Free!

Adwords & SEO

2010-07-02T00:00:00-04:00

Adwords & SEO

SEM/SEO

Our advertising engine is constantly and automatically managing our search engine marketing, regular marketing, and affiliate marketing programs. Interested to see more? Contact us at labs@well.ca

We employ the Google, Yahoo, and MSN APIs to control all this automatically.

Affiliate Management

2010-07-01T00:00:00-04:00

Affiliate Management

Informed Affiliates are Happy Affiliates

All of our affiliate tools are developed internally, giving our affiliates real-time statistics on the performance of their campaigns. Here’s a screenshot of our software in action: