Profile: Method
Sam McMillan
Spend any time talking with the designers and information architects at San Francisco-based Method and one thing becomes immediately clear: these guys chose their name correctly. At Method, it's all about method.
There's a firm belief that the right process, combined with talented people will yield exceptional results. So far, it has. And it works across a range of clients who span a spectrum of disciplines: like the rigorous six months of UI work for trip.com, that resulted in binders of analysis, findings and UI proposals; the crash-and-burn, month-and-a-half spent designing an interactive widget for add-a-sound application pulsesonifier.com; the sexy, high-gloss site created for Gucci.com; or the new, improved and visually-enriched charts and graphs for Quicken 2000.
Design Interact Web Site
What you see at Method is the practice of information architecture at a rarified level, an attention to structure and functionality, combined with well thought-out design. These are not separate aspects at Method. "It's all one function," says Ted Booth, director of interface design. "At Method our goal is to eliminate any notion of 'the handoff.'"
The Method home page. Read this, it's good for you.
The Method home page is simple and direct. Maybe even severe. Instead of dazzling visitors with technology, it methodically presents Method's case with white type on a black background, and lots of it. It demands that visitors slow-down and read.
"We want people to look at the work we do for our clients," says managing partner Patrick Newbery, then visit our clients' sites, not our home page." The subliminal message? According to Newbery it's, "We're too busy doing client work to work on our home page."
Verb. Search engine technology.
Using algorithms that enable users to specify search criteria such as "More like this" and "Less like that," Verb search engine technology places results in context.
The design for Verb's site began when Method began creating the client's identity and logo mark. Booth remembers, "We had to first ask, 'What does the brand stand for?'" To answer that question Method conducted a competitive audit of other brands, looking at metrics such as brand aspect, visual style, nomenclature and interactive model. The result was a "2-by-2" matrix that placed Verb among its competition.
Visual designers then comped a number of rough sketches laying out elements of the site and then asked themselves how they could map back to the goals for the brand. Since it suggested "an idea moving forward," the designers decided to use a colon as part of the Verb identity.
The Verb corporate site was done in Flash. Graphics suggest speed and motion, without getting in the way of pertinent information and the content is updated through a text file using Generator.
Style meets substance at Gucci.com.
Designed by Method's six-member creative team lead by senior designer/creative director Olivier Chetelat, the Gucci site launched in October 2001.
It could still be Method's most consumer-oriented project. Chetelat was conscious of the need to trade-off speed and usability for a rich consumer experience. Unlike eBay or Amazon, he says, which "just need to work," the Gucci site had to work and look goodóeven on slower, consumer connections. To ensure that the interface would hold-up, ChÈtelat designed it using a three-year-old computer and a thousand-color monitor. "It forced me to think like a home user," he says.
It's all about the brand.
Because Gucci is a prestigious name with an established image, the last thing Method wanted to do was reinvent the brand online. Instead Chetelat says, "We wanted to stay as close as possible to their message - and provide an extension of the brand for another medium."
Using the sumptuous photography provided by Gucci, Method designed a site that frames Gucci products as if they're on a runway. It's a theatrical experience, much like a fashion show. Launch a window and a black background enlarges to fill the screen. Chetelat laughs, "It steals the desktop real estate."
Each section provides a different visual mechanism to access products. Some sections reveal products by sliding them into place. On other screens, a dark scrim pulls back like a curtain to reveal the clothing. In Shoes, products appear in an arrangement Chetelat jokingly calls "Hollywood Squares."
Transitions are used to underscore the theatricality of the Gucci site; they take the viewer from screen-to-screen slowly, in a fluid, sensual, experience. The smooth fades, the rollover highlights that spotlight the runway photography and the minimal navigation all support the brandóand underscore the experience as luxury.
It's a site that changes with the seasons.
To help Gucci update its site with each new collection, Method built a content management system. Using a dedicated computer, the client can publish images, text and in half-a-day, according to Chetelat, "they can have a new campaign."
It comes in handy when Gucci releases its newest crop of advertising imagery to the press. As part of its Gucci Now ad campaign the visuals are "time released" over the course of the season. Using the content management system, Gucci can release new images on the site, so that when the images hit the media, they appear simultaneously on the site. It's fashion at its freshest.
ConsumerReview.com: so little time, so many products.
Consumer Review is a portal for newcomers about to spend a lot of money on gadgets they know nothing about. Whether it's a computer, a digital camera or a mountain bike, the site's designed to launch people into their channel of interest.
When the folks at Consumer Review first approached Method, there were nineteen separate sites housed under the company's corporate umbrella. The master plan, according to Booth, was to design a single information architecture for the sites, each with its own personality, hard core constituency and corporate identity. Each site would stand on its own, yet still be part of the Consumer Review family.
Method began with an identity program for Consumer Review and their nineteen sites. They conducted user interviews, storyboarded scenarios, sketched paper prototypes and ultimately presented a binder of high-level findings that indicated a variety of creative directions that the company could pursue.
The Method design gave each site the same basic structure, type treatment, grid structure and icon placement; to provide distinct visual personalities for the sites, Method varied the type colors, the background elements and imagery. Colors for each site are pulled from the identity palettes but it's the member contributions that give the sites their distinct personalities.
Pulse Sonifier: Sounds abound.
Pulse Sonifier is a whizzy Internet application that enables developers to add sound to their sites. If you can drag-and-drop (and you're running IE 5 on Windows), you can use the library of stock sounds supplied by Pulse Sonifier to enliven a site.
Method began with a working prototype supplied by Pulse Sonifier's engineers. "Our goal," Ted Booth says, "was to integrate and create a holistic consumer experience." There were also nuts-and-bolts questions like "What is it?" and "How do I use it?" that needed to be answered.
The answer is found in a floating palette - that's part tool, part user guide- on the Pulse Sonifier site. The simple steps required to preview, publish, or go to the next page are indicated by numbers and the big rubbery buttons are friendly and demystify the functionality. Once a visitor clicks into the environment, the drag-and-drop functionality becomes a dynamic, fun interchange for the user. But, according to Booth, under the hood, the site's "A marvel of DHTML and Javascript."
