No Section...

VII.2 March-April 2000
Page: 16
Digital Citation

Design brief: Broderbund

Esteban Ahn

back to top  About Broderbund

Broderbund was one of the pioneers of home software, beginning with games in the early 1980s, and followed by its creation of the edutainment and home creativity categories with products such as Where In the World Is Carmen San Diego? Living Books, Kid Pix, Print Shop, Myst, and Riven. Broderbund was acquired by The Learning Company in 1998 and was, in turn, acquired by Mattel, the world's #1 toy company, in 1999. Mattel, Inc. (NYSE: MAT-news) is a worldwide leader in the designing, manufacturing, and marketing of family products. With headquarters in El Segundo, California, Mattel has offices and facilities in 36 countries and markets its products in more than 150 nations throughout the world.

back to top  Philosophy of Design

My company's philosophy of design is to ask the customers what they want through extensive market research and customer feedback analysis, along with focus groups of consumers, parents, children, and educators. Market research results are then given to product groups in the form of documents describing a new market segment for which they need a product, or documents describing features that are needed to update an existing product. My philosophy of design for internal tools is to ask different groups of coworkers what they want and then find a balance of functionality, ease of use, and shared utility between those groups. At Broderbund, the general philosophy has been that the customer is always right—and that includes internal customers. When a product is designed for a specific platform, as is the case with the Mediator tool described later here (developed for the Mac operating system), the design process is simplified by following an existing rich set of user interface and usability guidelines.

Within my organization, human interface design is not in and of itself a formal position for consumer products or internal tools. However, it is a job closely handled by the product designers, including engineers who are developing in-house tools. At the level above individual products, there are art directors who ensure a level of consistency in look and feel across a whole product line.

Children's products are a unique design task in that they not only have to be easy to use but the interface itself has to be entertaining in ways that adults might not enjoy. For example, KidPix's menus and icons tend to be oversized and very brightly colored with funny noises and animations for feedback. Productivity products such as Print Shop are much more staid and functional.

back to top  Design Process

The consumer products that Broderbund develops are designed by a large interdisciplinary group, consisting of a creative person, a producer, a marketer, a technical person, an artist, a prototyper, and also sometimes educators or sales people familiar with the market. This group usually has many months to plan a consumer product.

Broderbund's in-house tools are developed by a much smaller group, which consists of a requesting customer, an engineer, and various managers and producers. The team includes those who are affected by a technical problem that a tool could solve. Broderbund develops tools of varying complexity, from large reusable systems for complex tasks such as automated lip synching, to quick one-off patches to fix isolated single-product issues. Unfortunately, over the years what were intended to be one-off patches tend to accumulate and linger.

When I first arrived at Broderbund, I was given the task of writing a new media processing tool to replace an assortment of cryptic programmer utilities. Rather than create just my own cryptic utility, the first step in my informal design process was to spend a lot of time talking to the users. The first group was the artists, who vented in colorful words their displeasure at being forced to use many different engineer-oriented tools with arcane interfaces. The sound department staff had similar but more cacophonous complaints than the artists. Engineers did not see that there was much of a problem but did want any new uber-tool to allow engineers the freedom to continue to add more features.

back to top  Design Example

While there are several media processing tools on the market, Broderbund uses custom tools that are made for use with proprietary data formats and processes rather than using industry-standard media creation and editing tools like PhotoShop or FreeHand. My design problem was to create an in-house media processing tool in a way that makes the completely different user groups of artists, sound designers, and programmers happy. This proprietary in-house media processing tool, Mediator, is used at Broderbund and the Learning Co. to manipulate the thousands of media files (images, animations, sounds, video, etc.) that are part of a typical consumer CD-ROM title or Web site.

In-house media processing tools are often created on a tight timeline as tools to solve short-term problems. However, these tools can result in higher productivity and significant cost and time savings in product development if they are well-designed and highly usable. A well-designed media processing tool saves time and money by improving workflow and communication between departments. During the process of creating such an in-house tool, an organization can learn much about the work flow that occurs between departments and can rethink not just the way tools work but the nature of the work and workflow.

The three user groups for this new media tool had conflicting requirements from the beginning. To satisfy the divergent views, the tool was designed to be modular and accept plug-ins for specific features, allowing each of the user groups to have their own customized versions. Modularity also allowed for new functionality to be added more easily in the future. Furthermore, modularity allows the user to pare down the tool by eliminating unwanted plug-ins and allows Broderbund to limit the tool's configuration for parties outside of Broderbund. Most important, giving engineers a way to extend Mediator for their own uses allowed us to distribute the workload of developing plug-ins to engineers in other groups or to contractors and prevented tool fragmentation by having a standardized base upon which to develop.

I designed a common shell application program that registered and presented the plug-ins to the user with a common grouping interface. This shell offered shared features to the plug-ins like file batching, output logs, progress displays, and inter plug-in communication to share code for things like access to certain file formats like Director. The plug-ins themselves are represented graphically, rather than as text items in pull-down menus, as plug-ins are often represented. This makes them less abstract to the user and distinguishable from built-in items. This also allows the plug-ins to appear to be self-contained objects with their own attributes as tools, metaphorically similar to attachments to vacuum cleaners (Figure 1).

Because plug-ins are graphical objects, the user can move them around via drag and drop. This is important to this interface because it deals with ordered process steps that the user can change on the fly.

bullet.gif Pipelines

In the process of talking to users I learned that they often performed multiple-step sequences that were done repeatedly. For example, the artists remap colors and scale and crop images and animations to programmer specifications. Mediator is designed to perform multiple-step processes via a visual user interface. We already had the visual metaphor of a plug-in icon representing a tool, so why not allow for multiple plug-ins to be put next to each other to build multiple-step processes? Because these processes took files in one end and then ran them through a line of steps and then delivered a final product out the other end, a natural metaphor was of a pipeline (Figure 2).

By using the visual metaphor of pipelines with tactile drag and drop placement we were able to let artists very easily build their own multi-step "macros" and then run batches of files through them. All of a sudden artists were visually scripting and writing batch files.

bullet.gif Refineries

Pipelines for artists were such a success that we moved on to the needs of a different group of users: the programmers or their data processing assistants, whom we call "Data Wranglers." These people are tasked with wrangling hundreds and now thousands of files through various utilities while adjusting customized preferences for each file. If a single change was needed or a mistake was made, many steps for many files had to be redone.

Pipelines were useful for multiple-step processes and could be run on batches, but the preferences for each step could not be customized per file. Thus, we added to Pipelines the ability to see all of the preferences of each plug-in per file in a kind of spreadsheet row and column format.

I also added to Mediator the ability to have multiple pipelines in the same project. The idea of a processing device with multiple inputs running through "pipelines" and which resulted in outputs made me think of a refinery, extending the pipeline metaphor. Individual pipeline views in a refinery can be expanded or collapsed, and each plug-in's column can be enlarged to show more detail. Conversely, items can be collapsed to see just a quick overview of the process (Figure 3).

As the output of one plug-in can be used as the input to the next plug-in, the output of one pipeline can, in turn be used as the input of a following pipeline in the same refinery. Complex interdependent processes become simpler to understand when laid out visually with simple natural ordering. The flow is from left to right through plug-ins and then top to bottom from one pipeline to another.

With refineries, all of the settings needed to process hundreds or thousands of files through multiple steps could be entered once, run and then later viewed, edited and rerun with the push of a button rather than through hours of recreating many manual steps.

Another beneficial result of automating processes was that for the first time, some of these arcane procedures were written and their necessity exposed to scrutiny rather than just remaining in the corporate folklore or oral history. Sometimes steps were discovered to be completely unnecessary when different departments actually sat down together to discuss the whole sequence, or multiple steps were turned into a single step by a plug-in or were done away with just through standardization.

By looking at the bigger picture behind the workflow, I was able to design a tool evoking real world metaphors that were reinforced by the user interface to enhance usability. It is ironic that the metaphors I chose were industrial in nature, as I realized along the way that what I was doing was taking our media-processing methods from pre-Industrial Revolution cottage industry hand production to a more modern assembly line by standardizing parts and processes. The most modern of industries, software, had just moved over the same evolutionary path that manufacturing had taken over the centuries.

back to top  Author

Esteban Ahn
Senior Software Engineer, Broderbund
Broderbund, a unit of The Learning Company division of Mattel

back to top  Figures

F1Figure 1. The Mediator shell and just a few of the dozens of its plug-ins

F2Figure 2. A pipeline with a sequence of three plug-in steps

F3Figure 3. A refinery with two pipelines, each with multiple files

UF1Figure. Esteban Ahn Senior Software Engineer, Broderbund

back to top  Sidebar: Company Snapshot

Job Titles for Design and Usability Positions
Designer and prototyper.

Job Qualifications
Work experience or BA, BFA or BSc, with classes in usability.

Number Employed in Design and Usability
Four out of a 100 total on site are employed in design and usability.

Breadth of Project Teams
One designer per team, with a producer and a half dozen artists, engineers, and sound staff.

back to top  Sidebar: Practitioner's Workbench

Favorite Publications

  • Edward Tufte's series of books on visual design of information and lectures
  • Norman, D. The Design of Everyday Things.
  • Reading about historical process/quality theoreticians such as W. Edwards Deming, who by redesigning processes such as workflow improved productivity and quality for whole organizations (much like good user interface design benefits individuals).

back to top 

©2000 ACM  1072-5220/00/0200  $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