Design of growing Austin plumber’s website in competitive market
Design Overview
Our first project with Daniel’s Austin was a website redesign in 2018. The website had an average bounce rate of over 95% and few users were converting into customers. Our goal was to reduce the bounce rate and increase conversions with a streamlined design and consistent template structure with a visual look that fit into the existing brand. Following our success on the website, we continued to implement design improvements as well as design digital and print marketing campaigns for the next year.
Within a year, the average weekly bounce rate had dropped to just over 70 percent, and was far less on busy traffic days. The monthly goal conversion rate to schedule an online appointment was at nearly 1.5 percent, and the company had added 4 trucks and moved to a larger space to accommodate the growth in the company.
Design Process
Discovery
My work on this project began with a discovery phase that included an initial discovery meeting with the client and his team. Because of budget limits, I needed to maximize this meeting with the stakeholders in order to understand target market and needs. I learned that the primary market was women in middle to high income residential areas of Austin. I also learned the company was frequently called after hours or on weekends for emergency services. Putting myself in the users’ shoes, I knew that people who were experiencing a distressful event could find it difficult to find items on a website unless it had specifically been designed to take context into account. I decided to make sure that I was designing for a persona that was upset and under stress as well as in a calm state of mind.
Site Review
Next I needed to understand the current website. This was a redesign of a WordPress site that already had content the client liked. It also provided information to me about what has been working and what was not. I didn’t have budget to do a full heuristic evaluation, but I made notes about where to concentrate design efforts. The client felt the site was broken, and I discovered that buttons on the site were built using an older method of images instead of CSS. Additionally, some of the titles were dark on the dark background, which made them hard to read. Some pages were empty of text, and it turned out the HTML wasn’t properly implemented. I knew a clean up of the code would go a long way.
Content Inventory
The client wanted to keep most of the content, but some of it needed to be reviewed and edited. We noted all of the pages on the site and their URLs so they could be tracked and redirected if needed. I also noted some pages that could be set to draft because they were empty and not providing value. All of this was made available to the client for review.
Site map / information architecture
Now that I had a clear idea of the content, I ideated on the right structure for managing it. The client said that he wanted his team to be able to manage the content, so it was important that I make it easy to find and manage on the backend. The majority of the site pages were to be managed as WordPress pages. Posts were reserved for ongoing articles and educational information that the client planned to create for SEO purposes.
Style tile
The client was clear that he liked his current branding. His company colors, logo and brand feel were set. I elected to build off of the branding by cleaning up with fonts, simplifying the buttons, and retain the dark look. Readability was important in order to reach the diverse audience who may or may not be in crisis mode.
The logo was also evolving, so I wanted to create a style tile that would be easy to build on.
UX Wireframes
Next, I designed the site wireframes. The site didn’t need to be complex. The most important action for visitors was having the ability to find a way to call or message for service. Social proof was also important, so I worked testimonials and ratings into the site throughout the layout.
I also wanted to make sure the content would be easy to read for those visitors would be reading the site when facing an emergency plumbing situation. Knowing that this state of mind could cause people not to be able to see information if it’s not clearly distinguished, my goal was to keep the layout consistent and simple.
I designed a simple set of wireframes to focus on the call to action.
Hi-fi mockups
Finally, I married the style tile and wireframes. With open sans as the body font, it was easy to read, but I retained the brand’s style through larger, decorative headings. I leaned on the bright yellow’s high contrast to the dark background to draw attention to emergency services and the call to action.
Additional Design Work
Site enhancements
Following the initial launch the site, the company grew from a small team of plumbers by twofold. The company moved into a much larger office and added two to four trucks to its fleet. The client decided to update the website to add additional services, including heating and air conditioning. I was asked to update the structure of the website to allow for this change and to design the home page and landing pages.
Marketing campaign
The client wanted to add marketing to his efforts, and he asked me to take on additional work to help make sure the look and feel of the website extended to marketing and social materials. I assisted in multiple areas, including cleaning up a brochure and rack card, developing a series of videos, and designing a post card campaign to remind previous customers about them and offer coupons.