If you’re designing a user interface for the screen or a three-story home, you have a process. The process itself is more important than the product. Without the process, there is no product.

One of my favorite films is The Spanish Prisoner (1997), written and directed by David Mamet, starring Steve Martin as a con artist. The film is about a simple yet intelligent man who falls victim to his own vanity, and allows himself to be conned by Martin’s character. All we know about the protagonist is that he is some kind of engineer in the employ of some kind of technology company, and that he has created some earth-shattering idea, referred to only as “the process.” It’s never explained or defined, but it’s spoken of as if it were a cure for hunger or poverty. It becomes the object of desire.

Yes I’m a film buff. Okay, now back to user interface design…

A “process” is one of those defined-undefined things in every part of our day. You have a process when you get ready for work in the morning or when you do your laundry. A successful web project must have a detailed process for it to succeed.

Our Process

• Step 1 Discovery
• Step 2 Definition
• Step 3 Design
• Step 4 Development
• Step 5 Delivery

Step 1: Discovery

Will a VW Golf suit your needs, or are you really dreaming of a Porsche?
The Discovery conversation lets the client hash out their ideas in the presence of someone who can give logical, professional advice. Often, the client will discover that an idea or concept they’ve been holding onto is the very thing standing in the way of a successful solution. The agency’s job is to listen, and to help them create an overall message and theme, while always supporting the end-user.

The client must be ready to hear “No, that won’t work,” and the agency must be ready to explain why. That Porsche might look awesome sitting in your driveway, but when it’s time to load up the whole family (and the dog) for a trip to the beach, it might prove to be the wrong choice.

Step 2: Definition

Don’t forget the cup holders
The Definition phase can be seen as the blueprints. Or, to keep using our car buying analogy, it’s the make, the model, and the entire list of mechanical specs & options. But even still a little more complex. Ideally, the Definition process will involve several face-to-face meetings. In our new digital, virtual world, perhaps that means phone calls, Webinars, GotoMeetings, etc.

This phase will include things like content outlines, wireframes and storyboards. Stay tuned for another blog entry, coming soon, detailing and explaining all the different tools and documents used on a web project. What’s a wireframe, and how is that different from a storyboard? etc., etc.

Step 3: Design

If this was your Step 1, go directly to jail. Do not pass GO.
The client has an ugly, old site. They want it replaced as soon as possible. The first thing on their mind is usually “make it look better.” This is, obviously, an important goal. But they’re less likely to consider that the site may be failing in other ways specific to the individual user experience. Does your online catalog navigate well? If not, is there a technical reason, or is it because the information flow has been poorly mapped out?

If you’ve skipped or glossed over your Discovery & Definition, the most talented visual designer in the world won’t be able to save your site from the same failures it suffered before the re-design. Your new Porsche might look nice and shiny cruising down the road, but what if every time you adjusted the volume on the radio, the wipers came on? Little failures of “logic” on a site are not usually due to programming, but how the navigation was mapped out, before it was designed.

4. Development

Making it all work
This is the “geek” phase. This is where our development team writes lines and lines of weird looking text that magically turns into cool stuff on a screen. Again, the topic of development is a post on its own. Multiple posts. There are oodles of sites and blogs and message boards and online communities devoted to coding standards and practices.

The most important thing to know about the development process, if you’re on the client side: Every little thing in the first three steps has the potential to turn into deadline-killing mayhem in this step. Ask lots of questions before you get here. Make the agency explain anything you don’t understand, and don’t be afraid to make them justify a decision that seems odd to you. There are a lot of variables in this phase, so communication is key.

5. Delivery

Pass out the cigars
There will always be some final pre-launch de-bugging and testing. Depending on the size of your project, you may launch what’s called a “Beta” version, available to a select crowd of outside participants, where you’ll put it through user-testing and analysis. With most average-sized projects on a tight deadline, you’ll just test and de-bug for a while with the agency and your internal team together, make some final edits, and make it live.

In the end of The Spanish Prisoner, The protagonist navigates his way through an edge-of-your-seat chain of events, struggling to outwit the con artists and escape death. In other words, a pretty standard David Mamet script. I won’t give the ending away. I highly recommend it, if you haven’t seen it. The morale of the story? Always respect the process. And don’t be a sucker if Steve Martin tries to befriend you on a tropical island. But that’s probably never going to happen. So never mind. Just update your website every now and then, and don’t try to cut corners. You’ll pay for it in the end. Maybe with a tranquilizer dart in the neck. Oops, I almost gave away the ending…