Behind the Scenes Look at Starr Mechanical’s New Website

See the fantastic transformation for my latest custom website project! And read the behind the scenes story to see how it all came together >> https://alirand.com/custom-website-starr-mechanical/

Exciting news!

I just finished a new custom website for the Orlando mechanical contracting company, Starr Mechanical, Inc.

There were definitely some challenges along the way, but I’m really pleased with what we’ve come up with and more importantly, so is the company.

(If you don’t have time to read this behind-the-scenes story, you can just look at the pretty design photos here.)

Project Overview

Starr’s old website was built on a website builder program on their hosting provider, and was very limited – not to mention not mobile friendly!

It basically only had text with a few small pictures. And was very dark.

Ali Rand Web Design for Starr Mechanical Home Page Before
Old home page

It definitely didn’t portray the professionalism the company deserved.

Because Starr Mechanical, Inc. serves commercial and industrial clients in the areas of HVAC, chilled water, roofing, and equipment projects. They’ve done work for organizations like FedEx, Universal Orlando, The Ritz Carlton, and so many more (that I later put on their own “Clients” page).

The Goal

Their website needed to better show off their services/projects to entice organizations to request a quote.

And be more modern and mobile-friendly to compete with other companies’ websites in the Central Florida area.

Stage 1: Mockups

Once Justin Starr (the founder of Starr Mechanical, Inc.) completed his questionnaires, we learned what they needed and I set to work coming up with website mockups. Our SEO copywriter then did the keyword research and started working on the copy for the specified pages he needed.

He didn’t need too many pages… just a Home, About Us, Services, Projects, Clients, and Contact Us (later we added a Careers page, when looking at competitors’ sites with Justin).

For images, Justin had given me access to his company’s Dropbox, where all their project images were stored. And there were a LOT!

I used my best judgement in finding good photos for the site mockups, but after a while, you really have no idea which air conditioner is important or which water pipe better best embodies that service.

Ali Rand Web Design Project Photos for Starr Mechanical
And these were the photos for just ONE project…

And to be completely honest, I even had one photo in my mockup of a ceiling vent/pipe/random mechanical thingy that Justin pointed out was upside down. Let’s just say I’m very glad I’m not a mechanical contractor…

Anyway, since you’ve seen I have no background with mechanical contracting, deciphering which pictures to use proved difficult (to say the least).

Luckily, Justin went through the projects with us to decide which pictures he wanted highlighted on the site for major services (thank you, Justin!). And we organized which projects went under which service category, which was crucial for the projects page!

So then I was able to confidently revise the mockups until everyone was happy.

Home Page

For Starr’s home page, I went with a large header image where their value statement could be easily read.

Ali Rand Web Design for Starr Mechanical Home Page
I knew I wanted to display his biggest clients, so I added a “featured clients” bar under the header where the company logos were displayed. I made sure they represented the Orlando area, as well as his commercial clientele, to attract the right future prospects.

Ali Rand Web Design for Starr Mechanical Clients Bar on Home Page
I then added a services section to showcase what Starr offers. That was important to Justin and we made sure the right photos were represented here.

Ali Rand Web Design for Starr Mechanical How We Help
The featured projects section below it navigates to the project page where you can see photos from all his jobs. I added a hover effect so that the name of the company doesn’t interfere with the project photo.

Ali Rand Web Design for Starr Mechanical Featured Proejcts
And then I put in a testimonial and accreditation section. That way, clients can see that Starr Mechanical does excellent work and is accredited by their industry’s reputable bodies, like the CHFLA and ACCA.

About Us Page

There was a lot of copy to get across on this page, but I’m happy with the separation I’ve done. It highlights the markets Starr serves in a visually appealing way and gets their value across in the paragraphs. I separated sections with a combo of blue background photos and graphics to add interest.

Ali Rand Web Design for Starr Mechanical About Page
A Request a Quote section is at the bottom to lead clients to start their journey with Starr. And I’ve put it on all pages, so there’s always an easy call to action.

Services Page

I really love how this page turned out! I went through a couple of iterations before finally being happy with this one.

The separation and variety of columns makes this page unique and professional. Luckily, Starr had great, large photos that were perfect for background sections. And I added a blue overlay to keep in with the brand’s color scheme.

Ali Rand Web Design for Starr Mechanical Services Top

I also used some custom graphics to represent the 4 service areas Starr has, and added a cascading intro for the 4 of them.

Ali Rand Web Design for Starr Mechanical What We Do
Ali Rand Web Design for Starr Mechanical Services Bottom

Footer

A dark grey color became the background color for the footer, with an even darker color for the copyright bar. It fits in with the color scheme and ties the site together.

Ali Rand Web Design for Starr Mechanical Footer
Since Starr Mechanical, Inc. has a physical office and will most likely be inquired by phone, I made sure the footer had their contact details and would appear on every page.

Stage 2: The Dev Build

The next step was to build the site! Yay, finally and truly in MY wheelhouse now.

Since his current website at the time wasn’t on WordPress, I had to build his site on one of my “dev sites.” This just means the website is built on a subdomain that nobody really sees.

So first, I installed the GeneratePress theme because it’s amazing! Free, powerful, lightweight, good for SEO, and so on. Perfect framework for creating a custom website. It’s like Genesis, but FREE! Which makes me very happy to not waste money.

Then I installed my favorite/necessary plugins:

And then I got to work!

It doesn’t take long at all to build if you have a clear design to work on, like I had with my page mockups. It’s just a matter of recreating them!

Ali Rand Web Design Editing the Home Page for Starr Mechanical
And then checking for mobile compatibility, performance issues, etc.

Troubleshooting

Some issues I ran into were the logo on mobile and the projects page.

Starr Mechanical, Inc. is a long name, so you know their logo is going to be long.


Therefore, I had to edit the theme’s code to change when the menu breaks into the 3 horizontal line “Hamburger Menu.” I had to do it sooner as it wasn’t wrapping it right. But I already had the code from another site I’ve done, so that was a fast fix.

The other issue was the projects page gallery. I used a gallery plugin to show all the pictures, but for some annoying reason, a few weeks after installing it, it was taking *FOREVER* to load.

Ali Rand Web Design Gallery Plugin Hangup
The plugin taking too long to load.
Therefore, I had to find another gallery plugin and finally settled on Foo Gallery. It does the job and at least loads the gallery, which is kinda important, you know?

Justin then browsed the dev website and gave his final approval.

So now it was time to build the site on the real starrmechanical.net domain! However, it wasn’t as easy as I thought…

Stage 3: The Transfer

Justin’s site is hosted with Network Solutions. And unlike a lot of other hosting providers, they don’t allow WordPress installations to the root directory (/public_html/). You have to install it to a folder and then redirect the domain. Or else his site would be starrmechanical.net/folder-name/about-us/ instead of just starrmechanical.net/about-us/. And that just looks bad, so I needed to fix that.

So I did my research and found a page describing how to do it. Of course half of the comments said it didn’t work, so I wasn’t 100% confident it would work, but I followed the directions anyway.

I installed WordPress to a folder and then logged into the WordPress dashboard. I changed the site settings to the domain and then I went to Network Solutions’ domain options. I did the last step of pointing the domain to the new folder and went back to log into WordPress.

Naturally, I was met with an error page.

My heart did skip a beat, but I just waited a few seconds to retry logging in.

And then…the WordPress login screen!

I did my happy dance and logged in. I then visited the site to double check starrmechanical.net was now displaying the default WordPress home page and not his old website…and it was!

I thought to myself, as in the words of Borat, “Great Success!”

So I quickly put up a Coming Soon page and got my hard hat on by importing all my files from the dev site.

Ali Rand Web Design Custom CSS for Starr Mechanical
The longest part was uploading all the pictures to his Projects page. And that page still takes a long time to load due to his webhost/number of pictures, but at least you can see the progress as it loads.

I double checked that all the links and code reflected Starr’s site and not the dev site, and ran a final performance check with GTMetrix and Google’s Mobile Friendly Test for the pages.

Ali Rand Web Design GTMetrix Score for Starr Mechanical

Mobile Responsive Website Design for Starr Mechanical by Ali Rand
Once I was happy, I took down the Coming Soon page and the site was officially live!

Ali Rand Web Design for Starr Mechanical Home Page
New home page
Check out the rest of the design photos here or check out the site in action here.

Conclusion

Starr Mechanical, Inc. finally has a modern, professional, and mobile-responsive website! The pages and copy show off their expertise, and requesting a quote is now easier than ever.

Lastly, I want to wish Justin and the whole Starr Mechanical, Inc. team continued success in the future! I’m grateful they chose us for their new custom website and it was a real pleasure working with them.

Thanks again,

Ali & Gloria

P.S. Interested in getting your own awesome website? Learn more here!

Some of the links contained in this post are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.

About the Author
I create beautiful and conversion-focused WordPress websites for service-based entrepreneurs and businesses. Because websites should sell for you, not just look pretty. And if you're interested in learning how to maintain your website (so you can fix those pesky issues!), then click here.

8 thoughts on “Behind the Scenes Look at Starr Mechanical’s New Website

  1. Great post! I like how you bring us through the process of a website revamp without making it boring for us non-web designers. Lol. Thanks for the info!

    • Thanks Jen! I’m so glad you found it interesting, and not boring. Originally, I went more in depth in the domain and hosting part, but I edited it out because I was actually boring myself lol. Definitely a fine line to walk here… Anyway, thanks again for stopping by! I appreciate it.

    • I’m so glad you’re obsessed lol! Thanks so much for the compliments. And it’s good to know I’m not the only one who loves process posts! Thanks for stopping by!!

Leave a Comment