8 things to learn about graphic + web design from TractorSupply.com

Web Design Professional Clinic: Tractor Supply

According to Alexa, Tractorsupply.com is ranked #2449 in the U.S. and 13,989 globally. The site has a bounce rate of just under 24%, gets 5.09 page views per visitor who spend an average of 4:27 minutes on the site. Their brand positioning “For Life Out Here” is a catchy way to suggest that the site is for people who spend time outdoors and that the brand works outdoors with you.

There are several things we can learn about graphic + web design from TractorSupply.com

1. Placing Your Lead Offer “Center Stage” Attracts Attention

vortex-graphic-web-design-miami-tips-8

Above: 1. TractorSupply.com Home Page

TractorSupply.com is an ecommerce site that focuses on offering a wide variety of farm and rural lifestyle products nationwide. The site regularly places promotions in the “above the fold” area of the home page. This is an effective creative strategy because there’s no way a visitor will miss the deals and featured items of the day. Right below the featured promotion on the home page are secondary promotion areas that showcase specific online store categories and “popular” items. “popular items” attempts to leverage “mine is better than yours” mentality and will help motivate consumers to drill down into that specific content. TractorSupply.com’s use of a full width graphic banner helps provide hierarchy and hold together the four different offers in an orderly way. To help differentiate each offer, the language is handled differently.

TIP: Place your most valuable offer up front on the home page. If you’ve got more than one, use a graphic “wrapper” to hold everything together in an orderly way so one promotion will not fight another. Differentiate between offers by carefully selecting the appropriate language.

2. Visual Metaphors Are Effective When Used Judiciously

vortex-graphic-web-design-miami-tips-7

Their website design has a decidedly country western feel which fits with its intended audience. A simple product grid design sits on top of a background pattern of white-washed exterior wood. Tool imagery, historic wood type flourishes and layered border treatments make an otherwise spartan layout feel warm and friendly. The choice of a white wood background helps deliver a very clean overall appearance.

TIP: Use website + graphic design to create a unique user interface that captures the essence of your brand. The essence is what both you, your prospects and customers believe it is. If you’re not sure how your customers view your brand, research buyer personas.

3. White Space Is Premium Space, Take Advantage Of It

The website design’s use of white space in the visual product grid is well-balanced. Photography is clear, well-lit, sharp. Items are separated from one another with a subtle border and shadow treatment. On the home page the borders do not fully enclose the product category containers which helps keep the focus on the subheads, objects and the “Shop Now” links. There is good contrast between the category title and description which makes it easy to find what you are looking for.

The product grid takes up about 80% of the site’s width and the background uses the remaining area. While the background gives the site its unique character, less background might allow for more categories, larger images or related content without sacrificing the overall look of the site.

TIP: Use white space to focus attention on content. If you have a background layer on your website, evaluate whether the left and right space in the background could be used more effectively.

4. Alphabetical Navigation Order Can Enhance Search Experience

vortex-graphic-web-design-miami-tips-11

Above: TractorSupply.com alphabetical navbar

TractorSupply.com organizes their main nav bar alphabetically. This makes sense given the wide range of goods they offer. Once you mouse-over a particular link, the sub-nave presents the visitor with a four-column layout which is organized by brand, sub categories, helpful tips or an offer. Given the amount of products offered by the online merchant, a larger sub nav to help visitors find what they want makes a great deal of sense. The alphabetical organization makes it easier to scan for products than if they were arranged differently.

TIP: Consider using larger sub-menus when you need to call attention to content without making it a main design feature of the page. If you have a large product offering, consider alphabetical and other ways of sorting content that are friendly to the way your customer likes to search.

5. Be wary of blank content areas

vortex-graphic-web-design-miami-tips-13

Above: TractorSupply.com Product specific page

In the case of TractorSupply.com. once you locate a specific product, you’ll find the usual sorts of information such as sku, brief description, specifications and reviews. Along the right hand side of the page are related products that “customers also viewed” and additional offers. On the pages I viewed, this sidebar column usually ran deeper than the specific product page content, and so there was a lot of white space that made it appear that something may be missing. The amount of content in the review, specification or description tabs affects whether the page looks correct or not.

TIP: Consider how your content flows and fills your web pages. If your page depth is deeper due content on one tab or a sidebar, consider adding useful content to fill other tabs or page areas to ensure every element looks in balance.

6. Giving Content Context Can Increase Sales

vortex-graphic-web-design-miami-tips-14

Inbound marketing experts often say that Amazon.com turned context marketing into a science. Much like ordering accessories, the idea is that other customers may have found something on the site that you should also consider. Providing “customers also viewed” content in this contextual way is very effective for two reasons. First, TractorSupply.com prospects are pre-disposed to a category of products and showing related products is likely to engage them. Second, tracking shopping behavior allows new visitors to benefit by the efforts of previous shoppers.

The implementation adds value to search efforts for the customer, and the retailer who can showcase more products front & center.

TIP: Consider implementing programming that tracks visitors while on your site, and allows you to leverage the data in order to share related content with other customers looking for similar merchandise. Shoppers tend to explore these links, and add additional products to their cart purchases.

7. Keep Valuable Content Near Ordering Information

TractorSupply.com uses a familiar tab setup to provide additional product information without the visitor having to navigate away from the product specific page. They also allow you to zoom in for a closer look in high resolution and also read reviews while you consider your purchase. They also conveniently placed a sizing chart link, product ratings, color selection and quantity shopping tools. The design and presentation of content in the shopping cart is intuitive and helpful.

TIP: If you’re running an online store, be sure to include the information a visitor needs to make the decision without having to navigate away from the ordering page. Not all products need to be shown in high resolution. In some cases, sharing high resolution imagery of the product can enhance the customer experience and allow potential buyers to feel more comfortable with their purchase decisions. The more comfortable the buyer is, the more likely they are to come back.

8. Clearly separate sales promotion from helpful tips and advice

vortex-graphic-web-design-miami-tips-2

TractorSupply.com’s help section is cleverly titled “know-how”. It’s a more down-to-earth way of saying “help”. When you first land on the page, you’ll notice numerous featured articles on farming, animal care and home maintenance. Most of these articles are informational only and do not directly sell a product. This non-selling approach creates brand trust and loyalty. The buying guides TractorSupply.com has created follow the same pattern.

Towards the bottom of the know-how page, the information presentation shifts to a grid approach, and when you drill-down into those sections you begin to find helpful advice bordered by soft-selling “shop now” banners. TractorSupply.com effectively presents helpful tips without pushing particular products. If a visitor happens to be in the market for a product related to the tip, they can navigate to that section easily. This approach keeps visitors coming back and the brand fills the role of “trusted advisor”. When your brand is looked at by your audiences as a trusted advisor, price is no longer the main issue. When price is no longer the main issue, you are on your way to becoming increasingly competitive.

TIP: Taking time to develop non sales-oriented helpful tips and advice builds brand loyalty and repeat visitors. If you choose to feature products or services near helpful content, present it in a less promotional as a way to build trust.

Next Steps:

Perform your own design audits of high-ranking websites. See if you can apply the same effective techniques and approaches to your own website + interface design work.

When you’re ready to embark on an online design (or redesign) project, make sure you understand the brand’s buyer personas. When your brand online content and design aligns with accurate buyer persona data, you’ll be on your way to improving your site ranking and other important analytics data that translates to achieving business goals.

Need Help Planning Your Creative Strategy or User Interface Design?

Search for a web + graphic design firm who can assist you with the process. One important factor in the selection process should be whether a creative firm can articulate your product’s key advantages from the customer’s point of view. A demonstration of creative is not as important as being able to interpret your input and translate it into a clear statement of strategy, communication goals, and key performance indicators.

*© 2014 Tractor Supply Co. † As of 10.12.14
About the author: Tom Weinkle is a founder and partner of Vortex Communications, a graphic and website design firm who offers graphic and WordPress web design, build, troubleshooting and training services along with search optimization, social media and inbound marketing services. Based in Miami, Florida, Tom has over 25 years of experience in visual communications for the healthcare, medical, law, accounting, software, financial services and banking industries.

Scroll to Top