Using the Black Box Model to Design Better Websites

Today we’re going to introduce you to a popular model used in marketing to understand consumer behavior. We’ll then discuss how you as a designer can use this model to structure your designs to encourage action from users.

By becoming more equipped to analyze your visitors, you’ll be able to make informed decisions about how to design more persuasive websites.

Consumer Behavior: Why It Matters

Graphic and web designers have a lot on their plate without fretting about the psychology of consumer behavior. Unfortunately, it takes more than an art degree and a solid knowledge of CSS to create websites that are actually effective.

Consumer behavior is a fairly broad marketing term that essentially seeks to answer the question of why consumers act the way they do. If we can study and understand what makes people tick, we can better tailor our marketing messages to their wants and needs.

Creating a campaign that persuades people to act is the holy grail of marketing and what you strive for in every project. Consumer behavior theory is one of many tools that you can use to help you meet this goal.

“No matter what you’re designing, you’re almost always selling something.”

No matter what you’re designing, you’re almost always selling something. Even if it’s a landing page for a free web app, the goal is to get people to sign up; you’re selling the service. The same goes for a personal web portfolio where you’re essentially selling yourself.

The concept behind our discussion today takes a look at why some people act and others don’t. Hopefully in the end you’ll be more equipped to create persuasive designs that will inspire action on the part of the viewer.

Meet the Black Box

A “black box” is a construct in psychology used to explain the unexplained. The general idea is that we can’t fully understand the human mind as it relates to actions and choices. We can observe certain aspects of the process, but not the actual thought process and how it leads to action.

The parts that we can observe are what happens outside the mind. We can observe the outside forces acting upon a person and how the person responds as a result. The step in between is the “black box”.

Based on this line of thought, we can arrive at the popular outline of every black box model: Input → Black Box → Output.

screenshot

This seems overly basic, and it is, but it gives us the base for a more complex model that we can apply to consumer behavior.

Philip Kotler’s Black Box: The Stimulus-Response Model

Renowned marketing professor Philip Kotler took the popular box model above and applied it to marketing. In his version, input and output have been replaced by stimuli and buyer response: Stimuli → Black Box → Buyer Response.

Here outside factors are input into the black box and the buyer’s response is the result.

screenshot

Stimuli

Even with this new interpretation, the model is still too basic to be of any use, so at this point we need to break down the stimuli and buyer response sections to get a feel for what’s taking place.

It turns out that the stimuli side can be broken down into two subsections: Marketing Stimuli and Environmental Stimuli. Each of these has its own list of common variables:

Marketing Stimuli:

  • Product
  • Price
  • Place
  • Promotion

If you’re a marketing person you might notice that this is commonly referred to as the “marketing mix” or the “4 P’s” of selling a product.

Environmental Stimuli:

  • Economic
  • Technological
  • Political
  • Cultural
  • Demographic
  • Natural

As you can see, the first section is under the control of the seller while the second section relates to fairly uncontrollable forces in the life of the consumer.

Interestingly enough though, the environmental stimuli can and do heavily influence the way the marketing stimuli is structured. More on this later, for now just know that these are the inputs that go into a consumer’s mind.

Buyer’s Response

The buyer’s response side basically outlines all of the decision points that need to be made on the part of the customer. This includes the following:

  • Product choice
  • Brand choice
  • Dealer choice
  • Purchase timing
  • Purchase amount/frequency

This stuff is pretty obvious. When acting upon the stimuli, we must decide which product to buy from where, when to buy it and how much of it to get.

What’s In the Box?

Now that we know the stimuli and the response, it’s time to speculate about what goes on inside the box that make the former lead to the latter.

Kotler’s model splits the Buyer’s Black Box up into two sections: Buyer Characteristics and Design Process.

Buyer Characteristics

  • Attitudes
  • Motivation
  • Perceptions
  • Personality
  • Lifestyle
  • Knowledge

Decision Process

  • Problem recognition
  • Information search
  • Alternative evaluation
  • Purchase decision
  • Post-purchase behavior

Though exactly what happens in the black box is difficult to determine and varies from individual to individual, this rough outline of what’s involved teaches us a lot about the process.

The logical part is the decision process, which goes through typical steps that you take when purchasing a product. Just as important though are the often unpredictable and illogical factors of the consumer such as mood and personality.

Putting It All Together

Once we step back and take a look at all of this at once we finally have an applicable model of consumer behavior. Various stimuli from the marketing mix and the environment are thrown at the consumer who then goes through the decision process in light of his/her various biases and characteristics and the result is a choice.

screenshot

This Seems Useless!

Now comes the biggest question of all: Why the heck would you care about any of this? You’re a designer and there’s a reason you didn’t go to business school; all this stuff is really boring! Here I am on a design blog throwing consumer behavior models at you instead of color palettes and free WordPress themes, what am I trying to pull?

“Good designers make pretty websites, great designers make convincing websites.”

My goal here is to turn you into more than a designer. Good designers make pretty websites, great designers make convincing websites. In order to design the best possible page for a potential viewer/customer, you need to understand that person and this model gives you the tools to start that conversation with your client.

Let’s start off with the marketing stimuli. These are the basics of price, product, etc. As a designer, you probably don’t have control over these but you can bet that the specifics of this need to be among the first things you discuss with a client. Next comes the environmental stimuli. This is much trickier and can’t necessarily be controlled so much as targeted. Who is your target customer for this site? Where do they live? What do they do for a living? How much money do they make?

This information will then help you fudge the details in the black box. For instance, once you understand that the website your client wants is a WordPress theme store targeted towards working class designers, you can start making conclusions about what must happen in their brains to achieve the intended buyer’s response on the other end.

“Read through the model as a checklist of things to think and talk through.”

Read through the model as a checklist of things to think and talk through. For example, what would motivate a designer to buy a theme from a gallery? This could lead you to focus on ease of implementation, saved time and higher profits when you structure the messaging on the site. What knowledge are we assuming that the designers visiting the site do and don’t possess? This will help structure the jargon that we use to convince the visitors that we have exactly what they need: “No PHP knowledge required. Customize the HTML and CSS and you’re ready to go!”

In the Wild

We can see a live example in action on the WooThemes website. Here the product is described as being for “all types of web publishers” and the call to action is “give your WordPress powered site a professional new look and be up and running in no time at all.”

screenshot

Key phrases like “your website” help us see that the WooThemes homepage seems to be targeting site owners more than web designers dishing out lots of work for clients. As in our hypothetical example, we see there’s also a strong emphasis on speed and efficiency, “be up and running in no time at all.”

Basically, this page is full of stimuli aimed at manipulating the process that happens in the black box so that the ultimate result is the potential buyers responding by whipping out their credit cards.

Conclusion: What’s It All About?

To plan out the design for an effective site like WooThemes, you can go through the Black Box model and figure out your goals for the project. Designing with clear goals in mind will always yield more effective results than a shot in the dark focused only on aesthetics.

Start in the Buyer’s Response section. What’s your ultimate end goal? Which choices do you want your visitors to make? Once you have this nailed down, then you can structure the stimuli as we discussed above, keeping in mind the buyer’s typical decision process and your assumptions about the buyer’s characteristics.

In-depth planning and buyer psychology isn’t anywhere near as fun as opening Photoshop and busting out a design, but really thinking through this stuff, whether using this model or on your own terms, em help you become a better web designer. Models are meant to make the complex simple, if you don’t like this one, trash it. Just be sure to attempt to grasp the reason it exists and supplement the process with your own effective system.

Sources: Tutor2U and MarcBowles.com.