Give your customers what they expect, when it comes to making their way around your website. With so many online shopping options, customers don’t have to put up with confusing navigation or unintuitive shopping carts. Make sure you’re guiding your customer in the right direction and not causing them to leave your site.

“What does color have to do with it? Everything.”

Some of the most successful retailers use color to help guide their customers through their site. Where do you want your customer to look when they are ready to checkout? Make sure they are looking in the right place by adding color in the correct places. Using colored buttons and contrasting colors in your website’s navigation can dramatically help your user’s customer experience. The same way aisle signs and section banners in a retail store guide customers.

Using Color to Guide Your Customers

Let’s take a look at some examples of how color is used by some of the most successful online retailers on the market today.

Amazon Usability & Color

Amazon, known for their incredibly smart and user friendly shopping experience, uses different colors to gauge the importance of their buttons. As you can see both add to cart buttons are designed to appear brighter and more saturated in color than the add to wish list and baby registry buttons right below. Also notice the blue coloring behind this extremely important panel of options. Not only do the buttons guide the eye in this area because of their contrasting colors, but the blue background helps to break-up the white space and pull the customer’s eye to the right as well.

You’ll also notice in the upper left-hand corner, shop all departments is given a bright orange color. When on any other page besides their homepage, the navigation collapses to make way for a more narrowed list of search results, based on the section of the store you’ve chosen. Amazon wants to make sure their customers are aware that their main shopping categories are still available and easily found when collapsed.

Cafe Press Usability & Color

Cafe Press does an excellent job utilizing color where they want their customers to take action. With a minimalist design style, the other, less important links are presented in subdued colors allowing for less confusion and overwhelming feelings from visitors.

Buy.com Usability & Color

Buy.com follows suit with Cafe Press and allows their products to stand out on their own with a minimalist style of design. Again, green is used for the most important elements on the page. If you look at the print this page, email a friend and add to wishlist buttons, they are a lighter shade of blue and less saturated than the add to cart button above. Usability design is extremely important when it comes to getting a customer to checkout. Your customer should have no problem finding their shopping cart and adding an item to it.

“If the checkout buttons are not visible to the shoppers or they do not stand out in some way from the rest of the page, you will have a difficult time converting many of your shoppers to buyers.”

-eCommerce Optimization

L.L. Bean Signature Usability & Color

L.L. Bean Signature Usability & Color

The L.L. Bean Signature site has an excellent overall design. They use the color orange to showcase when their customer’s should make an action. In the examples above, It is important to keep the color consistent throughout the site as customers will eventually become accustomed to orange and what the color is associated with.

The North Face Usability & Color

Navigating through the North Face website is like riding a bike with training wheels. There are always three ways to know what page you’re on, made apparent by the color red, large fonts and the use of effective bulleting and overly large bread crumbs. Similar to the other examples, only one color is used to represent the shopping cart related actions.

Eddie Bauer Usability Design

Eddie Bauer (above) and First Ascent (below) use color to highlight the background of the active page the user is on. Eddie Bauer also is using color to highlight the active page in yellow. The more consistent you can be with your color choices, the easier it will be for your customer to shop!

First Ascent Usability & Color

Usability Takeaways

• Always give your customers a clear indication of where they are on your website. Color is a great way to do this.

• Make sure there is some differentiation between common buttons and buttons that have specific actions (IE. shopping cart functions).

• Choose one color to use to assist in guiding your customer. This way they know what to expect.

• Use more than one option to show your customer where they are (IE. breadcrumbs, color highlighting and large title headers)

Design Usability Resources

• 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
• 10 Useful Usability Findings and Guidelines

There is only one key ingredient in any design that will hold it together, make it rise and make it deliver what it is supposed to. Whether the design is for the web, a book cover or a simple business card, there is one piece to the puzzle that must be present for the design to be successful. What is it you ask?

When reading through the many design blogs and books out there today, you’ll find showcases of beautiful designs, tutorials on how to make or use a specific design program, what certain colors mean and where they should be used and many more things. But no matter how much you learn, there is still only one element that truly matters. Designers must ask themselves one question:

Is the design appropriate for the target customer?

The website or brochure may be designed with the most stunning colors, stylish fonts, and newest trends. But this doesn’t mean it’s great design or appropriate for your viewers. There are certain trends that are age, industry and location appropriate. Simply because you are utilizing them doesn’t mean the design will be successful.

What to Consider When Designing for a Specific Target Market

How will the product or service improve the customer’s life?

Whether you’re selling food, a new tie or a trip to Europe you have to showcase the reasons to why the customer would want any of these items. You’re not going to reach the customer by relying on a slick navigation, pretty pictures and an easy to use shopping cart. There needs to be a clear reason why they need or will benefit from the product or service. Design is a great way to guide the customer through the reasons why, in a particular order or way.

Product Example

Photo by Aaron Alexander

Say for example your selling a new tie. Why would someone want to purchase that specific tie over another? Maybe you’re showing imagery of a man wearing the tie on his wedding day. So what? That man looks great in that tie, but so does every other man that happens to be photographed with a fancy tie. What makes this tie any better?

Maybe the tie is made of special material that is meant to feel comfortable and breathable during high-stress occasions like a wedding. A good way to connect with the customer through the design knowing this detail is by increasing the size of the text and overlay it onto the photograph. Not only will the “pretty” photograph pull your customer’s attention into the page, but the large text with the tie’s fabric benefits will give the customer a reason to buy that tie over another. Highlighting specific details can really improve a designs overall success rate. And yes, it can be as simple as pulling out a product detail that already exists.

The key with products are to avoid leaving beneficial details to waste. Bring out the little details, especially when you’re selling something as common as a tie. Once your able to focus in on the benefits, use colors and other design elements to bring the viewers eye even more towards these little details.

Service Example

Photo by Alberto P Veiga

In this example, let’s say a travel company’s website is selling a trip to Europe. The client wants to push the ultimate travel package versus the basic travel package. How will the design help sell more ultimate packages for this client? A solution for this scenario could be to compare each package side-by-side without price involved, graphically. Highlight the ultimate package and the details that would make that choice better than the others. Show a video/written testimonial of a customer who has chosen this package in the past and why they liked it. Customer reviews are proven to be more beneficial and trusted by viewers than company recommendations alone.

Customer Review Focus

Customer reviews are becoming more and more common to online businesses. As a business owner, you should be aware of Google’s SideWiki. It allows customers to write their own reviews on any website and publish it. When another customer visits the website with a SideWiki, they can then see those reviews made by other visitors on the SideWiki. The power is in the customer’s hands. This technology may not be utilized by very many customers today, but it is important to be on the lookout for similar releases & technologies that will give customers the upper-hand on your websites. The last thing you want is a customer complaint shown to all your potential customers.

Checkout this useful article reviewing the SideWiki:

Google’s SideWiki Shifts Power To Consumers –Away From Corporate Websites

The target market in this travel example is likely a customer that has a mid to high income level and could afford a premium travel package. If the targeted customer was of a lower income bracket, the design would be entirely different. Maybe the company would be trying to sell travel packages during a non-peak season to Europe. You might highlight the discounted price with a sale burst or a bolded tag-line saying “Now you can visit Europe too, for half the price.” Instead of comparing special vacation packages, you are emphasizing with the design the urgency of traveling now and the benefit of saving money and being able to afford a trip.

The key is to pull out the details that are most important to highlight within the design. This takes both efforts of the designer and the business owner/project manager.

Tip for Designers: Most clients aren’t going to offer up all the details you need to know to target their specific market. Chances are you’re going to have to dig deep and ask! Your clients are the experts of their market. Is the business a start-up? Maybe you can do some research as well to help your client pull out essential details they might be missing. Show them you want the design to help improve their business.

Tip for Business Owners: To end up with a successful design for whatever you happen to be selling or showcasing, it is important to open up communication as much as possible with your designer. Make sure they know your end goals and your target market. Also make sure to give them the details you want to highlight or what is most important about your promoted products and/or services. Not sure what else to prepare? Read ” What to Prepare Before Hiring a Web Designer“.

Share your Expertise…

Designers: In what ways have you used design to successfully target a specific market?

Business Owners: How has design help to improve your business? What reports or analysis have you put in place to track the success of the design on your website? (if applicable)

A style guide is a document which includes different formatting guidelines for basically anything that a company would have designed. Style guides are very important when it comes to branding. They help to keep all styling consistent across multiple mediums. If you are a designer, consider creating a style guide for your client’s next website and/or printed line. If they request more work from you in the future, you will have a quick reference guide at your fingertips. Style guides are especially useful for large websites. I currently work with 9 e-commerce websites each with a different look & feel. So, to make things a bit easier on our creative team, they each have a style guide.

Without a style guide, keeping track of fonts, colors, and other styling would be quite the task.

What to Include in a Style Guide

Table of Contents

Having a clear organization system with your style guide is important. One of the reasons to have a guide in the first place is to use your time or your designer’s time more effectively. Make sure key elements are easy to find or placed within a logical section. Many designers don’t give enough attention to style guides when they should. Treat it as you would any other part of the project.

Design Concepts

Many designers forget to include their purpose of design in a style guide. I find it helpful when working on a re-design when I can understand the previous designer’s thoughts and reasons for why they designed elements the way they did. Again, a very helpful include for in-house design teams. Sometimes this information can be its own guide, separate from specific styling. Or, if multiple mediums are used, it can be inserted at the beginning of each guide.

Typography
List all fonts used and each style of that font as well. This includes bold, italic, regular etc. When you have large amounts of body text, include line-height as well, especially if it varies in different areas. Also include which sizes are used in which particular area. It is helpful to show visuals of different web pages (or other medium) that have different styling applied to the typography. Take screen shots to include in your style guide with clear identifications of which area has each particular styling rule applied to it. This will make it easier and more efficient for designers to make changes and skip any guesswork.

For example:

A. Gills Sans MT – 15 pt. Regular Strong | Color: White #FFFFFF | Kerning: 0

B. Gills Sans MT – 30 pt. Regular Strong  | Color: Historic Brown #5b371c | Kerning: 0

C. Gills Sans MT – 14 pt. Regular Strong | Color: Historic Brown #5b371c | Kerning:0 | Line-height: 18

Color
To keep colors consistent across all design pieces, it is best to include all color codes that can be used. Include color swatches with the corresponding pantone or web color codes. Be as specific as possible and keep naming conventions consistent when referencing them in any company guides.

Imagery Restrictions/Preferences

Is there certain imagery that cannot be included in a designed piece from “company”? Make sure and be specific! Is the company’s design only illustration based? If so, include artists contact information if an outside source is used or multiple preferences of artists that are allowed to be contacted for freelance projects.

Logo Usage

Be clear on how you would like your company’s mark to be displayed. If you don’t want to see drop shadows, outer glows, or reflections applied to your logo, say so. Also, some logos have a specific tilt or angle to them. If you don’t want it rotated, specify this in your style guide to avoid any questions.

Paper Preference

It is likely that over the years a paper stock might go off the market, but it is important to specify which stock, weight and company you prefer per printed piece. This can be done by type of printed piece, such as direct mail, books, brochures etc. When indicating these choices for books, make sure and list the cover stock & interior pages. Remember, be as detailed as possible & don’t leave anything out.

Have some fun!

There’s a good chance that a style guide is a very technical document. If given the opportunity, show off your design skills with a style guide. Experiment with a unique layout that will keep the user’s attention and highlight essential and important elements you don’t want to be missed. Try playing around with some silly quotes or fun design elements. A technical document doesn’t have to look and feel technical! Apply your design magic!

Take a look at other key ingredients for any successful website.

Keeping your in-house designers happy is crucial to productivity and your company’s success. Here are a few ways you can keep us happy!

1-Office Space

Designers are creative people naturally and sometimes a cubical or white walled office doesn’t promote creative thinking. Many corporate settings have standards that everyone must live with, but to encourage creativity, this isn’t the best approach for your creative team’s environment.

Consider allowing them to customize their space or at least add a splash of color to the walls.

2-Farm from within

Many companies who do have an in-house design team, generally still farm out some of their best projects. We all know there isn’t enough time in the day for all the projects that get sent our way. But, just because we aren’t at a design agency, doesn’t mean we aren’t capable or deserving of a engaging design project. Take a chance with your design team and show them you respect their work and capabilities. You might be presently surprised at the talent that lies just down the hall.

3-Be Inquisitive

Show your designers that you care and are generally interested in their design processes. The only way you’re going to connect with a creative team is if you know what’s required for them to complete a request from you. Too often management has no idea what goes into a promotion, booklet, website, ect. It isn’t as simple as an instant, microwavable dinner is to cook up! Great work takes planning from both sides, sketching, designer collaboration as well as research. One of my pet peeves as an in-house designer is when I hear, “Just make it pretty”. The purpose of design isn’t just a pretty face. Sure, we want to engage our audiences, but it needs to be appropriate for them, say exactly what it needs to say and be readable, as well as bring out some emotion to connect with the reader. If they can’t relate to what we put out, it is a wasted effort.

4-Time & Time Again

Going along with being inquisitive, many folks don’t have a clue how much time it takes to perform design related tasks. Stop by your creative team’s office and take a peek over their shoulder for a little while. Ask them questions about what they are doing and see how long it takes them to make a few changes. This will in turn make you and your designers happy when you realize quality work doesn’t happen in a flash. Planning and organization of projects before they land in our laps is very crucial to the timeliness of design completion as well. We understand changes are going to happen throughout the process. That is why its a “process”. But, don’t expect us to meet design studio quality when you throw an entire page worth of text out of door last minute or change an entire promotion hours before it goes live online. Simply because you only have to walk through the building to let us know, doesn’t mean our process is any faster to alter than an outside design firms.

5-Constructive Criticism

When approving designs from your in-house team, tell them exactly what you think about it. Be careful though! Even though our nature is to be thick-skinned, we want feedback we can use. Don’t say, “I don’t like it or this isn’t what I was looking for.”  Those phrases are only frustrating and not helpful one bit. Tell your designers why you don’t like something and why it won’t work in the current state. Constructive criticism turns great designs into award winning designs.

6-Let us Out!

Personally, I don’t find it very inspiring to sit in my office all day and crank out creative. But, most often in-house design teams don’t have the time to take a field trip out to a coffee house to work or other location. Being in a new environment can be extremely inspiring. You never know who you might overhear or what you might see that will spark a new idea or your company’s next successful promotional concept. When possible, encourage your team to have a brainstorming session someplace other than a conference room or their office.

7-You Better Recognize!

Not everyone needs to be told “great job” or “love your work” every single day. But, it is important to let your designers know how much you appreciate their hard work every now and then. Especially if they can’t catch a break from the workload generally toppling over them. This can also be shown by giving them a project you would normally farm out. Designers don’t thrive on daily tasks, we need variation!

8-Education & Technology

In today’s world, technology is changing so quickly that designers, developers and the like are constantly learning new skills. Allow your creative team some time during the year to attend a workshop, webinar, or design conference. Magazine subscriptions, blogs, and online tutorials are also great resources for less cost to give your designers access to. Keep your team’s skills up-to-date with the rest of the world and you’ll keep seeing great results and most likely smiling faces around the office.

Want more ways to keep your design team happy? I’d be more than happy to share my experiences with you!

Do you design on an in-house team? Share your success or horror stories!