First4Numbers

Goals

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.

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, colors 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.

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.

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 customize their number labels or badges individually.

The product editor and live quote wizard were both custom designed in order to deliver a superior customer experience, maximize 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.

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 minimize 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 customized to be short and simple to answer, with just three questions and an optional comments section to maximize 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 mangement provide information on sales volume, stock throughput and a range of other metrics, with data exportable as a CSV file.

Technical

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

Outcome

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.