Back

Drains911

Summary:

Drains911 is a steadily growing plumbing and drainage company based in Massachusetts. They required a complete redesign of their current site to present their company professionally. The challenge presented by them was to create a website that uses both their logo colors of blue and red while also making the website optimized for SEO and SEM. However they did not have any images or proper descriptions for any of their services. The color clash was handled via gradients. The SEO and SEM optimization and the descriptions were handled via copywriting and research.

Built with:

Figma

WordPress

Fonts and colors:

The primary color used for the site was white and the secondary color was black. The first highlight color was #601227 and the second was #08315B. Mukta Malar was used as the typeface for headers and titles while for paragraphs and text Inter was used.

Introduction

The challenge they presented was that they wanted the website to represent their company colors, blue and red in a way that wouldn’t look unprofessional and amateurish. Additionally they wanted their pages to be optimized for SEO, SEM and for conversion but didn’t have any pictures or descriptions of their services, presenting the challenge of showcasing their work. I decided the best way to have both colors on the website would be to use a gradient and create two highlight colors. To handle the SEO, SEM and the lack of descriptions for their services I decided to conduct research in the field of plumbing and drainage and began copywriting until I could create paragraphs that explained the services well and were easy to read. Minimal animations were used on the site as the site needed to look professional and the large presence of animations would give a more startup and amateurish impression.

Colors and Fonts

One of the challenges of this project was making sure the two opposing logo colors didn’t clash on the website. To handle this I created two highlight colors, the first was #601227 which was a dark shade of red and the second was #08315B, a dark shade of blue. With two clashing colors already being present I decided to go with the neutral colors of white as the primary color and black as the secondary color. To make sure the red and blue didn’t clash, I used them in a gradient that went from #601227 to #08315B in the section titles. By having already established the two colors it made it easy to include only one as a primary highlight per section. In the sections where both were needed the blue would be used as another gradient sitting on top of an image fading into nothing. Additionally, the primary and secondary colors were always present making sure the darker colors wouldn’t stand out too much and clash. Two different fonts were also used. For the headers and the title Mukta Malar was used. For the paragraphs and other text Inter was used. Mukta Malar was used as the header and title font because it would stand out through the gradient and provide clarity among the large amount of colors present on the site. Inter was used as the paragraph text so that the user's eyes would be able to rest and have some normalcy and comfort on a site where everything is already asking for a lot of attention.

Design Choices

The second challenge with this website was a lack of images. This made the use of icons and rare usage of generic stock images important. The stock images were kept to a minimum, only used to cleanse the user's visual palette. The reason behind this was because there were already too many bids for attention with the contrasting colors and extensive icons, so the images were used scarcely. Additionally, with the presence of gradients in every title visual contrast was already occurring. Minimal animations were created for the site. The reasoning behind this is because the client wanted to head in a more professional direction. By including an extensive amount of animations it would take away from that, so minimal animations were made and used only in sections that required them.

Conclusion

The final challenge of this website was making it SEO and SEM optimized and having an explanation for each service without any assistance from the client. In order to accomplish this I researched the plumbing and drain cleaning industry extensively until I could explain each service. After doing such I wrote 800 words worth of text for each service, the optimal for length for SEO. Then rewrote the texts until the reading level was that of a fourth grader. After doing such I created compelling meta descriptions and titles and added the text onto the site, prepping it for SEM. After launching the site, Drains911 has seen an increase in their business. They receive more calls for services now and have a much higher conversion percentage than before. They also appear more frequently in searches in the Massachusetts area for drain cleaning and plumbing.