No Section...

VII.5 Sept./Oct. 2000
Page: 23
Digital Citation

Business: designing with users in Internet time

Jared Braiterman, Sasha Verhage, Randall Choo

back to top 

The two case studies described in this column demonstrate creative solutions to designing with users on fast-paced projects with large multidisciplinary teams unfamiliar with human-computer interaction techniques. Involving information architects, brand strategists, graphic designers, Web developers, and content strategists ensured that multidisciplinary concerns contributed to the creation of prototypes, development of test plans, ethnographic data collection, research analysis, and, most important, rapid implementation of findings. With the whole team immersed in all stages of user research activities, we were able to eliminate the need for formal research reporting and enable user research findings to contribute to site design, visual identity, technology decisions, brand, and business strategy.

back to top  Case Study 1: Prototyping an E-Commerce Application on Paper

Many e-commerce site developers are skeptical about involving users and working with paper prototypes. How can we incorporate customer research activities on tight schedules? Can paper prototypes create convincing interactions for customers to evaluate and improve? From a usability perspective, can a team simultaneously conduct discovery research to uncover usage scenarios while developing the interactions and page-level details?

The team faced these questions at the outset of a 3-week project to develop the interaction for a new Web shopping application for a specialty coffee retailer. Quickly assembled, hand-drawn prototypes created with six people's unique handwriting raise even more skepticism about inconsistency, realism, and users' confusion. However, not attempting participatory design risked the real possibility of creating an application that met business and brand objectives but failed to provide a compelling customer benefit and intuitive navigation.

Our multidisciplinary team included a usability designer, an information architect, a project manager, content strategists, and two graphic designers. The prototypes allowed us to gain early and iterative user input into the application concept, interaction flows, page-level details, nomenclature, and instructional copy. With no time for research up front before design, our prototype became the vehicle for simultaneously conducting discovery research and developing the application's interaction flow.

Paper prototypes provided multiple benefits: for us, ease of quickly modifying the application, and for our users, a tangible yet unfinished interaction that was inviting and open to their alteration.

bullet.gif Creating the Prototype

Of the project team members, only the usability designer had experience with paper prototypes. Two brief papers provided context about the benefits of paper prototypes and practical advice on how to build them [7, 10]. The team first considered the client's business needs and a tentative set of tasks. The team then sketched on a whiteboard an interaction flow and identified two preliminary drill-downs [8]. Prototype materials included craft paper, colored pens, sticky notes, scissors, glue, and correction tape for data fields. The team used a photocopier to replicate common content elements on multiple pages. Despite differences in handwriting styles, the prototype used a common visual language that remained consistent throughout; for example, all buttons were drawn as boxes and all clickable links were represented as underlined text.

bullet.gif Simultaneous Research Activities

An ideal research schedule includes separate and discrete discovery and interaction research phases. It is valuable to have a clear understanding of your customers and their behaviors and tasks before creating page-to-page interactions and seeking user-generated improvements. Time constraints did not allow for this, so the project team relied on prior ethnographic research and character profiles [1, 4]. By using low-fidelity, easily modifiable prototypes, the team knew that we would quickly learn whether our application overlooked key user needs and that we could rapidly incorporate research findings into our evolving application [3, 9].

bullet.gif Iterative Test Sessions

We conducted 12 test sessions in which target customers first described their offline coffee purchase patterns, their general online shopping experiences, and their awareness of services comparable to our shopping application. Although no user was aware of this new type of shopping, users were able to grasp the application concept, navigate through purchase and edit paths, and offer suggestions for making the site easy to use and convenient. The usablity designer led the users through open-ended questions and the prototype, and team members alternated between playing the computer by "serving" the pages to the participants and watching a video feed in an observation room. After interacting with the prototype, test participants offered insights into usage scenarios relevant to them.

The project team revised the prototype daily and between almost all the test sessions. Revisions ranged from changing nomenclature to reworking entire pages. Iterative testing used a two-phased approach. During the first phase, major glitches were resolved with the handcrafted paper prototype. For example, users convinced the team of the value of full product descriptions and educational content. Users alerted us to their need to see instructional content on shipment arrival date surface at a higher level in the interaction flow. Midway through the 10 days of iterative testing, we transferred our hand-drawn prototype to formal interaction pages in Adobe Illustrator, which would be used at the end of the development period for client approval and rapid progression to a visually designed look and feel (See Figure 1).

bullet.gif Conclusions

Rapidly creating an e-commerce application succeeded as a result of paper prototyping and multidisciplinary team collaboration. Ideal research practices yielded to constraints and flexibility, including conducting discovery and interaction research simultaneously. Guided by skillful moderation, research participants not only tolerated but embraced low-fidelity prototypes. Users demonstrated greater attention to handwritten script, including their own, than to digital copy. They also displayed greater eagerness to offer improvements than is often the case with testers of more polished on-screen prototypes in HTML. We hope this case study encourages other e-commerce teams to consider incorporating multidisciplinary, human-computer interaction activities as part of interaction design.

back to top  Case Study 2: The Game's Not Over

Is "user testing" merely a reliable and timely means to prevent design disaster, as Edward Tufte argues in his national one-day seminars? Is our role to reduce the interface to the lowest common denominator? How do we stop saying "no" to website developers and start to contribute with creativity and solutions?

Human-computer interaction experts working on the Web have ambitious aims: using customer insight to solve complex business and brand problems by creating innovative user experiences. Customer-centered Web designers accomplish this by employing a range of user-centered activities across the product development life cycle and by involving multidisciplinary teams as participants rather than as consumers of user experience research [1].

This case study examines how collaborative design ethnography and iterative user research yielded rapid insight into a client's customers and supported the creative resolution of business, brand, creative and technology challenges [5, 11].

bullet.gif The Challenge

A major video game publisher came to us to launch a new Internet platform for what remains a largely console-based industry. Faced with fresh competition from new players, including Shockrave and Yahoo! Games, the publisher asked us to replace its existing sites with one that would establish it as the online entertainment destination. Through acquisition the publisher had grown, and its existing sites were largely "brochure-ware," full of lengthy marketing copy and poorly integrated sub-branded sites. Our job was to invent and express a new digital business strategy by building a platform with a consistent brand experience and personalization, e-commerce, and community features.

bullet.gif The Essence of Gaming

In order to create an engaging site that would succeed within business, technology, and customer constraints, our project team realized that we would first need to understand the essence of gaming. The 12-person team, including graphic designers, information architects, creative lead, site developers, content and brand strategists, visited small groups of gamers in their rec rooms, bedrooms, and living rooms to understand passionate play. Our overriding questions were: What is it about gaming that frequently produces uninterrupted hours of human-electronic-toy interaction that eclipses regular habits of eating and sleeping? How can we express that immersive, console-and-television experience online?

bullet.gif Rapid Research

Within a 10-day period at the start of the project, we met 32 mostly teen and mostly male gamers. Observing and interviewing them in small groups allowed us to understand the social aspects of game play and provided us rapid insight into youth and young adults lacking the verbal skills many of us take for granted. During concept and design, we conducted weekly iterative research and testing in our office lab. Among our qualitative findings were console gamers' frustrations with PCs [6], an overwhelming preference for visual designs that include Cameron Diaz, spelling difficulties that impede Web browsing, and online interests centering on adult entertainment. From their game play and Internet usage, we observed that gamers expected responsive interactions: they wanted their clicks to produce instantaneous sounds and movements on screen. Server delays and long downloads ran a high risk of alienating our customers, whose impatience is more extreme than most Web users.

Fast responses and addictive play would be difficult to achieve within the technology constraints of slow telephone modems and our 28K baseline. We could not simply re-create the video-rich console games on today's Internet. Finding a solution required satisfying user requirements and redefining the publisher's Internet strategy.

bullet.gif Nonstandard Groupings

The project team's iterative user experience research generated key creative solutions to business, brand, and technology challenges. Because the publisher was known for only a fraction of its popular titles, we rejected standard game genres (similar to video stores' categories of action, drama, comedy, new releases) and invented new categories that spoke to the emotions of gaming and enabled visually rich and original designs. As even the most ardent advocate of Web usability notes, there are occasions when nonstandard treatment is warranted [2].

Nonstandard groupings shifted the focus from the games to the gamers. Our extensible architecture also provided brand benefit by introducing customers to new titles beyond single genres such as sports, action, flight, first-person shooter, and racing. We allowed our research participants to define game associations that were not captured in traditional genres but surfaced in the information architecture games that spoke to similar gaming emotions. For example, sports and action games are often separated. We learned, however, that someone who enjoys hockey games is likely to also enjoy deer hunting.

bullet.gif Immersive Narrowband Interactions

In a physical environment, content can generally be organized by a single typology; for example, a video store can organize titles by movie stars or by standard genres. In digital platforms, there can be multiple ways of organizing and navigating content. Our challenge was designing satisfying interactions that would propel gamers across our site.

The information architect on the team discovered, buried in the existing site, a simple, branded interaction that could be personalized, printed, and pasted on kids' walls or e-mailed to friends. We brought this interaction to the surface in testing and were amazed by the overwhelming response. The development costs of these simple toys were a minuscule fraction of creating full online games, and they could be enjoyed on slow-speed Internet connections with no downloads. Our site architecture enabled these narrowband personalized interactions to serve as an additional method of navigating the site.

bullet.gif Conclusions

Collaborative, user-informed site development generated a digital expression of the playfulness and addiction of offline gaming within technology, business, and brand constraints. Iterative research throughout the project life cycle enabled design solutions that satisfied customers and redefined the publisher's Internet strategy.

Conducting ethnographic research at the beginning of the project ensured that gamers remained at the center of design. Gamers' physical environments, social networks, and largely non-Web entertainment informed how our site should look, sound, and behave. As we developed concepts and designs, iterative testing, with the same gamers we had met in their homes, spurred our creativity and informed our design.

Involving the whole Web design team in iterative customer research and testing serves multiple purposes. Collaborative team research ensures that a wide range of design questions can be addressed swiftly with target users. Given the compressed schedules of all e-commerce site development, multidisciplinary research design, first-hand observation, and on-the-fly analysis make it possible to get close to customers and rapidly apply research insights.

back to top  References

1. Braiterman, Jared. 1999. Ethnographic Methods for User-Centered Web Design. CHI99 Proceedings, pp.125–127.

2. Holtzblatt, Karen and Beyer, Hugh. 1997. Contextual Inquiry. Morgan Kaufmann, San Franciscos.

3. Kuniavsky, Mike. 1999. Why User Testing is Good. Available at 98/14/index3a.html?tw=design

4. Mulligan, R.M., Altom, M.W., and Simkin, D.K. 1991. User Interface Design in the Trenches: Some Tips on Shooting from the Hip. CHI91 Proceedings, pp. 232–236.

5. Nielsen, Jakob. 1999. When Bad Design Elements Become the Standard. Alertbox. November 14 Alertbox. Available at

6. Norman, Donald. 1998. The Invisible Computer. MIT Press, Cambridge, MA.

7. Retting, Marc. 1994. Prototyping for Tiny Fingers. Communications of the ACM 37, 4, pp. 21–27.

8. Rosenfeld, Louis and Morville, Peter. 1998. Information Architecture for the World Wide Web. O'Reilly, Cambridge, MA.

9. Shneiderman, Ben. 1997. Designing the User Interface. Addison-Wesley, Reading, MA.

10. Snyder, Carolyn. 1998. Paper Prototyping: Easier than it Seems. Eye for Design. Sept./Oct., pp. 9–10.

11. Wolfe, Susan. 1999. Why User-Centered Design is No Longer Enough. OzCHI Proceedings, pp. 4–5.

back to top  Authors

Jared Braiterman, Ph.D.
Shutterfly and Small Pond Studios
2800 Bridge Parkway
Redwood City, CA 94065

Sasha Verhage
Sapient Corporation
2300 Harrison Street
San Francisco, CA 94110

Randall Choo
Sapient Corporation
2300 Harrison Street
San Francisco, CA 94110

Business Column Editor

Susan Dray
Dray & Associates, Inc.
2007 Kenwood Parkway
Minneapolis, MN 55405, USA
fax: +1-612-377-0363

back to top  Figures

F1Figure 1. Hand-drawn and illustrator prototype screens.

back to top  Tables



back to top 

©2000 ACM  1072-5220/00/0900  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2000 ACM, Inc.

Post Comment

No Comments Found