Case Study: Designing For Usability & SEO

Recommended: Click here to open the site in a separate tab for easy reference while following this case study.

This is a site that I designed for the specific purpose of promoting my jazz bands to potential clients via the search engines. It is not only a good example of my web design skills (it won the design honor of “Site of the Day” from Adobe), and of my UX and UI skills (UX stands for “user experience,” UI for “user interface”; I prefer to combine both of these concepts under the simpler concept of “usability”), but also of my ability to integrate SEO (search engine optimization) directly into the structure and content of a website, something that very few designers know how to do, and tend to do barely, if at all. (You can see screenshots of my site’s ranking in the organic results for all relevant search terms here.) Of course, these are equally important goals, but the implementation of these goals can lead to conflicts that makes them extremely difficult to achieve simultaneously. Here‘s how I did it.

Usability & SEO: The Home Page.

Being both the designer of the site and my own client meant that I had an in-depth understanding of the market I was selling to, which specialized knowledge guided my choices throughout throughout the design process. Specifically, I know that jazz bands are typically employed in four distinctly different markets, but that the customers from these markets would probably search for a jazz band by using very general search terms such as "jazz band NYC" without including any specific qualifiers related to their market.

Hence the opening screen of the home page is designed to encourage each visitor to instantly and easily self-identify their market and go straight to a page with specialized information relevant to that market.

Had I stopped at this stage of designing the home page and left only the opening screen, it would have been a paradigm of simplicity, clarity, and usability. Unfortunately, however, had I stopped here, search engines would have penalized me in their search results for what they term “thin content.” The idea here is that search engines assume that providing few words rather than many words means that you are failing to provide visitors with the information that they are seeking when they come to your site. Also, and entirely apart from this consideration, search engines themselves depend on words, and generally speaking, the more the better, for their identification of what your site is about. So even though adding additional content to this particular home page’s design would decrease its usability, for the sake of optimizing it to be found on the search engines I nevertheless had to supply more content.

This, of course, created a conflict of goals. I want the users to leave the home page as soon as possible in order to go to the pages with specific information targeted to their market that is more likely to covert them into customers; however, I want these users to be able to locate my site by means of the search engines. So I needed to structure the page in such a way as to encourage readers to click through upon landing, while at the same time providing additional content that would still provide value for those who don’t click through, and that would provide keywords and context for search engines.

My first step in achieving these at-odds goals was to make the content I supplied on the very next screen a more detailed version of the opening screen, which would be useful to any visitors who needing more context, and at the same time, still directs them to the pages designed especially for their market.

Next is some generalized advice on how to hire a jazz band, followed three of my band’s strongest videos and the two best reviews we’ve ever received (with links to specialized videos and review pages), which also provides valuable content to both users and search engines. Then, to give search engines a word-feast, an optional dropdown follows that is packed with hundreds of keyword-rich compliments received by email from previous clients. (To see this, click on the text “Click here for many more reviews.”) Then, for a final pass at my original goal, this is followed by a miniaturized version of the opening screen repeated at the bottom of the page, to create a final incentive for users to click through to the appropriate specialized pages.

The result: while the vast majority of visitors—90% or so—click through to pages specially created to cater to their specific market by the time they reach the second screen, after adding the additional content my SEO dramatically and instantly improved so much that the number of monthly visitors reaching me from organic search engines searches actually doubled.

Thus, both objectives, usability and SEO, were met with success.

The Four Market-Focused Pages Linked From The Home Page

As discussed previously, the essential goal of my homepage is to get the visitor over to a specialized page with information relevant to his market. The structure of the initial content of each of these four pages is the same: a heading followed by a paragraph of information, followed by a group of videos presenting the music of a particular band that is well-suited to their market, followed by a group of keyword-rich rotating quotes from previous customers from their same market. This sequence—info, videos, reviews—then repeats several times, with additional information, additional videos, and additional rotating quotes. From a usability standpoint, the repetition of similar elements aides in the comprehension of the page structure. And the fact that this results in a huge quantity of customer quotes on each page—more than anyone would have time to read— is actually a feature rather than a bug: in terms of usability it serves the purpose of conveying the sheer quantity of positive experiences past customers have had, whether or not the particular comments are read, and because it is in the form of a rotator, it takes up minimal space, yet in terms of SEO, it provides natural, keyword-rich text for the search engines.

Once the middle of these pages is reached, a new section begins with photos and descriptions of performances for previous clients. From a usability standpoint this provides useful information; it shows what types of clients have hired us in the past, what venues we have performed in, and what our performances for these clients in these venues have looked like. And from an SEO standpoint, there is more keyword-rich text, and constantly refreshed content as I constantly add more prestigious and/or recent performances to replace less prestigious and/or older performances. (Search engines love fresh content.)

Of course, we can‘t neglect calls-to-action and the final goal of converting visitors into customers; thus, at the top right of every interior page is a stationary call-to-action to fill out a webform, placed inside an attention-grabbing, yet aesthetically appealing, red button, and at the very bottom of each of the four specialty market pages, a duplicate copy of the same contact form as a final, direct call-to-action.

Thus, for visitors, each of these pages is loaded with information that is targeted, relevant, and presented in a clear, consistent manner. And for search engines it is loaded with quality content laden with relevant keywords.

Objectives met.

The Remaining Pages

Finally, I added several more pages for anyone wanting or needing even more information. These include a detailed FAQ page; a page featuring all of the videos of all of the bands offered, arranged by lead instrument; a blog filled with photos and descriptions of past performances; a page devoted to the bandleader (myself) and his background; a page with all of our unedited third-party-verified reviews; and a Terms and Conditions page with information detailing our cancellation and privacy policies. That last was included as much for search engines as for visitors (having a Terms and Conditions page with explicit cancellation and privacy policies is treated by search engines as a positive ranking signal).

Solving Potential Duplicate Content Issues

Search engines do not like finding duplicate content on more than one page on one or more sites. On this site, there is duplicate content (of past performances) between the four market-focused pages and the blog featuring past performances. I solved this potential conflict my adding code indicating to the search engines not to show the blog page in the search results.

Similarly, there is duplicate content between the “Click here for more reviews” dropdown, the reviews page, and the rotating customer quotes. The potential SEO issues here were solved by cutting small fragments out of the longer reviews for the rotating quotes, and sequencing them by length rather than by date. (So far as a potential usability issue with repetitive content, there is none since few visitors actually take the time to view the content of the dropdown, and, likewise, few take the time to read the rotating quotes (and even fewer of these would be the same individuals).

Testing And Confirming Usability

No matter how intelligent and informed a designer is, achieving usability always requires extensive user testing. That is why throughout the design and development process I viewed daily screen recordings of the visitors to the website (using the Hotjar service). In addition, since a lot of my work was done in coffee shops, I bought many cups of cappuccino for my neighbors in exchange for their visiting the website and thinking aloud for me. The feedback from these users was invaluable as I continually adjusted and refined design of my site to maximize its clarity and usefulness to potential clients.

The Result

An award-winning design that provides targeted information that can be gleaned quickly, a comprehensive amount of further information when desired, and that is consistently among the first three results on page one of the search engines for all relevant search terms.