Designing for Emotional Context

UX Design

UX Redesign for DAniel’s Plumbing

Daniel’s Plumbing was struggling to stand out in the competitive Austin market.

The website had an average bounce rate of over 95 percent 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. The visuals needed to fit into the existing brand.

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 four trucks and moved to a larger space to accommodate the growth in the company.

Project Details

Project Approach

My work on this project began with a discovery phase that included an initial discovery meeting with the client and his team.

Approach

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 distressing 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

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.

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.

Outcomes

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.

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.

With Open Sans as the body font, it was easy to read, but I also needed the brand voice. 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.

Impact

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.

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.

Lessons Learned

As I look back in this project, I’m glad we were able to make such an impact on the conversion rates for the company. But I definitely made some mistakes.

I should not have ventured into creating marketing materials. While they were fun, they were not in my core wheelhouse. I’ve found that I’m best when I stick to my core strengths.

Business Inquiries:
[email protected]

Interested in working with me or my company? Standard Beagle is a UX agency providing UX strategy, user research, and product design.

Reach out through my business email and visit our website at standardbeagle.com.