Metro East Overhead Doors Website Design
Project Overview
Sometimes you do a complete website redesign to add new functionality, and other times you do it to update the style to improve the UX and follow the current trends. But in the case of Metro East Overhead Doors, I rebuilt their site from scratch to troubleshoot security issues that were a result of outdated WordPress themes and plugins. Metro East had fallen victim to brute force attacks that made way for malware to break their website. After putting a band aid on that problem many times, I knew it was best to just start from scratch, focusing on keep the new build lean, performant, and secure.
The content was simple and straightforward, so it made sense to do the site as a scrolling one-page design to minimize wait time for users. Bold colored sections help delineate the sections of the site, with subtle background graphics and patterns used to add interest. Being in the service industry and realizing that most people would be visiting the site looking for help, I focused on clearly defined call to action buttons and easy to find contact information. For the content structure, I created it with mobile devices in mind, allowing each section to maximize the viewport of whatever browser or device was viewing the website.
Project Highlights
Custom Testimonials Post Type
Metro East's previous website had a collection of testimonials, each manually created on the page. This made it hard to scale and much more time consuming to keep updated. I created a custom post type for the testimonials containing only the information required in a simple interface. All of the testimonials are automatically loaded and styled on the site, allowing Metro East to quickly add new ones without having to touch the page content and layout.
On-page SEO Optimization
Metro East faces fierce competition in the garage door service space, so providing on-page Search Engine Optimization was critical. By utilizing the Rank Math SEO plugin, I was able to make sure the focus keywords, meta titles and descriptions, and page content were configured correctly to help boost organic page ranks and provide aethetically pleasing listings on search results pages to encourage users to visit Metro East's website.
Headroom.JS Menu
Having a navigation menu that's always accessible is a blessing and a curse. The easy access is great, but you have to sacrifice valuable real estate on the top of the screen. To solve that, I implemented a menu effect using the Headroom.JS JavaScript code. This hides the menu when the user is scrolling down exploring new content, but shows it when they scroll up, which is presumably when they'd want to return to the top to navigate to another area on the site.
