Improving user experience for home service websites

Here’s the 4 steps I take for improving the user experience when it comes to designing websites for home service businesses.

First, the worst way to design user experience

The worst way to design the user experience of a website is to just “create a website”. This is often what is suggested by YouTube commercials from a company that rhymes with Styx.

I’ll agree that any website is better than no website, but that’s like any business cards are better than no business cards.

When it comes to designing a website that will guide visitors into becoming customers, there’s at least two things you need to do first:

1. Set goals for your website.
2. Write compelling copy.

It’s critical you first establish what you want visitors to do on your website, and then write content that guides your user to do whatever it is you want them do.

Once you know the destination and have the “voice” of your roadmap worked out, then you can move onto user experience, what your ideal customers experience when they visit your website.

But I just run a gutter cleaning company. What do I care about user experience?

Valid question from a gutter cleaning business owner

As a business owner, you should care about your website’s user experience, because it reflects part of the greater customer experience that people have when dealing with your brand.

You don’t want to be known as the gutter cleaner who cuts corners. Likewise, you don’t want to be known as the gutter cleaner with the website that doesn’t work.

Even if you’re not the one designing and developing your website, it’s an easy process to understand. Below, I share the 4-step process I’ve started to use. Feel free to use them for yourself if you’d like.

1. Create and test a wireframe in Adobe XD

Once you’ve got your copywriting written out in a compelling fashion, you can build a wireframe in Adobe XD, which is a great little tool for building everything from wireframes, mockups and interactive prototypes for websites.

Tip: If you don’t want to design a bunch of elements from scratch, you can download a variety of UI kits, kits with common user interface elements.

Your goal in creating a wireframe is somewhat like drawing a rough sketch. But instead of using Latin placeholder (i.e., “Lorem ipsum” text in random locations, each element serves a specific purpose. That’s why I recommend determining goals and writing copy before designing, so that your website is clear and free of bloated distractions that keep your audience from doing what you want them to do.

After creating a rough “sketch” of your site, you’re ready to transform it into a wireframe.

2. Transform into a working prototype in Adobe XD

After creating a static wireframe in Adobe XD, you can then tie pages together so that the website somewhat functions like a real website.

What I’ll usually try to do is make sure at least all links on the home page link to something, so that a client or somebody can test out the user experience.

Another thing I do is flesh out the wireframe so it looks more like a prototype than just a wireframe. This is fairly easy, as the Adobe XD interface allows you to quickly drop in photos.

Once there’s something that’s starting to look and function like a real website, it’s time to start testing the user experience.

3. Test the user experience and make adjustments

Adobe XD allows you to publish a live, interactive models of website, which you can share with others. What I’ve found is that it’s easier for clients to provide feedback on a prototype that they can test out.

Large companies often hire entire teams of user experience testers or analysts. When it comes to small or micro businesses, those kind of resources aren’t always available. However, you can still make massive improvements to the user experience of your website by performing what Donald Miller calls the “Grunt Test”:

1. What do you offer?
2. How will it make my life better?
3. What do I need to do to buy it?

If you pull up your prototype and can’t answer those questions within 30 seconds, your prototype needs to be revised. Maybe something needs to be cut or made more clear, or perhaps the content needs to be rearranged. But you’ll need to revise your prototype so that when your users experience your website, they’ll be able to pass the “Grunt Test.”

4. Use the prototype as a model for designing your site

After testing out the prototype and passing the “Grunt Test”, the prototype can serve as a model for designing the live site.

Note I said “model”, not exact replica. That’s because translating the look and feel of a prototype designed in Adobe XD isn’t going to perfectly match a website running on WordPress. At least, it won’t unless you’ve got a team of dedicated web designers and developers, which is usually outside the budget of most service industry and small businesses.

Recapping how to improve user experience

So if you’re a home service business and want to improve the user experience of your website, try following the steps:

1. Determine who your target audience is and what you want them to do.
2. Write copy for your website that winsomely guides visitors toward your goal.
3. Create a wireframe that shows the structure of your home page, using Adobe XD or some other tool.
4. Flesh out the wireframe to function as a prototype, so that you and others can test it.
5. Test the site by applying the “Grunt Test”.
6. After passing the “Grunt Test”, use the prototype to serve as a model for designing a new site or revamping your existing one.

Got questions? Contact me if there’s anything I can help you with.