During my summer 2020 internship at Spencer Manufacturing, I completely redesigned the company's website from scratch, adding countless new features and improvements.
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.
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.
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.
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.
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.
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.
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.