In the spring of 1987, Claris Corporation was launched as a software subsidiary of Apple Computer. Claris, named for the clarity and distinctiveness of its product and market vision, inherited Apple’s Macintosh application software, including MacWrite, MacDraw, MacPaint and MacProject. While these classic Macintosh applications embodied Apple’s original human interface design principles and were considered successful in their respective markets, their features and interfaces were becoming outdated.
Claris’ corporate strategy was defined, in 1988, as a three-phased evolution. Phase I was to set in place all components of the company, improve the inherited products, strengthen customer support and establish a worldwide infrastructure. Phase II was to fuel growth of the company’s product line through the acquisition of new technology and to develop a clear statement of corporate strategy, image and ideals. Phase III was to develop core technologies and architectures, and establish a Claris identity.
As part of this corporate strategy, we formed a small interface design team with the charter of developing a whole product identity for Claris products (Figure 1). From 1988 to 1992, we worked together with the engineering and marketing organizations to identify, design and refine an integrated product design strategy for all Claris applications. Our design strategy was a two stage process. In Stage I we examined a broad range of identity concepts for the Claris portfolio. In Stage II we designed unique and unified interface solutions for specific Claris core technologies. This paper discusses this staged evolution of a software identity from our perspective as the original Claris Interface Design Team.
The Corporate Mission
Claris products appeal to a wide variety of general purpose and advanced users and offer broad-based benefits and solutions for generalized professional and personal productivity needs. Typical uses of Claris applications include design and drawing functions of desktop publishing, presentation graphics, word processing and document management, flat-file database management, and project management.
In 1989, Claris’ mission statement was to design, develop, acquire, publish and support a portfolio of innovative, accessible, graphics-based software applications with broad market opportunity in the business, education, and scientific engineering markets. The original objectives of the corporation included: becoming a leading Apple software company worldwide; maintaining number 1 or 2 market share in target segments; building customer loyalty among the installed base through superior products, ongoing dialogue and outstanding support; and establishing a reputation for technology excellence and leadership. Claris’ product strategy was to expand its portfolio through enhancements to its existing product line, acquisitions of innovative products and technologies, and internal development of new products and core technologies.
The Interface Design Team Mission and Strategy
As the Claris Interface Design Team we had a clear and comprehensive role in Claris’ product strategy. Our overriding design objective was to implement the values and ideals behind the Claris mission, namely clarity, distinctiveness, cohesiveness and focus throughout the visual interface of the software portfolio.
We introduced principles and processes of design to Claris’ software engineering organization. Through seminars, user studies, advanced interface technology exploration and practical, iterative product design and evaluation, our goal was to establish a sense of interface awareness and identity at Claris. We strove to balance design for implementation with design for needs. We sought to combine innovation with purpose in the design of a unique and unified cross-application interface strategy. Our goal was not to develop least-common-denominator approaches to application consistency but instead, to design scalable solutions that blended the unique needs of a product with the unified needs of cross-product cohesiveness.
Stage I of our work involved taking a fresh look at the interface opportunities for Claris products. Although one of Claris’ objectives was to optimize for the Macintosh platform, we felt that it was critical for Claris to explore new, innovative visual metaphors. This stage of design work was deliberately unencumbered by Macintosh interface guidelines, by implementation constraints and by existing expectations of what a portfolio software company could accomplish. We held company-wide seminars to discuss Claris’ corporate values and goals. We examined how Claris could distinguish itself from its parent company, Apple computer. We surveyed Claris’ customers, especially those users of more than one Claris product, and understood their needs.
We envisioned Claris as a company committed to the development of powerful, elegant, focused application software. We wanted to differentiate Claris applications from the overly complex and cluttered products of the competitors. Claris software products would be aesthetically pleasing in form and graceful in function. We imagined a suite of products that worked effortlessly together, that allowed users to transfer their skills from one to the other, and that could be easily customized to suit an individual’s preferences. We wanted a synergy across applications - greater than that provided by the Macintosh desktop alone.
Stage II of our design strategy involved taking a detailed look at Claris’ product interfaces. While the first stage of design work focused on the overall Claris interface identity, this second stage focused on the detailed interface identity embodied in specific core features of Claris applications. In addition to the design of an integrated set of interaction mechanisms, within and across the product line, we also explored ways to take the traditional elements of Claris’ corporate identity, embodied in the package and print design, and extend them to the screen. We envisioned a new standard in integrated software design excellence.
We knew we must adopt an evolutionary approach to developing and implementing a detailed software identity. Not all products could be revised and shipped simultaneously and Claris was still expanding its product line with new acquisitions and development. Specific interface solutions needed to endure and adapt over time. Figure 2 illustrates the key components of the Claris software portfolio in 1992. The first products we designed were graphics and database applications, MacDraw Pro and FileMaker Pro respectively. MacWrite Pro, a significant upgrade from Apple’s original MacWrite, and a spreadsheet solution, Claris Resolve, came next. ClarisWorks 2.0, an integrated software package, and FileMaker Pro for Microsoft Windows were delivered in 1993.
Stage I: Conceptual Designs for a Claris Identity
The goal of Stage I’s conceptual design work was not to refine all details of the interaction and functionality, but to visualize a broad range of overall interpretations of the Claris identity. Figures 3-6 illustrate some of the future directions we explored for Claris’ overall software identity. Some design concepts use techniques of transparency to reflect the corporate goal of clarity and focus. Other design ideas reflect the informal and friendly appeal of Claris products by using loose, sketchy visual techniques.
We explored ways to visualize Claris’ vision of a tightly integrated product suite. Figure 3 illustrates one of these design approaches through the concept of a Claris Desktop. We envisioned a transparent Claris Desktop layer on top of the Macintosh Finder. This layered working environment clearly differentiated the Claris product portfolio from other applications. The intention was to provide users of more than one Claris product with easy access to the entire suite of Claris applications and to show links and connections between Claris documents. We discovered that using transparency can reveal the structure of underlying data and controls while still allowing the user to interact with the most important information. Note how the transparent design still allows a user to interact with the frontmost window, but provides additional information about the underlying desktop at the same time. Figure 4 illustrates a sketchy, loose approach to the window design. This design strategy conveys feelings of informality and accessibility and fits in well with the overall design scheme of Claris’ packaging and print materials (see Figure 20 and the Unified Print Identity section).
A less comprehensive approach to visualizing Claris’ integrated product vision is illustrated in Figure 5. This design concept centers around a Claris tool palette which provides access to Claris’ core technologies such as Spell Checking and Help. This contextual tool palette is accessible from all Claris applications and illustrates the advantages of transparent visual techniques.
Figure 6 is another design sketch using the concept of layers to provide access to Claris’ core technologies which attach to documents via handles. The intention of these direct manipulation controls was to allow a user to control the layering of information within their document.
These transparent and sketchy design techniques proved technically difficult to implement but served as inspiration for the more practical application of color and layering interfaces in the Claris applications. Because simplicity, clarity and focus were important components of the Claris identity, we explored ways of adapting the ideas behind these transparent, sketchy concepts to more standard Macintosh interface mechanisms.
Stage II: Interface Details of a Claris Identity
While the first stage of design work focused on broad visualizations of the Claris interface identity, the second stage focused on a more detailed interface identity by designing unique and consistent interfaces for Claris’ core technologies. The goal was to design innovative but practical Macintosh solutions for common features of Claris applications. Our objective was not just to pay lip service to consistency, but to develop a real brand recognition across Claris applications by designing scalable, modular, reusable interfaces. Our challenge was to implement this strategy across a diverse and evolving product line.
The detailed interface development of these common features involved an iterative process of designing overall window functions and direct manipulation controls, organizing commands into menus and tools, and communicating information sequences through dialog boxes and palettes. Our intention was to create a Claris style of clarity and consistency through the careful design of windows, palettes and dialog interface mechanisms.
As a first step, we identified specific functions that were central to at least two Claris products. A partial list of core technologies that we designed included: interactive help, spell checking, frames, file translation, preferences, find/change, object scaling, numeric formats, document setup, graphic attributes (pen and fill color, pattern and weight), text attributes and custom styles, paragraph functions, chart creation and attributes, and table behavior and functions. In the following section we illustrate one example of this Stage II design effort by discussing the design of a core interface for color (Figures 7-17).
The Claris Color Interface
The original color interfaces that we had to work with are shown in Figures 7 and 8. Figure 7 illustrates the color interface for the presentation graphics application, MacDraw II and Figure 8 illustrates the lack of any color interface in the database application FileMaker II. Significant color functionality was to be added to the new versions of these applications, MacDraw Pro and FileMaker Pro. The depth of the new color features depended on the user requirements for each product. MacDraw Pro required the addition of extensive color functionality, including the ability to view and edit multiple full color palettes, blend and mix custom colors, and create gradients. FileMaker Pro provided only the ability to select colors from an 81 color palette. Extensive iteration, evaluation, testing and refinement design processes were required before we arrived at the final solution. The final color interfaces of MacDraw Pro and FileMaker Pro are discussed in this section and are shown in Figures 9-14. The implementation of the color interface in Claris Resolve (a spreadsheet application) and MacWrite Pro (a document processing application) are shown in Figures 15-17.
The color interface for MacDraw Pro needed to be accessible and easy-to-learn for novice users and yet sophisticated and powerful enough for experienced graphics users. Our goal was to maintain the simplicity and familiarity of the original MacDraw II application interface while adding extensive functionality, such as the powerful new color, pattern and gradient features. We accomplished this by layering access to the color functionality. By using techniques of progressive disclosure we designed an interface that revealed the complexities of the more powerful color functionality only when the user chose to access it.
At the highest document level of the interface, the user can select colors from the popup palette of 256 system colors (Figure 9). Special emphasis was given to designing an arrangement of these colors that would be usable by both novice and expert users. Rather than simply ordering the spectrum of colors mathematically, like the default system palette from Apple is designed, we arranged these colors along a hue and value scale that was more easily understood and more aesthetically appealing. The often-used black, white and gray colors were designed to be in close proximity to each other and clearly distinct from the rest of the color spectrum. This clear, focused arrangement of the 256 color palette in MacDraw Pro provided existing MacDraw II users, as well as new users, with a simple, accessible mechanism for selecting and applying color to the document.
A similar, but not identical, interface for color was designed for FileMaker Pro. As shown in Figure 14, a scaled down version of the MacDraw Pro color palette was designed for FileMaker Pro. This color palette opened from the same popup icon and was organized consistently with MacDraw Pro. But the FileMaker Pro palette was simpler for less sophisticated graphics users.
Figures 10-12 illustrate the more sophisticated color functionality that was layered into the MacDraw Pro interface. A user could tear off the color palette from the color popup making it always available. Once torn off, the user could show and hide additional window controls for resizing and scrolling the palette of colors. We designed several interface mechanisms for opening new palettes of colors, editing the palette content and arrangement, and viewing the palette in different ways. The palette could be modified with direct manipulation techniques such as dragging and dropping selected color swatches to different locations in the palette or to the “favorites bar” at the top of the document window. Another interface technique that proved successful in our design process, as well as in testing with users, was to implement a palette menu bar (Figure 10). This menu bar was clearly associated with only the palette, and contained commands that were familiar to users. For example, users could cut and paste selected colors or could view the color palette “By Large Icon” (an identical size and arrangement to the FileMaker Pro palette) or “By Name” (Figure 11).
Additional color editing functionality was designed for MacDraw Pro. By double-clicking on a color in the palette (or by selecting a menu command), the Color Editor dialog box opened (Figure 12). This dialog again shows how the more complex functionality of color editing was progressively disclosed to the user only when desired. The user was not presented, by default, with a large, cluttered, and complex dialog for selecting colors using numeric input. The Color Editor dialog illustrates a more usable design approach to editing the various color axes (hue, saturation, value). The slider controls clearly show what these color axes represent and provide the user with direct visual feedback as they are manipulated.
The basic interaction scheme of a floating attribute palette and editor dialog was used to design the pattern and gradient interfaces. Figure 13 shows a consistent and familiar gradient palette, gradient editor and pattern palette.
The design of the color palette was a unique Claris interface trademark that became easily recognizable, implementable and usable between all Claris applications. Figures 15 illustrates the original color interface for the spreadsheet technology that later became Claris Resolve (shown in Figure 16). Figure 17 illustrates the color interface in MacWrite Pro. This design strategy exemplifies how a specific interface need not be exactly consistent between applications, but can be designed in a scalable way to accommodate the needs of different products.
Claris Window Interfaces
The sketchy and transparent visual concepts designed in Stage I departed too dramatically from Macintosh standards and proved too difficult to implement. In this stage of work we explored ways to still convey some of these identity concepts by using color to layer and differentiate areas of the screen. In implementing Claris’ identity we paid special attention to the design of visually refined and elegant control areas. The windows were not overloaded with too many controls, buttons and tools were visually straightforward and consistent, and color was used subtly and consistently. MacWrite Pro, shown in Figure 18, best illustrates our practical use of color to clarify and focus attention on different parts of the interface.
A Unified Print and Screen Identity
In addition to the conceptual exploration of the Claris identity in Stage I and the detailed design implementation of the Claris identity in Stage II, we also investigated ways of adapting the traditional elements of Claris’ print identity, embodied best in the package design, to the screen.
In the early 1990’s, Claris revised its packaging strategy from the original business-oriented, geometric appearance to a simple, clean look. An informal graphic symbol, and background color swash, were designed for each Claris product. The blue Claris logo remained in the upper left corner of the packaging. Figure 19 illustrates the company’s original packaging and Figure 20 illustrates Claris’ new corporate identity direction. This refreshing, updated appearance better represented Claris’ commitment to clarity, focus and simplicity in its product portfolio. Our challenge was to complete this identity strategy by implementing these new print elements throughout the interface. Figures 21-26 illustrate how Claris’ print identity was translated to a suite of desktop icons, including the application, document and core technology icons.
There were many challenges to developing a desktop icon strategy that was based on a print-oriented design. We needed to develop a workable onscreen version, using very few pixels (32x32 and 16x16,) that conveyed the same loose feel that the print symbol represented. We were necessarily working with hardware constraints, including the lower resolution of CRT screens and limited color and screen type possibilities. We also had the requirement of producing consistent and distinguishable black & white versions of the icons. Our icon strategy needed to be flexible and comprehensive so that a wide range of icon types would work within the design framework in the future.
We began this icon identity project by examining how the four elements of each products’ print identity, namely, the blue Claris logo, the product symbol, the product color and the product name, might be adapted to a 32x32 pixel application icon. Figure 21 illustrates the original icons, with their structured and traditional form, and an exploration of alternative adaptations of the four print identity elements. After an iterative design process (Figures 22 and 23), we concluded that it was indeed possible to successfully represent a loose symbol appearance within the constraints of a screen design.
The next step in our icon strategy was to explore how the other icons in the desktop suite, namely the document, stationery and core technology icons, would fit into the basic scheme set by the application icon design. Figure 24 illustrates three approaches. The first approach maintains the structured symbol of the original icons, but adds a loose color swash to the symbol. This was not the best alternative because the style of the document and application icons differed greatly and the document icon would not maintain its identity with the application icon in 2-bit mode when the color swash was lost. The second approach involved taking the original document appearance but giving it a freeform style. We felt this alternative was not flexible enough to accommodate different types of document icons and, again, did not maintain a consistent identity with the application icons. A third approach was to implement the same loose symbol and color that was designed for the application icon in the document and stationery icons. The document and stationery icons each used their standard icon framework (for example, a dog-eared document shape) and so were easily differentiated from the application shape. A consistent identity between the key members of the icon family was clear.
For the icons representing core technologies, such as help and spell checking, we narrowed the design alternatives down to two choices (Figure 24). The first approach maintained a loose feel for the core icons but used a blue color swash to match the Claris logo identity. For a second alternative, we designed the core icons to have a structured appearance. We felt that these core icons, which were usually installed automatically by the application and which were rarely manipulated directly by the user, were best represented by a more formal, structured icon shape. Because there was no accompanying print identity symbol for the core icons there was no advantage in maintaining a consistent onscreen symbol.
Our final design for the Claris family of desktop icons is shown in Figure 25. Claris’ print identity was successfully carried out through the entire product portfolio’s desktop icon suite. The informality of the print identity was incorporated elsewhere as well. The introductory splash screen and online help both make use of the product identity elements (Figure 26).
A Cross-Product, Cross-Platform Identity
Claris’ corporate direction evolved in 1991 to include the development of applications for Microsoft Windows. FileMaker Pro for Windows shipped in 1993 and is shown in Figure 27. An exploratory concept for a Claris drawing product for Windows is shown in Figure 28. These images illustrate how the Claris visual identity was adapted to other operating systems. Our cross-platform interface strategy involved designing an appropriate balance between the unique, distinguishing characteristics of Claris’ Macintosh products and the standards of a different operating system.
For FileMaker Pro, we were able to maintain its distinctive core interface and still integrate the three-dimensional style of Microsoft Windows into the overall visual design. In order to make the application familiar to Windows users, interaction modifications were necessary. Basic interface changes included: application-document model revisions; menu reorganizations; popup menu and other control behavioral changes; dialog box layouts; and color palette and keyboard interface modifications.
The interface design of Claris’ core technologies were platform-independent solutions, making it possible for Claris’ software identity to be recognizable across different operating system environments.
Over the course of two years the Claris software identity was designed and implemented throughout the Claris product portfolio. A diverse set of software applications, including FileMaker Pro, MacDraw Pro, Claris Resolve and MacWrite Pro, now had a uniquely recognizable Claris interaction identity. The culmination of our identity work was in the design of the integrated software product, ClarisWorks (Figure 29).
ClarisWorks contains word processing, database, spreadsheet, graphics, painting and communication modules. It is a complete application solution for novice, general-purpose users and so these integrated modules contain powerful, but not high-end or specialized, feature sets. ClarisWorks users could easily upgrade to the more sophisticated “Pro” line of Claris applications if their needs increased. The interface design of ClarisWorks was relatively straightforward because of the completeness of the Claris interface identity throughout the individual applications. The interface for word processing features, such as the ruler function and appearance, character attributes, spelling and find/change, were already designed and tested with users and so were easily integrated into all the ClarisWorks modules. The graphing, spreadsheet and table functions were easily adapted from Claris Resolve. The color and pattern interfaces, already implemented in all other Claris products, fell easily into place. The visual identity of windows, dialogs and tool palettes was already well established and did not require significant redesign when implemented in ClarisWorks. Because of the reusability of the Claris interface, development costs in all areas (interface design, engineering, documentation, online help and technical support) were greatly reduced. The tightly integrated interface for ClarisWorks has contributed to that product’s success and represents the realization of our goal to develop a clear, focused identity for Claris’ product suite.
Over the past three years we were successful at visualizing broad identities for Claris software and then adapting and applying these directions to specific core technologies. Although the product portfolio is not perfectly unified, we were able to achieve a great deal of cross-product and cross-platform integration throughout the interface. Claris products are now recognized for their high standard of software design excellence. Both the company, and its customers, have realized the tangible benefits of leveraging their experience across applications. In the future, Claris’ software identity will constantly evolve as new technologies and opportunities influence the direction of the company, and its products.
Acknowledgements
We would like to thank Yogen Dalal for his vision and support of our work at Claris; IDEO for their consultation during the initial conceptual stage of our design effort; Bob Baxley for his contributions to the ClarisWorks design; and the Claris product development teams for their input and feedback throughout the design process.
