W.E. Brown is a plumbing, heating, a/c, and electrical company located in Charlottesville, VA. They needed a modern refresh of their site with an emphasis on scheduling visits.
W.E. Brown wanted to modernize their aging website, making it mobile-friendly, as well as making it easier to schedule an appointment through the choice of either a scheduling form or a telephone link.
The site also needed to pull in individual Google Reviews for a reviews page, as well as an overall review average to be used throughout the site.
I began the project by breaking down W. E. Brown’s goals into specific requirements:
1. Friendly & Modern Appearance
The site was part of a full rebranding and needed to match and extend the other elements of the new design system, creating an inviting and friendly web presence.
2. Improved Ease of Scheduling
Telephone numbers and links needed to be front-and-center on mobile, and the scheduling page needed to be easy and enjoyable to use.
The website redesign was part of a larger rebranding, and the site needed to fit in with and extend the new design system. This meant using the new brand colors and typefaces, as well as coming up with a simple illustration style that matched the look and feel of everything else.
W.E. Brown wanted to convey a professional yet comfortable and friendly feeling through their website. Rounded corners make the elements feel soft and comfortable, while interactive animations and cheerful photography convey fun. Tight typography and a minimal color pallette keep the aesthetic professional and trustworthy.
Part of making the site feel fun and friendly involved creating a series of scroll-animated elements on each of the service pages.
On the plumbing page a pipe fills with water as you scroll, on the electrical page bolts of energy flow through a wire, and the heating and cooling pages have ducts with flowing air. Having something moving and changing as you scroll down the page is fun and encourages the users to keep scrolling through the content.
I made the animations by creating a full-page svg element behind the other page content. One or multiple svg paths are drawn within it dynamically on pageload using JavaScript. I couldn’t use pre-made svgs because the paths needed to pass behind certain other page elements, and the content is positioned differently at different screen sizes. By drawing the SVGs procedurally with code, they always match the content and can be updated any time the browser window size changes.
It was very important to make scheduling appointments as frictionless as possible with the redesign. On their old site, the scheduling form was dauntingly long. In order to make it more user-friendly I broke the form up into three steps, and used an animated service truck moving across the screen to make progressing through the form fun.
The redesign was a success, with an increase in mobile users as well as an increase in appointments scheduled through the site. People also spend more time on the site and visit more pages now.
See it for yourself here: WEBrown.com