chevron-down Created with Sketch Beta.
Vol. 42, No. 4

Mobile first, heat maps, custom visuals, and improved layouts: Great website tips from the 2018 NABE Midyear Meeting

by Alexa Giacomini

Your bar’s website is your most powerful tool to communicate with your membership (and beyond). For many members, it’s their first and only interaction with your organization—so, it had better be a good experience.

Where should you begin when seeking to improve your website’s look and usability?

Start by stealing (borrowing) from other bars whose websites have been recently updated with the latest and greatest. During a program at the 2018 Midyear Meeting of the National Association of Bar Executives, the following panelists shared their best tips: Erik Mazzone, senior director, membership experience, North Carolina Bar Association; Zoe Linza, executive director, Bar Association of Metropolitan St. Louis; and Jim Calloway, Management Assistance Program director, Oklahoma Bar Association. Below are four key takeaways from the panel discussion, which was moderated by Crista Hogan, executive director of the Springfield (Mo.) Metropolitan Bar Association.

1. Plan for mobile first

With 52 percent of users now using mobile interfaces compared with 48 percent using desktop, your next website redesign should start with building out the mobile version first. Important considerations include making sure everything reads well on a small, vertical-oriented screen, using “MORE” buttons for expanding content, and paring down copy so that pages don’t drag on endlessly. Do what you can to help your visitors prevent “text claw”—an unofficial medical condition that involves hand and wrist pain from too much scrolling and other repetitive motions while using a mobile device.

2. Customize your visuals

The visuals on your website should tell your bar and members’ story. Spending the time and resources needed to customize and improve their appeal will transform your site from something that looks like an off-the-shelf template to a site that speaks to your audience. This translates into using professionally taken photos of your members and events instead of stock artwork, and having a graphic designer personalize any icons to your bar’s products and services.     

3. Improve your layout

From featuring important calls to action at the top to factoring in plenty of white space, there are numerous best practices you can adopt to upgrade the functionality of your website. For example, get rid of side navigation panels; instead, design for the full width of your page. Increase the size of icons, fonts, and buttons to make it easier for the aging population to read. Make sure phone numbers are clickable—remember, mobile first! Decrease the amount of screen space given to big visuals. Focus on developing a homepage that is more nimble so that you can feature urgent items when needed. When displaying a slideshow at the top (and the panel was split on whether slideshows are still effective), offer a way for viewers to manually scroll through multiple items. Finally, let your page (and viewers) breathe: Practice restraint when it comes to use of colors, fonts, copy, and graphics.

4. Use heat maps

If there was one idea that attendees were buzzing about after the program, this was it. Heat maps—a software tool—offer you a graphical look at where your members are hovering and clicking on your website. By viewing your website this way, you can determine how visitors are interacting with your website and where you can place things that need higher visibility (hello, “renew” message).

Heat maps were such a hot topic, in fact, that I asked Erik Mazzone to tell me more about them, after the program. Here’s what he said:

“Heat maps give you a graphical look at how people are using your website in real time, overlaying data on top of your webpage. The pieces that are getting the most traffic show up in red, like a weather map.

“This data gives you another way of looking at the user story. Generally speaking, the stuff up top [on your website] is always hotter; content on the left side of your page gets more attention than content on the right side—that’s the way people look at webpages.

“All of this allows you to start figuring out what you want to put where. For example, if I shrink my hero image, does that get more people to use the tool under it? Using the data from heat maps, you can figure out how to shine a brighter light on things you want viewers to pay more attention to.”

Want to learn more?

Be sure to check out the program handout to view the presenters’ list of best bar websites—covering state bars, large metro bars, and small county bars—along with their thoughts about what makes each a standout.

Need more information about heat maps? You’ll find it in this article on 19 Things We Can Learn from Numerous Heat Map Tests.

Alexa Giacomini

Alexa Giacomini, CAE, is director of membership & marketing at the Illinois State Bar Association.