W.E. Brown is a plumbing, heating, air conditioning, and electrical company located in Charlottesville, VA. They have been serving the area since 1922, and take a great deal of pride in the quality of their work. Their old website was hard to use, poorly optimized for mobile, and felt out of date. I set out to design a website for them that looked clean, modern, and friendly, while making sure for it to be easy for users to get to the scheduling page.
W.E. Brown wanted to make it extremely easy for users to schedule an appointment, either through the online scheduling form, or by calling their phone number.
As far as technical requirements, the site also needed to pull in individual Google Reviews for a reviews page, as well as an overall review average from Google Reviews to be used throughout the site.
The new site was built on top of WordPress. I used Advanced Custom Fields to build out a series of modules that could be easily moved around and edited by future site maintainers, while still ensuring that the aesthetic of the site remained intact. I also used Timber in order to build out the site structure using Twig templating. I like Timber because it keeps my theme code cleaner, allowing me to use PHP for the data and logic, and Twig for the display and HTML.
I wanted to convey comfort and friendliness through the style of the website. Rounded corners and a bright interface that highlighted their brand color helped to achieve this goal.
In addition, I felt it was important to use real photographs on the site. Many companies in their industry rely on stock photography, and you can always tell immediately. By shooting our own photographs I think we achieved a much more authentic look.
One of the most important pieces of the website was the design of the scheduling form. Their old site had a very long and boring form, which I suspected was intimidating users.
In order to make the form more digestible, I chunked the information into discrete steps, making transitioning from one step to the next more fun by using a service van that moved across the page. I also broke several fields that had been dropdowns into radio buttons. This meant that all the options were exposed right away, making it easier to see and choose your selection quickly.
There was a lot of text on each of the service pages, so I wanted to bring in some kind of graphical element that led from one piece of content to the next, guiding the viewer down the page. I decided on themed vector graphics that led from one piece of content to the next: a pipe for plumbing, air duct for heating & cooling, and a cord for electrical.
Finally, I added animation to one of the graphics by animating the dash-array of the svg stroke property. Animating all of the designs wasn't within scope, but I hope to animate them all in a future batch of enhancements.
In the months since the launch of their new website, W.E. Brown has seen an increase in the number of mobile visitors, as well as in the number of customers scheduling through their online form. They have been very happy with the results.