Boxes And Arrows : The Design Behind the Design

Building Brand into Structure

by Dan Saffer on 2002/06/03 | [18 Comments]

Walk into any K-Mart. Then walk into any Target. You’ll see similar merchandise (substitute Martha Stewart for Michael Graves), similar target audiences, even

If you followed usability gurus like Jakob Nielsen blindly, brand would have little to no place in information and interaction design. Logo goes here, they argue. Shopping cart goes there. Users don’t want an experience, they want to find information and to do things as quickly and simply as possible.

But what if the client’s (or your own company’s) brand doesn’t support these dictums? Not every brand is utilitarian, lending itself to shopping carts and blue underlined links. And even in brands that do support these “rules,” there are differences —brand differences —that affect the display of content, site nomenclature, and users interactions with the site.

Branding 101
Whole books have been written about branding and corporate identity. A brief summary of them is this: “Brand” constitutes the essence of a company’s core characteristics —or at least the characteristics it publicly displays —and how those characteristics (or values, as they are sometimes called) are presented.

Companies can have “core characteristics.” Typically, these are one or two adjectives that define the spirit of the company. Volvo: safety. Toys “R” Us: playfulness. The US Marines: duty and honor. Many companies have a set of secondary characteristics that also inform the brand. IKEA’s core characteristics are probably affordable and Swedish; its secondary brand values might be stylish, useful, enjoyable, utilitarian, and probably a few more.

Brand as a driving force
Depending on the company, brand can drive everything from new product development to marketing to the costumes employees must wear as they serve up fries and hamburgers. Brand should be a component of every decision a company makes, from its customer service to its logistics to its letterhead to its interactive properties.

If a company (and its consultants) waits until the visual design phase to add in brand, it’s too late: it is guaranteed a flawed product. Navigation, nomenclature, and content presentation must also reflect the company’s brand. The most elegant visual design in the world isn’t going to overcome inappropriate interaction design.

Different brands: different design
What works for one site might not work for another because of brand. Amazon’s ordering process is fantastic and a model of innovative interaction design. But it can’t be directly ported over to every site because, in all likelihood, the other company’s brand would reject it like bodies reject the wrong blood type. It just wouldn’t fit. Different brands require different treatments of the same functionality.

I recently did an ecommerce B2B project for a luxury high-end retailer known for their personal service (and for their lawyers, which is why I’m not mentioning their name!). When I sat next to their customer service representatives in their call center, I was astounded at the level of service their customers asked for – and received. A pair of $400 cufflinks messengered from one of their stores that afternoon. Two hundred silver bowls engraved with the company logo and sent to two hundred separate people. A set of crystal turtles, pieces of which were scattered among five different stores, combined into one order.

It was extremely obvious that, although it contained some of the required functionality (and did so in an excellent fashion), the Amazon ordering system was not going to work for this client. Their customers were used to being able to specify the details down to the color of the ribbon that was wrapped around the gift box.

Brand can also affect how content is displayed. Because this company’s brand was all about luxury and sophistication, pages could not be packed as densely as most ecommerce sites. Only three products could be displayed on a page, and because some of those products were $350,000 US diamond necklaces, the size of the product image had to be large enough to display its quality.

I’ve found this on other ecommerce sites as well: the more sophisticated the brand and the higher the quality (and cost) of the products, the fewer products there are per page. The Gap Inc. family illustrates this well, with Banana Republic’s site displaying only a few items per page, the Gap more, and Old Navy most of all.

It’s not just in information display either. Take the Shopping Cart. It’s a very useful metaphor, nearly ubiquitous on ecommerce sites. But calling it a “Shopping Cart” simply doesn’t work everywhere. Victoria’s Secret, with their little pink and white shopping bags filled with unmentionables, would have been foolish to use the “Shopping Cart” nomenclature on VictoriasSecret.com instead of the “Shopping Bag.” When’s the last time you saw a shopping cart in a lingerie store? It simply would have been out of place. And even though it might take a user a few milliseconds initially to equate “Shopping Bag” with “Shopping Cart,” those few seconds are well worth it if the feeling you get from the site is that of Victoria’s Secret and not Yahoo Shopping.

Why do companies care? Because brand is a differentiator. In crowded marketplaces – and the web is the most crowded marketplace ever – brand is one thing that separates companies from one another. Companies with strong brands (sometimes called “brand equity”) can sell the same products as their competitors for more money. Starbucks is a case in point: they can sell a $5 cup of coffee because their customers are also buying the Starbucks experience, the Starbucks brand.

Brand vs. User
Of course, there is a balancing act that the IA must perform between the needs of the brand and the needs of the user. If you focus too much on brand, you risk turning the project into a branding exercise and not one that will meet anyone’s goals.

In some cases, this is fine: the business goal is to establish or reinforce the brand. Take a movie site I just produced for Warner Bros., 8leggedfreaks.com. Its goal is to drive people to the movie by embodying the spirit (i.e. brand) of the movie, nothing more. Users (target demographic: males 11-24) who go there might be looking for specific information about the movie (cast bios, etc.), but for the most part, they want to know what seeing the movie is going to be like. They want to know what the experience of the movie will be. A site that is all about the movie’s brand meets both the users’ and the business goals.

But in most cases, a site’s goals aren’t only to promote a company’s (or a company’s product’s) brand; they are either to provide information (content), sell things (ecommerce), or provide services (online trading, bulletin boards, gaming, etc.) – sometimes all three. How does one balance brand with users’ needs?

The golden rule is this: The brand should never hinder usability unless it would be entirely against the brand’s values to do otherwise. Sometimes, this means fewer items per page, sometimes it means calling the Shopping Cart “My Makeup Case.” Sometimes it means extra pages in the ordering process to ensure the personal service the user expects.

Although these changes may not be instantly familiar, they are, in the long run, more useful because users go to sites for a reason, and part of that reason is brand. People expect different experiences from different sites, just as you expect them from different physical places. Users who head to Christies.com to buy an expensive piece of art would probably think twice about doing so if the information design looked like eBay. They might even think they’re on the wrong site. No one minds sifting through long lists of semi-sorted items on eBay because it is part of the eBay experience based on the offline experience of sorting through junk at a flea market. But it won’t fly on a site with a more sophisticated brand.

The experience that users would have with the company in person should not be radically different than the experience they have online. The online experience can be better, more efficient, and done at three in morning in your underwear, but the traits that a company presents live should be the same ones they present digitally.

And even if the company has no bricks-and-mortar component, they still have people, and those people have personalities. The positive personality traits of those people, collectively, is their brand.

How to keep brand in mind
Brand should be an essential component when considering everything from how content is clustered to navigation to taxonomy. Here are some tips to keep your project within the company’s brand umbrella:

• At the beginning of a project, consult the company style guide. Often, these contain clues (if not outright instructions) for using the brand in various contexts.
• If you are consulting, visit the company’s workplace or store to get a feel for both what being an employee and being a customer would be like. If you are in-house, try to distill your knowledge about your company down to its core values. Often, you will have been bombarded by these messages already.
• Ask about brand values. Often, the marketing people are going to be your best source for this information, and your best allies for promoting brand through structure. Explaining to them what you are doing and why, asking for their input, should head off any “brand turf” wars. If you get blank stares, it’s up to you and your team to push for a brand workshop or be stuck taking an educated guess.
• Look over any TV commercials, print ads, or other collateral materials like brochures. Note how the company presents itself and displays its products and services. What are the adjectives that describe the work? Your designs should also reflect those adjectives.

Nomenclature is a major area for branding. The subtle difference between say, “Company Information” vs. “About Company X” vs. “About Us” can make all the difference in the world to the feel of the site without sacrificing usability. Is the brand friendly enough to use “My”? “My Mail,” “My Account,” etc.? Or would a more impersonal “Account Information” work better?

Functionality is a particularly challenging place to address brand. One could argue that for applications, the usability of the application is paramount, and that the majority of the branding work for them should be done in visual design. Indeed, a little branding in this area goes an extremely long way. A rule of thumb is that the stronger the brand, the more you can deviate from application standards. Company X will not be able to get away with having its buttons in a odd location, but Disney might.

If your application is part of a suite of applications, it probably behooves you to make your new application conform as much as possible (and reasonable) to the other applications in nomenclature and interface design (consistent location of navigation, etc.).

The appropriate experience
One of the goals of Design with a capital D is to provide the appropriate experience for what is being presented. To paraphrase legendary adman Tibor Kalman, design is a language, not content. By being aware of brand when making your information and interaction designs, you’ll help ensure an appropriate experience that supports the overarching brand.