Transform Your Ugly Directory Design into Art

This article was originally published on the Business Directory Plugin blog. Click here to see the original and access bonus content with it.

Most directories work the same way: businesses list their profiles, and searchers find those profiles. It seems fairly cut and dry. So why, then, do some directories seem more successful than others?

Part of the reason is functionality — some directories target groups that just search for things more often, likeFoursquare’s audience of people looking for local restaurants and events.

But other directories, like Thumbtack — which is arguably more of a niche directory — still have great success. Why?

Well, the other reason that many directories succeed is simply because of a great design. They have a level of professionalism about their appearance that doesn’t say, “I put this together in my free time because I was too lazy to hire a designer.”

Of course, having a great design doesn’t mean you need to hire a designer, but it does mean that your site should have a certain level of je ne sais quoi.

Here are a few rules to follow when it comes to turning a boring, run-of-the-mill directory into something that truly entices visitors.

Don’t miss: 13 Beautifully Designed Directories

Avoid Clutter

Directories by nature are full of information, but how your directory displays that information is what makes it either beautiful or ugly.

Ugly directories put all of their information on their landing page or homepage. While this has little to do with the actual usability of the site and is often an effective tactic for some searchers, it doesn’t make for an attractive site, and for some users, can actually prevent them from using the directory.

One of the main reasons you don’t want to put all of you information at-the-ready is clutter. Even if your site is completely legitimate, cluttered sites have a certain level of unprofessionalism that scream “we’re full of scam listings!”

Cluttered: Moo-Directory

So how do you make sure your information is a priority while still avoiding clutter? Whitespace.

Whitespace — or the negative space between content — is essential for giving your site a professional feel, even if you have a lot of elements happening on one page. One great example of a busy directory that utilizes whitespace isBrownbook.

Clean: Brownbook

While the focus of their homepage includes lists of businesses for quick searchability, they don’t clutter the page with anything unnecessary and make use of a sidebar to communicate next steps for potential listers.

Make Searchability a Priority

People generally come to a directory for one of two reasons: to find businesses, or to list their business to be found by others. That means the number one function of your site is being searchable, and you want to make sure that both parties — those wanting to be found and those looking to find — are able to quickly get started either searching or setting up an account.

Some directories do this quite well, like Bing Places.

Their directory caters to businesses looking to be found, so their directory’s homepage is dedicated to helping businesses get listed.

Other sites like CitySearch place a heavier focus on being searchable from a user’s perspective. Their homepage is dedicated to the top categories a visitor to their page would be interested in browsing.

The moral of the story is that your site’s design should center on the needs of your biggest users. If you want to target businesses looking to be listed, make marketing your listings a priority on your directory’s main landing page.

If you’re looking to target visitors that want to find local businesses, then your search bar should be front and center, not hidden away in the corners of your page.

Use High-Quality Visuals

When it comes to images, the go-to choice for many sites is to use stock photos, and you’ll notice that bigger directories like Merchant Circle and CityVoter all use them. But the difference between CityVoter’s stock photos and ones like this is that CityVoter doesn’t just use photos for the sake of having photos. They use good photos that enhance their site’s design.

What do we mean by good? Well, good stock photos:

  • Are high-quality (not blurry, stretched, or pixelated)
  • Are large enough to fill the screen
  • Are responsive (for mobile)
  • Are of people in natural settings doing normal things (NOT like these)
  • Are relevant to the directory type

A lot of directories decide to forgo using more traditional stock photos and opt for more illustrated images and product screenshots, like AdviceLocal. Or you can use stock photos to separate categories like USCity’s directory.

If you do decide to opt-out of using images all together, consider formatting your site like Brownbook, which makes good use of whitespace without needing additional images.

Treat It Like a Microsite

You may think that all of these strategies are well and good for directories like Merchant Circle and CityVoter, because their entire site is their directory. But what do you do if your directory is just a subsection of your regular business site?

You may be tempted to keep the branding and design for your directory similar to that of your current website so that your customers know it’s still your offering, but the opposite strategy — having a uniquely branded directory — may actually benefit you more.

Think of your directory like a microsite: a small collection of pages meant to engage user interaction in a creative way.

Microsites are designed to target specific groups of users, they usually have a single focus, and they often portray a brand in a new way. And that’s exactly what you want your directory to do.

By treating your directory like its own site, even when it isn’t, you’ll retain all the benefits of a microsite without actually having to build one: a boost in SEO, a chance to match your brand to your audience, a way to grab attention, and a way to set yourself apart from similar directories.

Need some inspiration? Check out our list of 13 Beautifully Designed Directories

Use Design Best-Practices

Here are a few things to keep in mind to make sure your directory gets the attention it deserves:

Use whitespace. As we mentioned at the beginning of this post, whitespace is an important part of your design. It instantly makes your site feel more professional, so make sure you’re not jamming content and images together just to fit it all in. Save room for whitespace.

Use high-quality photos. Again, avoid stock photos if you can, but if you use them, make sure they’re good ones. Remember: bad photos are bad for business.

Use a good color palette. Color communicates certain messages to your visitors. Whether or not you decide to brand your directory differently from the rest of your site, have some contrasting colors in mind to help offset your content, and choose colors that reflect your ideal customer (blue for business, green for earth-friendly, etc.).

Use visual cues. If you’re segmenting your directory into paid and free listings, use visual cues to separate your top-priority listings from the rest of the rabble. Whether it’s a star near the post, or a line that separates paid from free, use visual indicators to help visitors distinguish the two.

Use large text and navigation. Since everything is moving to mobile, screens are getting smaller, which means that small text will be harder to read. The larger you can make your fonts and your navigation buttons (this includes your search bar), the better your directory will be for mobile users.

Use a mobile-friendly design. Of course, you should be using a mobile-friendly (responsive) design for your site as a whole, but this goes double for your directory. If you’re using a WordPress plugin to manage your directory, you shouldn’t have a problem. If not, then you should make sure your directory is fully accessible on mobile devices.