Phone: (415) 668-4372 Email: info@pipsqueak.com

Design Process

Three Stages: Conceptual Design, Interaction Design, and Interface Design

Shadow Element

“In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.” Steve Jobs

Design is much more than how a product looks. It’s about how it works. More specifically, it’s about solving problems by shaping all the points of contact, both physical and cognitive, that a user has with a product.

Our design process divides the task of product design into three stages: Conceptual Design, Interaction Design, and Interface Design.

Conceptual Design:
What does it do?
Interaction Design:
How does it do it?
Interface Design:
What is its look and feel?

Early in a product’s design cycle, conceptual design is critical. Later, as the product’s feature set becomes clearly defined, interaction design and interface design predominate.

Conceptual Design

Illustration of a cut-away house with each room designated for a different portion of a website.

A house suggests one way of conceptualizing “information architecture.”

Conceptual design focuses on what a product does. We start our process by identifying an audience and then visualizing what that audience wishes from a particular product. We identify the goals and expectations of each audience type under the circumstances of how they will be accessing the product, and then seek ways of satisfying those goals and shaping those expectations. Rather than driving this process by what can be done technically, we prefer an “audience experience” approach to determining a product’s feature set.

Take as an example the creation of a Bank ATM. There are three focal points to this device: there is a touch screen which allows input and provides visual feedback; there is a keypad that allows the user to enter information; and the physical input devices which handle the manipulation of the bank card, the acceptance of a deposit, and the delivery of the receipt and currency.

Conceptually, an ATM needs to allow an ordinary person to do some minimal banking functions: deposit and withdraw money from multiple accounts, transfer funds between accounts and receive information on check balances and recent transactions. Security is critical. ATM Security can be divided into bank security functions and the customer’s physical security. During the conceptual design phase, there would be a recognition of the necessity of helping to prevent attacks on customers standing outside with their account and money potentially vulnerable.

So the conceptual design specification of an ATM would list all of the desirable functions that the machine would do to meet the needs and goals of its users. It would also make certain cost/benefit decisions. For example, on the customer security issue, it may be desirable but impracticable to provide a security guard at each ATM location.

Interaction Design

Interaction design focuses on how a product behaves. It touches all the points of contact between a product and the user. As such, it unlocks the functionality of a product. Information architecture is part of interaction design. For example, during the interaction design period of a website, the designer might, among other things, determine how the webpage would organize the content.

During the conceptual design of the ATM, a list of features would have been created. During the interaction stage, the designers must figure out the best way to implement those features. It would be important to figure out things like how big to make the “hot spots” on the touch screen, how the screen should be angled to reduce glare, which information should be entered on the keypad and which via a touch screen, how many levels deep to make hierarchy of information presented to the user—too deep, and most people won’t be able to navigate it.

Responding to the ATM customer security issue raised during the conceptual design state, for example, the interaction designer may specify site lighting, television cameras, screens viewable from only a narrow angle, privacy panels, reflective surfaces to allow users to see what’s going on behind them, and so forth.

The list of all interaction design criteria is very long even for a relatively simple product. How these interaction design criteria get implemented is the job of interface design.

Interface Design

Interface design focuses on how the product looks and feels. Often the problems of look and feel are mistakenly thought to be the entire design problem. But look and feel is only successful if the other design issues have been carefully crafted first.

For the Bank ATM, interface design includes the materials out of which to make the keypad, the way the information is presented on the screen, and the choice of user feedback for each action the user makes. It includes the graphics and instructions that surround the monitor and buttons. Recently, Wells Fargo replaced its ATMs with a newer touch screen model. While similar to the old, the new ATM model differentiated between the beep sounds the keypad made and the beep sounds of the touch screen. So if a person wanted to withdraw a standard amount, the beeps revealed only that she was pressing the touch screen (one beep per standard amount). But if the user wanted something different, she would have to use the keypad, and the sound of the beeps revealed what she was doing—five beeps meant that the withdrawal was $100 or more. The physical security of the customer is potentially jeopardized by the sounds of the beeps. This is an example of a flaw in the interface design stage.

Wells Fargo’s ATM designers must have noticed that many customers do the same ATM transactions over and over again. So they added a feature—some of their ATMs now remember the last transaction done by a customer and present it the next time as a one-touch option. This design addition makes doing that transaction much easier and alleviates the security concern with the audible buttons we noted above.

Often, product designers juggle all three aspects of the design at the same time—you can’t produce a good interface design if the interaction design is lousy; and it is very difficult to create a quality interaction design without having a good understanding of the function and goal of the product. We find that separating these steps into consecutive stages makes for better products and a more efficient development process.

Process Diagram

This three page process diagram presents a simplified flow diagram of our three stage design process. PDF 242K

Conceptual Design Process Diagram Interaction Design Process Diagram Interface Design Process Diagram

Audience-Focused Design

The first and last thought of product designers should always be the needs of the audience. A person uses a product to achieve a goal. The design of a product can either help or it can form obstacles that interfere with the realization of that goal. The product is easier to use when its design is created to meet the needs of its intended audience. Designers who consider those needs produce far more effective products than those who base their designs on aesthetics alone. The difference between a product that helps or hinders a user is rarely the difference between pretty buttons and ugly ones. While well-designed products have an aesthetic component, the design of a product is about much more than how it looks.

A well-designed product should be easily and entirely understood by its users. What users don’t understand, they won’t use. It should allow users to easily find the products functionality. An intuitive product allows the user to correctly guess both the existence and the location of functions. Sometimes it is not possible to design in such a way that users entirely understand the product. Then there should be cognitive scaffolds which allow the product’s functionality to unfold to the user, with the advanced functions becoming clear as the user needs them.

A good product requires a foundation of good design. Considerate and compassionate interaction design can only be built on a thoughtful and realistic conceptual design.

Can You Skip Design?

Of course—if someone else has already done it for you. If you need a website and have a completed template in hand that matches the goals of your business and the needs of your audience, then perhaps you don’t need to design it again. Just slap up some new content and go. But we’re suspicious of how this actually works in practice. Some clients just want to get something up, design be damned. A template can do that. We’ve even seen some visually attractive templates for websites available for purchase. And with appropriate customization sometimes that’s the right answer. But design is much more than just the way something looks. It’s about solving problems. And the template approach rarely does that.

Other Resources from Pipsqueak

We approach project design asking questions which can only be answered using cognitive science—how do people solve problems on a computer? How can the computer assist them? For more on this, please take a look at our Interface Philosophy page on this site. Or read our book on this subject: “Interfaces.com: Cognitive Tools for Product Designers.” Or take a look at our blog: interfaces.com. Or contact us. We’ll be happy to help.