Home / First 4 Numbers

First 4 Numbers

Website Express Ltd Portfolio

Project Overview

First4Numbers is a leading UK player in the niche market of printing competitor numbers for sporting events. The company prints bespoke numbers for runners and riders, athletes and fun runners, and was official supplier to the London 2012 Olympics.

The company upgraded its web presence in 2010 with a first generation e-commerce site, and had been enjoying growth of more than 20% in sales turnover every year since. In 2014, however, the company's management decided an upgrade was necessary with the impending Drupal 6 support end of life and to address the following key objectives:

Key objectives:

  • provide an improved and modern mobile experience
  • further automate the ordering process
  • streamline the customer journey, to improve conversion of visits to orders
  • capture maximum value from each customer through smart up-selling
  • enable the site take payments in multiple currencies
  • enable the site for global order taking and fulfilment
  • prepare for multilingual versions
  • largely automate the customer feedback process

The first generation website had used Drupal 6, so there were economies from utilising some basic structure from the original site and building on that. The new site has been built in Drupal 7, using the additional functionality available from the upgrade.

First4Numbers sought out the Drupal developers and enthusiasts at Website Express, who had built their previous Drupal 6 site to perform the upgrade. The Website Express team also agreed that Drupal had the capabilities of meeting all the client's operational requirements for their new, improved site and would provide a sound foundation for support and development in the future.


The first generation site allowed customers to select products, create their own designs and place an order. However, orders often still required the input of First4Numbers staff to check and return proofs for customer checking prior to printing an order. The new site needed to automate the process completely, freeing up staff time and enabling the team to handle a much larger volume of orders.

One challenge was that this degree of additional automation needed to be added while still ensuring the order preparation process was sufficiently simple for an amateur user. Though the previous site did allow on-page layout, it was not considered sufficiently intuitive for new users.

The team at First4Numbers feels that their business has the potential to supply globally, with only the cost of shipping a constraint to delivering event numbers worldwide. As such, they indicated that the site needed to be set up for future expansion first into mainland Europe, then further afield, with the ability to quote prices and take payments in a variety of currencies. It also needed to be easily expandable into additional languages.

Key Features

A considerable amount of time and effort was put into constructing a custom ordering process to improve the user experience. While ordering was possible on the old site, it used an old style editor that had become outdated.

Step 1 - select a number

The new ordering system allows a customer to choose from an initial list of sport types, which helps funnel customers' specific needs. They can then select the number range, colours of print, design, upload their club or corporate logos, and select the print material. The system delivers a live price quote based on the decisions made, and allows a customer to step back and forward through the process to modify their order at each stage.

Step 2 - choose a material

Suggestions and further detailed information are made available at key stages, such as when choosing the print fabric or material. As the customer develops their order, earlier options are removed from view to ease decision making.

This functionality is managed on the backend by the Drupal field system and commerce, using related taxonomies and custom fields together with the Inline Entity Form, Entity Reference and Entity API modules. On the front end, the wizard is a custom module extending the AngularJS framework.

Step 3 - quantity & options

Context-sensitive help is also provided alongside the order window at every stage, and can be viewed on the right side of the screen. If customers wish, they may also upload a database of names to customise their number labels or badges individually.

Step 4 - quote

The product editor and live quote wizard were both custom designed in order to deliver a superior customer experience, maximise sales, and encourage repeat business. The design and development teams went through several iterations of this system with the client before producing the final AngularJS based front end as a custom module.

Step 5 - the editor

At order confirmation, customers are then encouraged to pay for their order using a Worldpay credit and debit card link. This link is updated in real time with interbank exchange rates, which allows for quotes in any world currency. The Worldpay interface has been integrated to minimise the clicks away from the site and uses a smart address entry with postcode finder; for corporate orders, a link to Companies House enables autofill of additional details.

Customers have a choice of delivery options to select from, depending on the speed of delivery required. They have the flexibility to place and pay for an order without creating an account, should they so wish. This functionality was all provided by Drupal Commerce, with the help of the Checkout Pages, Commerce Extra Panes and Commerce Checkout Progress modules, and some configuration.

Throughout the ordering process, upsells are offered. These start with products to affix the numbers, such as safety pins; and as the ordering process concludes, other event items such as safety clothing and barrier tape are offered. A dynamic system calculates the quantities of supporting products required, based on the quantity of numbers ordered, and adds the correct quantity and price instantly to the shopping basket.

The order process also automatically puts the email of the customer into a feedback process, acknowledging their order, enabling them to track the progress of the order, and subsequently sending them a feedback questionnaire. This was customised to be short and simple to answer, with just three questions and an optional comments section to maximise the response rate. The website's functionality allows First4Numbers to review feedback and respond as necessary, with the option to upload responses to a rotating display on the site.

The design is responsive and has been tested to ensure it has full functionality across all tablet and smartphone platforms.

First4Numbers staff have role based access to the site, enabling them to update products and prices, maintain the news and promotional pages and handle customer orders as necessary depending on their position.

A full suite of reporting tools for management provide information on sales volume, stock throughput and a range of other metrics, with data exportable as a CSV file.


The site is largely custom built. Having started with Commerce Kickstart, the team dropped back to the plain Commerce distribution. Custom line items were added for generated products, and a JavaScript browser application with supporting API. A graphics editor was added that generates SVG to drive the printing process. ImageMagick is then used to create previews on the fly for client approval.

Key technology used:

  • Drupal
  • Commerce
  • Angularjs
  • Raphaeljs
  • ImageMagick


The site projects a reputable, trustworthy company, important for an essentially online, print-related business, and setting First4Numbers once again far ahead of its peers in terms of professionalism. The order placing process has been substantially simplified, and is acknowledged as delivering a superior customer experience.

The company now only needs to give orders a final proof check, prior to printing, considerably reducing staff time needed to handle each order. This has made the business far more scalable than before.

With the site live, the First4Numbers team is already receiving an increased level of orders, plus largely positive reviews for the service. Sales into Ireland and Germany are starting to take off, with further European countries to be added shortly.