Cooden Cellars website and store integration

Screenshot: Cooden Cellars websiteThe new site is still in development and can currently be accessed only on a development server. As a development site, it is subject to change and occasional unavailability. It should also not be used to attempt to purchase anything(!), and not be publicised except in the context of the information provided here.

The new Cooden Cellars website is a major rewrite of the original system, developed to support the expansion of the company online, its wholesale trade, and the move into additional retail premises. The site includes a completely new design that works on a wide variety of devices, including mobile phones, and a much improved user interface. It also includes extensive new administration features, including an overview of the current state of the business (such as stock levels, open orders, orders awaiting delivery etc), stock control management, delivery and dispatch support, and invoicing; as well as retail store integration – every sale is now recorded on the system using in-store scanners.

Background

I have been involved with Cooden Cellars since the company first created a website for showcasing and selling their products. The original site was put together on a very tight budget and to a tight timescale, but included full WorldPay integration and features like Wine Club membership, favourites, dynamic Word downloads of the product catalogue and a full-featured commenting system. Since the original site first debuted in 2005, the business has expanded, opening a new retail location and extending its wholesale trade.

The original website supported this expansion – a resource accessible from multiple locations and containing details of most of the products and services provided by the company. It was for this reason that a decision was made to expand the functionality provided by the website, so that it could act as a central resource for all company operations, including in-store transactions. As well as greatly expanding the scope and functionality of the website, we took the opportunity to completely redevelop the look and feel of the site based on the feedback that had been received over the years, a desire to better promote the products and services provided by the company, and to improve all of the user interactions.

Design and development

The new Cooden Cellars site has been developed from scratch, tailored to the needs of the company. Cooden Cellars have been involved closely from the outset in specifying and refining the design and functionality of the new website.

One of the aims of the new site was to place greater emphasis on the products sold by the company when the user first encounters the site. Therefore, the homepage contains prominent Featured, Recent and Popular columns of products, as well as a splash area across the top with highlighted items. However, we didn’t want to lose the fact that Cooden Cellars does a lot more than just sell wine, so space was made for the Services offered by the company, as well as a prominent News and Views section. In addition, the splash area was developed so that it could display information about upcoming events and include featured articles, as well as display products. All of the content on the new homepage is either automatically updated or can be changed by using simple online administration tools.

We didn’t want to lose the simple navigation provided by the old site, for browsing wines, spirits and other items. So we included a prominent Browse section, which can be used when someone is not quite sure what they’re looking for. Selecting one of the categories will load in the first page of items for that category (with any featured items displayed first), as well as the option for further refining the categories – so, for example, selecting Wine will then allow someone to further filter on Table, Sparkling, Sherry, Port, Madeira, and Sweet. Users can also choose whether to filter on price or country, and then by region and so on. Also, if there’s a relevant blog entry that applies to the current set of filters, we’ll show a link to that too – in case the user wants some more ideas.

One of the weaknesses of the old site was the search, which didn’t work across the whole product range – you had to browse by Wine or Spirits or some other category first. The new site includes a powerful new search engine which works across every product in the database. The system is designed to return as many matching items as possible, with the most relevant first. And once you’ve searched for something, you can further refine the results using the same criteria as when browsing. And all of this functionality is accessible directly from the homepage.

The redesign of the site goes a long way beyond just the homepage though. Users can now easily register for the site when they shop online, giving them access to their online purchase history and easy access to the Wine Club and other services. They can also see the current status of any of their orders, and get recommendations based on their previous purchases. All of the user pages, and the online transaction pages, use a special template that strips out all of the extraneous information not relevant to what the user is looking at or trying to do. So, for example, the checkout page just includes information about that particular order – removing all of the additional page furniture (like the footer, or the featured products column). This is to make the purchasing (and other user processes) as easy as possible, and as such to install confidence in the user in the process.

The admin tools… provide a mechanism for managing everything that happens on the site and across the business

The biggest change to the functionality provided by the website though is to the administration areas. Whereas before the admin tools were there purely for the benefit of managing content on the site, they now provide a mechanism for managing everything that happens on the site and across the business. We spent a lot of time together working out the simplest way of representing all of the data on the site, and for how best to manage the various complicated processes involved in running the business. The starting point is an overview screen, which includes the current status of orders, orders today, stock warnings, accounts added, active promotions, products sold and services added/renewed. This is further broken down into a Now section and a 30 days section, which provides a slightly longer view on what’s going on.

Administrators also get a special admin bar that runs across the top of the website. This includes alerts for anything requiring immediate attention, as well as links to all of the admin functionality and a search form for querying the admin version of the product database. It provides a consistent and persistent interface to all administrator functions.

Some of the challenges

These are just some of the challenges that we had to address when building the new system:

  • Tracking stock without barcodes
    Most of the products that Cooden Cellars sell include barcodes, which can be associated with the relevant product on the site and tracked using handheld scanners. However, not all products do – so it was necessary to have a mechanism for generating and printing barcodes that could be added to those products that lacked them. We looked at a number of different options before deciding on a Dymo LabelWriter 450 printer. I wrote some software that generated a barcode sequence (based on the product id and other data in the database). I also designed a barcode label using the Dymo client software, which included a barcode place-holder, Cooden Cellars logo, and a place-holder for some additional information about the product. Then, by using the scripting interface provided by the Dymo software, I was able to write some code that connected directly to the printer from the product web page, so that an administrator could just click a button to generate and print a label for any product on the system.
  • Managing a complicated delivery with stock from multiple locations
    Most orders are relatively easy to process. The order comes in, the stock is allocated from the warehouse, and the products are dispatched. However, in some cases not all of the stock is available in the warehouse and so must be sourced from other retail locations; and in other cases, an order may have to be partially fulfilled, with a later delivery once more stock has become available. In some cases, with the agreement of a customer, items are substituted if the original items are no longer available. All of this makes designing an order/delivery system a good deal more complicated, and it makes designing a simple interface to handle these different scenarios harder still.
    What became clear as we discussed the various options for handling all of this variety was that we needed to keep separate records for every step of the order/delivery process in the database, so that a delivery – while linked to an original order – could in fact be very different to that original order. So the database, software and interface were written to provide clear links between each part of an order and any associated deliveries, so that it was easy to track what had happened to each specific element of an order, however complicated that outcome might be. We also made it easy for an administrator to change the quantity of items delivered and to track that against the number originally ordered; and to specify where the stock to fulfil that outcome had originated from – the warehouse or a specific retail location. The latter was handled by a simple form that loads over the main delivery interface when an item is picked – asking for the location the item was picked from. Sometimes the solution is to keep it simple, so for the rare case of substitutions an administrator has to generate an additional order to add the substitute items.
  • Recording retail transactions
    For the entire system to work, we needed to be able to easily record retail sales as well as orders placed via the online store. After investigating a number of different scanners, we chose a Peninsula Phoenix II CCD Barcode Reader for reading in the barcode data for each product sold. A scanner was attached to a laptop in each retail location. Each retail location was given a specific section on the website for recording sales – interfacing with the existing order/delivery system to produce a record of the sale of each item at that location. The interface for scanning items was kept as simple as possible – allowing for items to be scanned multiple times to record the number of each item sold – and with a simple finalise button to complete the transaction. As soon as a transaction is finalised, the information is available to every administrator logging into the system from any location via the administration overview screen.

Technical details

The site is hosted on a linux debian server. All design is HTML/CSS based. Javascript is used to enhance some of the site functionality. The site was developed in PHP and includes a custom content management and e-commerce system. It uses a MySQL database for managing all product data and status, and system settings. The system integrates with WordPress, which is used to generate the site’s blog and for editing static page content using a JSON plugin. All payments, including Wine Club subscriptions, are handled via WorldPay. All personal data is encrypted using salted MD5 encryption. All transactions, user pages and administration pages are accessed over a secure connection (SSL).