Site Design & Visitor Experience

Site Design & Visitor Experience

What do visitors expect when they come to your site? What do you want them to do while they’re there? And how can you meld those two desires into a great experience for you and your visitors? Those questions need be answered very carefully when considering the right design and layout for your site, because it means the difference between an okay or poor visitor experience resulting in a hasty exit to find what they really wanted, and a great experience where visitors stick around, consume your content, and exit in a way that is positive and results in cash in your bank.

In this post I want to talk about how I’m designing KayaKaroo.com, and why I’m making specific layout and design decisions. Let me be clear that I am not a visual artist or natural designer. While I often find that limiting, it also leads me to a minimalist approach to new web projects: I don’t use a lot of visual stimulation, flashy graphics or transitions, or fancy color specifications. In many ways I think that’s a good thing because it helps me focus on layout and content, which I think are infinitely more important. Visitors might appreciate a nice-looking website, but they’ll definitely appreciate a useful website.

Purpose

Kayakaroo’s purpose is to drive visitors to Amazon to make a purchase, thereby earning affiliate commissions. To that end, my goal is to provide visitors with with useful product images, reviews, and easy clickable links to Amazon. I want emphasis to be on the affiliate links, whether they are buttons, images, or text links. Ideally, the rest of the content will provide a more gentle background to the links.

How it’s Built

I’m using WordPress to build the site, with a child theme based on WordPress’s own Twenty Twelve theme (the same theme I’ve used for this blog). This is a simple and stable theme with nice topography and good documentation, which makes it easy to edit and manipulate for my own uses.  Twenty Twelve is responsive, so it looks good and performs well on phones and other mobile devices.

WordPress's Twenty Twelve theme

WordPress’s Twenty Twelve theme

One advantage of using WordPress in general are the number of plugins that allow me to add functionality to my site without having to code everything myself. I’m not the greatest coder yet, and using WordPress lets me move quickly.

Colors

The body of the site is white on a background repeating with gray wavy lines, giving the impression of water. The primary text color of the content is black. Most clickable items such as text links and buttons are a gentle blue that is also reminiscent of water and stands out from the white background and black text. The site logo features a solid black silhouette of a kayaker on water, and the logo turns the same blue color when the mouse is hovered over it. I think this transition is a nice design element that adds a little charm to the site but is still subdued.

Header

My header is simple, with the site title, solid black site logo, and tagline all centered. Again, the logo has a color change effect on hover. This required a bit of change to the HTML and CSS in the header, but I think the effect is refined without being overpowering.

Regular logo vs logo on mouse hover.

Regular logo vs logo on mouse hover.

Site Navigation

The primary navigation links are underneath the header. This is a common practice with most websites, and something I saw frequently when reviewing sites with similar models to Kayakaroo. I consider this spot to be prime real estate when it comes to page content, so I want the links to be as relevant and helpful to the visitors as possible. Therefore, I’m including only links to product review pages and probably links to Kayakaroo’s “Home” and “About Us” pages.

Along with a copyright notice and quick blurb about the Amazon Associate Program, the site footer contains links to “Home,” & “About,” but also has links to “Contact Us” and “Privacy Policy,” which are less important but still available for visitors if they need them.

I will not be including sidebar navigation on any pages of the site. Although I used to think this was important, I now believe that it takes away from the content and is not necessary. I’d like the content area to have the reader’s full attention and only direct them to affiliate links or possible internal links to other reviews. But superfluous site pages that don’t contribute to the affiliate funnel will not show up in those areas.

To make it easy for visitors to get back to the main navigation during a long piece of content, I’ve installed a plugin that floats a “return to top” button in the lower right corner of the screen. I considered fixing the entire header or just the menu to the top of the screen during scrolling, but that will require some additional coding which I haven’t been able to figure out yet.

Content

Since my pages will be full width with no sidebar, I’ve got plenty of room to showcase products. I’ve installed a free plugin called Shortcodes Ultimate, which I really, really like. It provides tons of very nice ways to structure and add content to the page, including tabs, light boxes, buttons and so many more.

Options provided by Shortcode Ultimate plugin.

Options provided by Shortcodes Ultimate plugin.

While I haven’t determined specifics yet, I’ll be using some of these shortcodes to structure my content. One idea for reviews is to first include my written content, and then use Shortcodes Ultimate plugin to add three columns to compare three products side by side. I might use the image slider to show nice images of the items, and the quote shortcode to include quotes from Amazon reviews of those products. I’ll definitely use the button shortcode to create a nice, attractive affiliate link that calls to be clicked.

Content area example

What my content areas might look like.

General Site Structure

My home page will be a gallery of images with captions linking to my main (tier 1, or hub) pages. I’ll use Shortcodes Ultimate to create this gallery. The home page will not contain any affiliate links, but will only serve to link deeper into the site. I will have hub pages for each product category, including kayaks, transport systems, storage, paddles, safety gear, and accessories.

The 1st tier hub pages will do three things:

  • Provide quick reviews and comparisons of the most popular products in those categories.
  • Encourage visitors to click out to Amazon for more information or to purchase each product.
  • Link to deeper pages on the site that give more in-depth reviews of individual products.
KayaKaroo.com site map showing general structure and link flow.

KayaKaroo.com site map showing general structure and link flow. Note there will be multiple tier 1 pages that each link to their own product pages.

I think it’s important to introduce affiliate links as often as possibly, while still giving enough valuable content that visitors feel the site is providing a decent service. This can be a tough balance to achieve because, although we want to earn commissions from our affiliate links, we also want to create a brand that people respect and trust, and not a sleazy or salesey site that turns visitors off.  So I’ll experiment with where and how I’ll place affiliate links to make them prominent yet tasteful.

Wrap-up

I’m excited about the way KayaKaroo is coming together so far. I think there’s an opportunity to turn it into a valuable web property. At the same time, I realize this is another experiment and there’s really no way to know for sure if it will pay off financially. As an educational project, however, it’s already proven to be a great success.

Save

Leave a Reply

Your email address will not be published. Required fields are marked *