CONTEXTUAL

HUGH BEYER AND KAREN HOLTZBLATT

Don Bishop ©1997 Artville, LLC

Contextual Design is a state-of-the-art approach to designing products directly from a

’s understanding of how the customer works. Great product ideas come from the

marriage of a designer’s detailed understanding of a customer’s need and his or her in-depth

Cunderstanding of the possibilities introduced by technology. The best product result

when the product’s are involved in collecting and interpreting customer data and

appreciate what real people need. Contextual Design gives designers the tools to do just that.

32 interactions...january + february 1999 article

Contextual Design starts by recognizing that Contextual Design unifies design, marketing, any system embodies a way of working. A sys- delivery, and support in a coherent response to tem’s function and structure force users to the customer. It gives a team activities focused accept particular strategies, language, and on the customers and their work, rather than work flow. Successful systems offer a way of leaving team members to argue over personal working that customers want to adopt. Con- opinion, anecdotes, or unverifiable claims textual Design is a method that helps a cross- about “what customers would like.” Hugh Beyer functional team come to agreement on what When a team begins work, it has to decide Karen Holtzblatt their customers need and how to design a sys- how to approach the task of deciding what to InContext Enterprises, Inc. tem for them. build. define a coherent 249 Ayer Road, Suite 301 According to the Contextual Design series of actions that lead a team, we hope, to Harvard, MA 01451 approach, data gathered from customers is the a well-designed system. But every problem is +1-888-892-0800 base criterion for deciding which needs to different, and every team and organizational Fax: +1-508-772-6907 address, what the system should do, and how system are different; any design method must [email protected] it should be structured. The process guides the accommodate specific needs. Because Contex- http://www.incent.com design team in understanding and redesigning tual Design deals with the front end of design, customers’ work, using those decisions to help from finding out who your customers are to define computer systems to support them. By testing a specific solution for them, it offers a explicitly defining the work and the system, useful framework for tailoring a design pro-

The Contextual Design process, showing the parts and where they fit.

interactions...january + february 1999 33 cess. Individual steps can be shortened or one-on-one field interviews with customers omitted if they aren’t applicable, or a step can in their workplace to discover what matters be elaborated with additional techniques if it in the work. A contextual interviewer is important. observes users as they work and asks about Every part of Contextual Design exists for the users’ actions step by step to understand a reason, either to further the design process, their motivations and strategy. Through dis- maintain a shared purpose and direction in cussion, the interviewer and user develop a the team, or help the design team coordinate shared interpretation of the work. with the larger organization. To change a pro- Team interpretation sessions bring cess means having to understand how each together a cross-functional team to hear the part of the process fits and what problems it whole story of an interview and glean the solves. Following is a summary of Contextual insights and learning relevant to their design Design, with a description of the purpose of problem. An interpretation session lets the part, the problem it solves, and how to get everyone on the team bring his or her it adopted by your organization. The parts are unique perspective to the data, sharing as follows: Contextual Inquiry: Talk to indi- design, marketing, and business implications. vidual customers in their workplace while Through these discussions, the team captures they work; Work Modeling: Draw models issues, draws work models, and develops a representing the work of the customers you shared view of the customer whose data is talk to; Consolidation: Create a single state- being interpreted and their needs. ment of the work practice of your market or organization; Work Redesign: Invent and Changing the organization develop better ways to work; User Environ- Clients repeatedly tell us that the most sig- ment Design: Represent the entire system for nificant thing we do is put the designer in product planning, marketing, UI design, and specification; and Test with Customers: Test and iterate the design with customers using rough paper .

Contextual Inquiry ➤ Reveals the details and motiva- tions implicit in people’s work ➤ Makes the customer and their work needs real to the designers ➤ Introduces customer data as the basis for making decisions ➤ Creates a shared understanding of the data throughout the team The first problem for designers is to understand the customers: their needs, their desires, their approach to the work. Often the work has become so habitual to the people who do it that they often have difficulty articu- lating exactly what they do and why they do it.

Contextual inquiry is an explicit “When I was coding I was behind a mirror... but when I step for understanding who the cus- sat together with the user in front of the system, I felt tomers really are and how they work like I was looking through the mirror and becoming aware that there was a human being on the other side.” day to day. The design team conducts — Contextual Design user

34 interactions...january + february 1999 article

front of the user. The experience of sitting control how work is done. with the customer, seeing what she strug- Work models show the work of individuals gles with daily, forces the designer to and organizations in diagrams. Five differ- change his perspective and appreciate what ent models provide five perspectives on how the issues are and why they matter. work is done: (1) the flow model shows com- Don’t limit contact with the users to “user munication and coordination, (2) the cultur- interaction” specialists—or profes- al model shows culture and policy, (3) the sionals, or human factors experts. Make sure sequence model shows the detailed steps all the designers of the system—developers, performed to accomplish a task, (4) the marketers, program managers, and even cus- physical model shows the physical environ- tomers (if you’re developing an internal sys- ment as it supports the work, and (5) the tem and have customers on the team)—have artifact model shows how artifacts are used a chance to conduct or assist with some inter- and structured in doing the work. views. It’s much easier if all stakeholders have a chance to see the issues for themselves than Changing the organization to try to make them all believe you. Work models are a convenient and compact way to represent a user’s work. Being picto- The quick hit rial, they are easy to scan; they don’t have to If you apply only one technique from Con- be read, like a scenario or trip summary. textual Design, contextual inquiry should be They’ll help you communicate what you the one. Decide on your focus: Are you inter- learned. If you’ve drawn work models during ested in fixing UI glitches? Finding the 10 top an interpretation session, you can use them show-stoppers before shipping? Interview to describe the customers’ work to people four to six users on the particular part of the who missed the session. Contextual Design system you care about. Run an interpretation teams depend on sharing work models to session with the designers of that part—take keep everyone informed on every interview. notes of key findings, but don’t bother with In the end, however, each team member has work models—and report the results. to design for the whole market—not just the Looking for opportunities for new prod- customers they happened to visit. ucts? Conduct interviews with 15 to 20 users Furthermore, work models help you take across the market you hope to address. The the next leap in understanding—from insights from your interpretation sessions knowing the work of individual customers will give you a starting point—but you’ll to understanding the fundamental structure probably want to see a better picture of of work for a whole customer population. your whole market, so draw work models of the customers you interview. The quick hit If you’re focused on understanding a single Work Modeling task or designing a single piece of the sys- ➤ Provides a language for talking about tem, start by drawing sequence and artifact work that can be shared across teams models during the interpretation session. ➤ Shows structure of work and makes data These models reveal how a task is structured from interview coherent and give immediate guidance on designing ➤ Grounds the team conversation in explic- an interface to support the task. it representations If you’re developing a new product, or People’s work is complex and full of detail. looking for product opportunities, you want It’s also intangible—there’s no good way to a deeper understanding of your market’s write down or talk about work practice. overall work practice. Develop all the mod- Design teams seldom have the critical skill of els—the flow, cultural, and physical models seeing the structure of work done by others, will be particularly important for seeing the looking past the surface detail to see the big picture of how your customers’ work fits intents, strategies, and motivations that together.

interactions...january + february 1999 35 A flow model showing whom a user interacted with during the course of an interview.

Consolidation ing individual variation. The affinity diagram ➤ Provides a map of the customer maps issues and insights across all customers population into a wall-sized, hierarchical diagram to ➤ Makes sense of vast amounts of qualita- reveal the scope of the problem. Consolidat- tive data quickly ed work models bring together each differ- ➤ Identifies the needs of the customer ent type of work model separately to reveal ➤ Shows underlying structure of work common strategies and intents while retain- across customers without losing variation ing and organizing individual differences. ➤ Results in corporate data that can be Together, the affinity diagram and con- reused by future projects solidated work models produce a single pic- Systems are seldom designed for a single ture of the customer population a design customer. But designing for a whole cus- will address. They give the team a focus for tomer population—the market, depart- the design conversation, showing how the ment, or organization that will use the work functions as a whole rather than system—depends on seeing the common breaking it up in lists. They show what mat- aspects of the work different people do. ters in the work and guide the structuring of Consolidation collects data from individu- a coherent response, including system focus al customer interviews so the team can see and features, business actions, and delivery common patterns and structure without los- mechanisms.

36 interactions...january + february 1999 article

Changing the organization their design. An affinity diagram and set of consolidated Take advantage of your consolidations by models are a picture of your market, or of ✱ Publicizing them. Invite developers, your internal customer population. They are marketers, and other project teams a resource to be used and reused. People addressing the same population to will come back to us years later to say that peruse them. Create events in which the data they collected are still guiding another group reads and discusses

A cultural model showing the culture and policy constraining how work is done.

interactions...january + february 1999 37 the implications of the models for mary issues in a domain, you may be satis- them. Invite upper management to fied with listing key points and making an review the key points from the mod- affinity diagram. The affinity diagram will els and discuss the implications for collect similar issues and show where you product and business direction. have problems. ✱ Teaching people how to use the If you’re focused on a single task or piece models. Clean them up for easy read- of your system, building and consolidating ing. Introduce them to people, sequence and artifact models show how describing the models themselves, that task is structured. Use these models as what they say about your customer a guide for your design—build storyboards population, and the design implica- or scenarios from them, or move straight to tions they suggest. paper prototypes, and if you are planning ✱ Putting the models on your intranet. an object-oriented implementation, to use These days, a 4’ x 6’ diagram on a cases. wall is invisible; a picture on your Pull information from the consolidated internal Web site will attract interest models to talk to other teams and man- from all over the company. Organize agement about what you discovered. Get the site with a description of the pro- the key points of a slide presentation from ject and the data, and give people a the affinity diagram or from issues you means of browsing it. identified in a consolidated model. Identi- fy and communicate the “three key strate- The quick hit gies” or the “four central roles” for your If you’re looking to simply identify the pri- product.

A Contextual Design team is truly immersed in customer data.

38 interactions...january + february 1999 article

Work Redesign support have a heads-up on what will be ➤ Focuses the team on improving work, expected of them. After the vision is formed, not delivering technology the different functions will start to pursue ➤ Ensures that systems, business alliances, their separate issues in parallel. and services fit into the customers’ over- Storyboards show how your proposed sys- all work practice tem will actually be used. Designers spin sto- ➤ Collects and integrates ideas from the ries of use all the time—“first the user will do whole team this, then they’ll go here, then...” Story- Any successful system improves its users’ boards show the conversation and make it work practice. A design team’s challenge is concrete, giving your team an external arti- to invent and structure a system that will fact to represent the design conversation. It’s improve customers’ work in ways they care a technique you can use anytime you’re try- about. ing to sort out the details of a design. Work redesign brings the designers together to discuss the consolidated data The quick hit and how technology can improve the work. Use visions to quickly come together on a This focuses the conversation on how tech- shared direction. They distill your ideas and nology helps people get their jobs done, help you see how they can fit together. Once rather than on what could be done with you have a vision, you can quickly order technology without considering the impact which parts to roll out first and who will on people’s real lives. have to do what to make it happen. The redesigned work practice is portrayed Storyboards act like scenarios, but also in a vision, a story of how customers will do like high- use cases, showing what hap- their work in the new world we invent. A pens when people interact with the system. vision includes the system, its delivery, and Use them to think through the principal sit- support structures to make the new work uations your system will have to support. Let practice successful. The team develops the them be the context for your initial UI details of the vision in storyboards, ”freeze- design, and check the results against your frame” sketches showing scenarios of how consolidated sequences. When you make people will work with the new system. use cases, use your storyboards as a guide, and you’ll be better tied to your customer. Changing the organization The vision itself is a high-level statement of User Environment Design what you intend your project to accomplish ➤ Maintains coherence of the system from in its impact on the customer. The vision is a the user’s point of view summary orienting a manager, developer, or ➤ Captures the structure, function, and new team member to your project. It will flow of the system keep you focused on what matters to the ➤ Focuses the design team on what the customer, by showing your impact on their system does, not the user interface or work. It’s hard to argue with your vice pres- implementation ident when he or she has fallen in love with ➤ Allows for planning and keeps team some design solution—but if you have con- members focused on the whole system, crete customer data backing you up, you not just their part stand a better chance. The new system must have the appropriate Different parts of the vision will be function and structure to support a natural important to different groups. Even before flow of work through the system. Just as you’ve started working on the details, mar- architects draw floor plans to see the struc- keting can develop market messages and ture and flow of a house, designers need to business plans from the vision. Development see the “floor plan” of their new system— can start investigating the underlying tech- hidden behind user interface drawings, nology the vision depends on. Delivery and implemented by an object model, and

interactions...january + february 1999 39 responding to the customer work. This floor details of a UI. Address structural problems plan is typically not made explicit in the at this level and you’ll have less to do when design process. you get to the UI. The User Environment Design (UED) shows the floor plan of the new system. It shows Mockup and Test with Customers each part of the system, how it supports the ➤ Finds and fixes errors in the new design user’s work, exactly what function is available before any commitment to code in that part, and how the user gets to and ➤ Makes users a design partner in develop- from other parts of the system—without tying ing the new system this structure to any particular user interface. ➤ Shortens arguments in the team through Using an explicit User Environment a quick way to resolve disagreements Design, a team can make sure the structure ➤ Keeps the team from arguing over user is right for the user, plan how to introduce interface detail before the basic struc- new features in a series of releases, and ture is right manage the work of the project across engi- Testing is an important part of any systems neering teams. Using a diagram that focuses development. It’s generally accepted that on keeping the system coherent for the user the sooner problems are found, the less it counterbalances the other forces that would costs to fix them. So, it’s important to test sacrifice coherence for ease of implementa- and iterate a design early, before anyone tion or delivery. becomes invested in the design and before anyone spends time writing code. The sim- Changing the organization pler a testing process you have, the more Don’t limit the User Environment Design to you can do multiple iterations to work out creating new systems. If you have usability the detailed design with your users. problems with an existing system, creating a Paper prototyping develops rough mock- reverse UED for it can quickly reveal many ups of the system using Post-it® notes to structural problems. Use the reverse UED as represent windows, dialog boxes, buttons, a focus for follow-on contextual inquiries. If and menus. The design team tests these pro- you’re extending an existing system, the totypes with users in their workplace, same sort of diagram will show you what replaying real work events in the proposed you’re starting with. It will help you keep system. When the user discovers problems, the system coherent while extending it and they and the designers redesign the proto- will be an ally against feature creep. type together to fit their needs. The User Environment Design is also a Rough paper prototypes of the system good way to analyze competitive systems. It design test the structure of a User Environ- strips away the detail of a UI so that you can ment Design and initial user interface ideas compare systems at a structural level. How before anything is committed to code. If well does your system compare in function? you’ve built a User Environment Design from More important, does your competitor match customer data, your base structure should be the customers’ work better than you do? good and you’ll quickly be able to focus on the UI. Otherwise, you’ll spend longer work- The quick hit ing out the base structure on paper. Use informal User Environment Designs to Paper prototypes support continuous reveal the structure in current and proposed iteration of the new system, keeping it faith- systems. Use it to help make sense of the ful to the users’ needs. Refining the design huge spec sitting on your desk. Then show with users gives designers a customer-cen- the result to the designers so they can see tered way to resolve disagreements and the structure of their proposal. Sketch small, work out the next layer of requirements. informal User Environment Designs during The team uses several paper prototype ses- design meetings to visualize your design dis- sions to improve the system and drive cussions and keep avoid getting in the detailed .

40 interactions...january + february 1999 article

Changing the organization Many designs are too complex to deliver in a Paper prototypes are always popular and single release and need to be divided into a always successful. They’re quick to build and series of releases, each addressing a coherent easy to run. You’ll sometimes run into ner- task or role. You can use an ordering process vousness in your company—someone will be based on the vision and the User Environment afraid they look like a kindergarten project, Design to decide what subset of the design not like the product of a responsible organi- will give them the most impact for the least zation—but these fears dissolve after the effort. And when a team will be using an first few interviews. Customers love paper object-oriented implementation, you can cre- prototypes, because they give customers an ate use cases and object models from the User opportunity to understand a new design Environment Design and storyboards. and contribute to it. Contextual Design works because it helps a team think about the design issues while han- The quick hit dling the interpersonal problems that get in You can create a paper prototype at any the way. Using concrete, customer-centered time. Customer data-gathering, storyboard- ing, and User Environment Design save you time because they improve your first proto- type. But if even you didn’t do that work, mock up and test your design ideas anyway. If you’re stuck arguing over design alterna- tives, mock them up and test them with users. You can prepare a decent mockup, run the interview, and interpret the results in 48 hours—surely more effective than rerunning the argument every week until you ship. Then, when you’ve got the team in the habit of going to the customer to test their ideas, you can ease them into continuing the customer visits as they decide what to build in the next version.

After the primary Contextual Design pro- A paper prototype for a shop-at-home system. The hand-drawn look cess, a team moves into implementation. encourages redesign during the interview.

A reverse User Environment Design for Microsoft Outlook 97 showing the underlying structure of the product.

interactions...january + february 1999 41 techniques leads to a team’s shared, concrete Holtzblatt, K. and Beyer, H. Making Customer-Cen- understanding of the customers’ work and the tered Design Work for Teams. Communications of the system’s response. These techniques give a ACM (October 1993). PERMISSION TO MAKE DIGITAL OR design team the chance to design a coherent Holtzblatt, K. If We’re a Team, Why Don’t We Act Like HARD COPIES OF ALL OR PART OF THIS

WORK FOR PERSONAL OR CLASSROOM system that works for customers and can be One? interactions 1, 3 (July 1994) 17. USE IS GRANTED WITHOUT FEE delivered by the organization. Holtzblatt, K. and Beyer, H. Representing Work for the PROVIDED THAT COPIES ARE NOT Purpose of Design (L. Suchman, ed.). In Representations MADE OR DISTRIBUTED FOR PROFIT OR Further Reading COMMERCIAL ADVANTAGE AND THAT of Work. Hawaii International Conference on System

COPIES BEAR THIS NOTICE AND THE Anthes, G. Clear Vision, Computerworld 31, 20 (May Sciences, January 1994. FULL CITATION ON THE FIRST PAGE. 19, 1997), 81. Holtzblatt, K. and Beyer, H., eds. Requirements Gath- TO COPY OTHERWISE, TO REPUBLISH, Beyer, H. and Holtzblatt, K. Contextual Design: Defin- ering: The Human Factor. Communications of the ACM TO POST ON SERVERS OR TO REDIS-

TRIBUTE TO LISTS, REQUIRES PRIOR ing Customer-Centered Systems. Morgan Kaufmann Pub- 38, 5 (May 1995). SPECIFIC PERMISSION AND/OR A FEE. lishers Inc., San Francisco, 1997. Winograd, T. Bringing Design to Software. ACM Press, © ACM 1072-5220/99/0100 $5.00 Beyer, H. Where Do the Objects Come From? In Proceed- New York, 1996. ings of Software Development (Boston, August 1993). Wixon, D. and Ramey, J., eds. Field Methods Case Book Beyer, H. Calling Down the Lightning. IEEE Software for . John Wiley & Sons, Inc., New York, 11, 5 (September 1994), 106. 1996.

You’ve got a project, you want to get customer data for it, but you don’t know where to start or how much of Contextual Design to use? Here are some quick guidelines.

FAST FEEDBACK You’re in field test. Your manager wants Perform contextual inquiries with four to eight users at a to know, “What are the 10 most impor- minimum of four field test sites. Conduct interpretation ses- tant problems to fix before we ship?” sions, capturing notes but no models. Create an affinity dia- Or you have a product in the field. You gram to view the issues and write a report. are asked, “What are the key usability problems in this part of the interface?”

Next Version You’re working on the next version of Interview 8 to 12 users playing two or three roles in all at your product. You know you want to four to six sites. Take notes during your interpretation ses- support a certain task better, or extend sions, as well as sequence, artifact, and physical models. it to support a new task. Consolidate the sequence models to see the structure of the task. If they are interesting, consolidate the artifact models to see strategies and intents. Create a low-level vision and storyboard, showing details of the users’ interaction with the system. Design the UI and test it with paper prototypes.

New Product You’re designing a new product for a Follow the whole process, including the affinity diagram and market. all models. If you lack the time, skip building a User Environ- ment Design and go straight to UI design and paper proto- types.

New Market You’re defining a product strategy for a Follow the whole process using a vision. Conduct 15 to 20 market you’ve never addressed. interviews, covering as many different roles as you can—go for breadth, not depth, of understanding. End with a vision defining various products you might deliver. Analyze the vision to decide which products to pursue, and conduct another round of in-depth interviews to design them.

42 interactions...january + february 1999