Lochinvar is a manufacturer of boilers, heaters, tanks, packages and related solutions. My first project with this client was to create a custom page for their existing website where the end user could select narrow specifications to have a custom tank produced for them.
Because this page had to live in their current website we had no control over the tech stack and had to work directly with their third party vendor including for all code review and implementation as they were the key-holders to the repository and all branches. This required using a specific Node version (9.11.2), Yarn, custom Docker containers, and whitelisted connections to their AWS databases which made up the backend of their website. Running it all locally during development required either MacOS or Ubuntu/VMWare (no Windows) and a considerable chunk of RAM.
Once we were comfortable with the environment we plotted the user flow using xD mockups, but those ended up mostly serving as a rough guide because once the client’s engineers began testing the application they found numerous revisions and technical guardrails they wanted added in order to ensure that a visitor couldn’t accidentally order a tank with impossible specs. Examples include that tanks of certain sizes may require linings, tanks of certain orientations may have their connecting ports moved to different locations, and one of the more complicated scenarios: due to the way some tanks are welded, connections have restrictions where they can be placed (as they can’t be placed over a welding line due to structural integrity).
To resolve such manufacturing restrictions, a custom “Find minimum floor height” function was written using case switching and an imported array of tank models with their dimensions and known defaults. As a user input their desired dimensions they would be checked via this function to make sure that, for example, a 24″ tank can’t have any connections less than 10 inches from the edge due to the location of the welding seam. Similar data was used to determine the default sizes and types of connections, and to lock down options that are always required, like ensuring horizontal tanks have legs mounted at the factory.
We reviewed several Excel spreadsheets with existing tank models and their specs, known restrictions and defaults, and ensured that the application could be used to either customize an existing model (and have the correct defaults pre-loaded) or if choosing full-custom, that the options and restrictions also follow what the engineers expect. Numerous trial runs were performed by their staff to make sure that ordering an impossible tank was locked down through either limiting their options or providing validation errors, some of which are shown in the gallery’s screen shots.
At the end of the process, when a user finalizes the online order form, the web application will use a utility known as PDFKit to generate a filled out PDF order form based upon their selections. The order form will also differ based on horizontal or vertical tank with some fields and checkboxes in different locations as well as different tank renders. This order form is sent automatically to Lochinvar’s sales engineers so they can process the order.
An additional project was greenlit not long after involving the remodeling of their customer training website, Lochinvar-U. The new pages would have their video content powered by Vimeo with over 300 videos to add throughout the website’s content. All content was coordinated using custom post types with custom ACF meta fields that are unique to each type of post, so video pages would allow adding additional blocks of videos in chapter sections whereas help tools pages would link to an externally-hosted JavaScript calculator. A disclaimer modal was also added using Popup Maker with settings to track users and only bug them once.
