Spencer Manufacturing Website

During my summer 2020 internship at Spencer Manufacturing, I completely redesigned the company's website from scratch, adding countless new features and improvements.

Specifications

Dates Jun. 2020–Current
Tools Used HTML, CSS, JavaScript, PHP, SQL Database
Git version control

Introduction

Upon being hired by Spencer Manufacturing, a firm that builds custom fire trucks, I was given an array of different tasks, one of them being to make improvements to the company's existing website built in WordPress. The website suffered from many different problems: it was slow, many of its pages had been fleshed out years ago and were out-of-date, and it had no true mobile phone layout.

I began by fixing some of the most glaring issues, until I ultimately decided to pitch a concept for a brand new website design. I developed a mock-up using pure HTML/CSS/JavaScript, which was received well by the company leadership and I was given the green light to move forward with building the rest of the site anew.

The first mock-up shown to employees at Spencer Manufacturing.

Process and Results

The original home page was dominated with huge images that slowed down the loadtime of the site. I made it a priority to include as much purely textual content as possible so that the page was viewable even while images were being loaded in. Spencer Manufacturing was also looking for this page to "pop," so I included many different dynamic and moving elements as production went on.

Left: the original design of the homepage. Right: the new design of the homepage. The truck image fades in and out between different trucks.

The original deliveries page, which shows all of the company's recent finished trucks, adapted poorly to a narrow page width and made it generally very difficult to search for a particular truck, whether by name or by filterable category. The new design keeps these filter controls right in front of the user at all times, and the controls are easy to use and comfortably adapt to a narrow screen width by shifting below the navigation bar and turning into a drop-down.

Left: the original design of the deliveries page. Right: the new design of the deliveries page.

A challenge presented by writing the code from scratch for the new website was that the staff at the company did not have the knowledge to maintain it or add new deliveries pages when new trucks were built. I added a comprehensive administrative dashboard to the site, accessible only by passcode and reCAPTCHA, which allows the staff of the company to add trucks and edit trucks on the site, among other different features.

Instead of having to build an entire webpage on WordPress to add a truck to the website, admins simply have to fill out this form and attach the proper images. The site creates a JSON file for the data, and the truck immediately becomes visible to the public.

Truck Builder

Another project I worked on was a web-app the company could use with potential clients to automatically produce illustrations of an apparatus based on the client's desired truck features and functions. I designed the app to download onto a salesperson's computer to display in their browser. Once they finish with the client, they can then export their results by printing the page as a PDF document. This was developed using HTML/CSS/JavaScript.

The web-app was designed to operate much like a website form, where fields were represented with drop-down boxes and the flow carried the user from the top to the bottom.

The original web-app. Buttons at the bottom of the page allow a salesperson to clear their options or export to a printed document.

Once the project was nearly complete, the company decided that the public should be able to use this tool and submit the trucks they build to the company to be reviewed and quoted. This required:

In order to store this new data, I developed an SQL database that would keep track of each user, their contact information, whether or not they were approved, and their access token. Their specific URL is emailed to them after being approved. Truck data is stored in a different SQL table.

The UI was completely redone in order to make the information easier to understand and to make the web-app feel less like a webpage. All the controls moved to a sidebar, and each control condensed into a series of tabs that were accessed in this sidebar.

Left: the original Truck Builder just before the UI redesign. Right: the new design of the Truck Builder.

The full document no longer needed to be scrolled in order to interact with the Truck Builder. The web-app also became mobile-friendly, with the truck image now properly scaling to the width of the screen and the side-bar collapsing when appropriate.

A view of a completed truck in the truck builder.