As part of their growth into the signage industry, Allbiz Supplies needed to be able to offer custom cut vinyl lettering online. Allbiz already has an web-to-print storefront with a excellent designer app, but it wasn’t able to provide a good user experience when it came to making custom lettering.
Project requirements
Allbiz had several requirements for the app:
- It needed to send production-ready jobs to Allbiz. This meant that the order needed to be fully paid and it needed to supply a cut contour PDF file that could be sent straight to the cutter.
- It needed to calculate a competitive price for lettering at any size and quantity that Allbiz could make.
- It needed to offer a wide range of options (fonts, vinyl colours etc.)
- It needed to be easy for people to use.
A web-to-production solution
Allbiz had an existing web-to-print system, but there was no readily available way to integrate with its order workflow. (That is, it didn’t offer an API to integrate with third party apps.) While I would have preferred to make an app that integrates nicely with Allbiz’s existing system, I had to build a standalone eCommerce system, which could take the customer’s order, take payment, and send a production-ready job to the store to be made.
To build the app I used Drupal Commerce, which made it relatively easy to solve several of the engineering challenges this job produced.
Generating a cut contour file
A cut contour file is a PDF with lines on it, but the lines have a special spot colour called “CutContour” or something similar. Cutting machines are programmed to look for this line and cut along it to make any shape you want.
After some experimentation, I found that I was able to generate a contour file using a popular PDF library, TCPDF. All I needed to do was provide it with an SVG file containing an outline of the lettering to be made, and tell it to use a spot colour called “CutContour kiss cut” (because that’s what the cutter would be looking for). When an order was submitted through the app, an SVG file and a PDF file would be created for the job, and Allbiz would receive download links for these files when they received the order notification. These files could then be sent straight to a cutting machine.
Secure payments
Allbiz were already using PayPal for another project, so I set up the site to take payments using PayPal Commerce Platform.
Pricing logic to cover every possible order
According to Allbiz’s market research, lettering pricing follows a steep curve: it starts off at a very high price per metre and then get’s much cheaper per metre as the size of the lettering increases. (Economy of scale, and all that.) I used the web app GeoGebra to devise a pricing function that returned a competitive price per metre for any piece of lettering from the smallest to the largest that Allbiz could make:
The pricing function also needed to allow for the number of pieces that would need to be weeded out, and add a small price for each. (after the machine cuts the letters out of the vinyl, an operator has to peel off the piece of vinyl around the letters and the little pieces inside the letters). To count the number of weeded pieces in a piece of lettering, I wrote an algorithm that counted the number of paths (lines) it took to draw each glyph. If it takes two lines to draw a letter (e.g “O” or “A”) then that means the glyph has one piece that needs to be weeded out. Of course, there are exceptions to this rule, such as lowercase “i” or any letter with an accent, so I made exceptions for those letters.
A simple yet powerful user interface
Before beginning the user interface design, I did some research looking at the lettering designers that were already out there. I found that it was necessary to make an interface that provided a WYSIWYG editor (What You See Is What You Get) and a clean set of controls for choosing typeface styles and stock colour. The app also needed to provide live, instantaneous price updates.
WYSIWYG editor
To make the text input box look like the final product, I needed it to show the same colour and typeface as the user had selected. I also needed the text to shrink when the line became too long to fit on the screen.
To solve these problems, I implemented a basic listener pattern that updated the appearance of the text (and the price) every time the user made a change to any setting.
Instantaneous price updates
The editor needed to show price updates instantly. That is, each time the user clicked a button or typed a letter, the price needed to change to reflect that without much (or any) perceptible delay. It was important that the customer could immediately see the price change resulting from each little change they made to their order.
To create this feature, I added pricing logic to the editor. However, this pricing logic was not allowed to have the final say on the price, because that could potentially allow a malicious user to manipulate the price before submitting the order. To solve this I duplicated the pricing logic on the server and recalculated each item’s price after it was added to the customer’s cart.