|
In 1981, Steve Jobs convinced German firm Frog Design to set up shop in Silicon Valley and design the first Macintosh case. Today, Frog has taken its product design online, having built successful interfaces for the likes of SAP and Dell.
March 02, 2002
URL:http://www.drdobbs.com/form-function-emotion/184414521
For Frog Design, the German firm that designed the Macintosh case for Apple, the gray space is the convergence of business, engineering, and interaction. When focusing on a product's usability, these areas can't be isolated. "Too many design studios started to fail in 1999 because they had convergent problems and were dealing with them in segmented ways," says Rolston, who launched Frog's digital media group in 1994. "Studios like Organic and Razorfish screwed themselves," he adds, bluntly. "They had monkeys doing Photoshop work who did not understand the business problems. They were handed usability designs where the usability designer didn't care about how [the product] looked."
Founded in 1969 as Esslinger Design by product designer Hartmut Esslinger, Frog branched out to the United States from Germany in the 1980s, and moved into brand design. Frog's philosophy calls on the company's employees to regard product, brand, and user interface design as "inextricably linked."
In the Digital Media Group's early days, Frog had its share of straightforward Web design projects. But the group's standards and practices turned a sharp corner in 1998 when SAP, the world's largest enterprise software company, hired Frog to help improve the look and usability of R/3, SAP's enterprise resource planning suite.
"With SAP," notes Rolston, "we cut our teeth on developing a methodology for defining design solutions at a less literal level, and at a more abstract, procedural series of layers." In effect, prompted by the practices of software engineers, the Digital Media Group began to objectify the design process. To explain, Rolston refers to the levels of abstraction that programming languages have gained over the years. "When I was a kid playing with computers, if you wanted to program the Commodore 64, you could write in Basic or you could write in microcode. There was no level of abstraction there," says Rolston. "Nowadays, even the OS is made up of several layers of abstraction. All of it is meant to further remove us from having to be more detailed than we need to be at any particular time."
In programming scenarios, it's often more efficient for developers to talk about objects than about specific lines of code that represent an idea. The group at Frog feels that the same is true of Web design. Using the example of the graphic artist who will "fuss and fuss over the right shade of blue" while failing to see the bigger picture, Rolston says his team approaches things from a bird's eye view to create a kind of meta-design in layers before delving into production. The goal is to find a common taxonomy to discuss both problems and solutions. "Too many design conversations happen without an agreed upon language," says Rolston. "[We need] a taxonomy in the sense that letters make words and words make sentences and sentences make paragraphs. There's layering even inside of that—of different meaning and formality—and all of that is agreed upon before you've even written a word."
Layers of abstraction don't necessarily mean that software engineers are always efficient. In most cases, standard control libraries (like collections of sliders, trees, lists, and tables) provide developers and designers with pre-built widgets that save time when building applications. With SAP, however, the developers had a non-standard control library overrun with duplicate controls. Frog immediately went to work producing a smaller list of uniform controls that SAP's developers could use for each problem. "If they had 20 table controls, we reduced it to one," says Rolston. The group defined a smaller, universal library of widgets from which application interfaces could be built. Each widget now has its own set of rules for how it can be used and displayed. For example, if a button has a label, the rules define where next to the button the label will appear.
As with any borrowed idea, a bit of adaptation and refinement was needed. For example, the group quickly realized that control is a word with mixed meanings. Some Web site elements do more than control a function—they take on properties and functions based on their content, or on surrounding elements. To better explain how Web pages work, Frog adopted an atom and molecule metaphor. The metaphor defines a Web page as a series of molecules. Molecules are groups of elements called atoms, like buttons and labels and textfields. The molecules adhere to global branding guidelines that define attributes like color, type, voice, and content.
According to Frog's system, content has its own layers. For example, a page could have business content and a second layer of product content with its own voice. Likewise, visual content, such as photography and charts, will have styles that relate specifically to it.
Figure 1 shows the SAP R/3 interface. Launched in 1999, R/3's new look was a big hit with customers, many of whom were pleasantly surprised by the shift from a black and white interface to one with full color.
Another design concept of which the Digital Media Group is fond, is that of
DNA—a common element that can move between media and be used in some
layers, while being ignored in others. When outlining a design plan for a client,
Rolston says that the group asks itself, "Is there a DNA that's
shared between the branding definitions and the content and outside media?"
That outside media could be advertisements, press kits, or other materials.
The willingness to look beyond the Web site when identifying DNA is an example
of why Frog considers itself to be a convergent firm—one that tailors
its designs to be worn by many different forms of media.
With the Digital Media Group's next major client, Dell, the DNA took
a general and a specific form. Generally, Dell's design called for the
use of blue on all pages. Specifically, the group decided to include black and
white photos, strips of blue, and small triangles on appropriate pages.
For Frog, Dell was a new testing ground for the standards and practices Frog
had instituted with SAP. But the group knew this wouldn't be a simple
process. Historically, agency relationships with Dell had ended shortly after
they began. Agencies that offered traditional homepages lacked a "whole
universe" context and failed to show Dell design solutions that could
scale to several sites and media. "Agencies would come in, say great
things, do their work, give [Dell] a bunch of Photoshop comps," says
Rolston. "Dell would beat up the comps with their links, the agency would
get fired, and the next one would come in."
For Rolston and the team, the philosophy at Dell differed dauntingly from SAP.
"With SAP, the means are deeply part of everything," says Rolston.
"With Dell, the ends are more important. Their key focus is the business
problem. They aren't into the methodology of putting together their Web
site. To them, it's problematic."
One of the first things Frog did with its new client was to step back and survey
the Dell site (see Figure 2). Frog defined several concepts that anyone on the
project could use to refer to the structure and the execution of the Web site.
The goal was to help Dell focus its discussions about the functions of the site.
The group watched as Dell adopted the language and began to use it for Dell's
own independent design discussions. "We really crossed thresholds in
Spring 2000 with Dell when we had successfully described the landscape of how
we would work together, as opposed to being clever here and clever there. When
they were using our terms of molecule and atom, we brought them into the concept
of design interaction and process with a group," says Rolston. He notes
that this interaction methodology should be shared freely. Design firms are
rarely known for sharing the entire process with clients. According to Rolston,
firms would be more productive with their clients "if you were just to
spill the beans about how you do it."
Over the past four years, Frog and Dell have worked out a process that allows
for continual refinements. This, says Rolston, is where it gets interesting.
"Each time we've gone through Dell's site, we've
more successfully developed and tested alternate ways for people to buy PCs,"
says Rolston. Given that Dell reports daily sales of $55 million, and aside
from Amazon, is considered the prime example of e-commerce at its best, why
would the company still worry over the minutiae of the online buying experience?
The reason is that Dell has reached a saturation point and now strives to move
beyond it. "We got to the farther edge of customer behavior,"
says Rolston. "We're trying to attract grandma to buy online.
We're trying to do things in terms of personalization. Dell is way behind
Amazon in terms of personalization.
To meet the challenge of finessing Dell's already efficient online buying
process, Frog made a bold move and began testing with live pages. "We've
put up alternate designs on the site," says Rolston. "We put them
up in real time and watched thousands of people try out two different, competing
methods to find out very specifically which one works best. We got hard core
testing results."
To test new features, the group researches and develops a model that predicts
how users will respond to a particular interaction or task. "In the real
world, though, there is rarely one best answer, so we try and reduce it to the
two or three best ideas," says Rolston. The ideas are added to Dell's
proprietary FLEX content management system (which pairs XML and XSL to define
and build pages). Each idea is turned into an independent, full-scale site.
Then, Dell randomly switches between these options with visiting customers over
a test phase that lasts between one and two weeks. The results are tallied via
sales numbers, click-through data, and questionnaire responses. After determining
which site works best, Dell shuts off the other sites.
Live testing can be dangerous if a feature fails or prohibits a customer from
making a purchase. But that's also what makes live testing so powerful.
The features that work will increase purchases or decrease shopping time. "This
was the most satisfying way to test the designs, because there is no lie,"
says Rolston. "The real customers are putting their credit card numbers
down." Although Rolston wouldn't go into specifics about testing
tools, he notes that they are all custom built. Dell measures traffic and purchasing
activity with its own measurement system, and the data is exported to Microsoft
Excel format where it can be viewed. To be sure of the efficacy of the testing,
Frog's and Dell's usability team worked together with a third
party usability firm to create the testing conditions. More traditional usability
tests covered the home and business segments, with separate paths for each segment.
Twenty-four users were tested over four days in one-on-one think-aloud usability
tests.
With both SAP and Dell, the Digital Media Group at Frog Design went beyond
traditional design practices. Rather than focus on getting the right color or
pushing the right pixel, it created a process that closely involved the client.
With the correct language, all sides worked together to build some of the world's
most notable Web applications.
One of the reasons for Frog's success in a difficult market is its willingness
to borrow and build on the languages, processes, and theories of other disciplines,
as it did from the software development industry. This borrowing and building
was instilled in the company by founder Hartmut Esslinger. Esslinger liked to
modify the well known design dictate "form follows function" by
saying that "form follows emotion," meaning that there is more
to design than pure functionality.
Jennie is a freelance technology writer and former Web developer. She welcomes
your feedback at [email protected].
Terms of Service | Privacy Statement | Copyright © 2024 UBM Tech, All rights reserved.
The Dell Landscape
Gray Space
