There are specific communication tools used during a web project. There is a language involved, and the terms often get mixed up and misused. We’ll help you sort them out a bit.

This is a continuation my previous article, The Process, addressing the specific steps taken during a web project. Now we’ll get into the tools used during that process. This is not meant to imply a golden rule. The tools used, and the way they’re used, will vary based on the project scope, the budget, and the agency’s practices. These are just some general helpful tips and explanations.

Step 1: Discovery: Tools Used

You’ll start by passing Word documents, PDFs and emails back-and-forth. You’ll be asked to fill out Creative Discovery, SEO Discovery and Technical Discovery documents. Remember, the agency doesn’t live with your company the way you do. Educate them, so they can give you the best end product. The agency will ask you to provide marketing materials, brochures, internal presentations & communications that might help explain your business goals, and they’ll ask you to start collecting assets that will eventually be used on the site, such as product photos, logo artwork, etc.

Step 2: Definition: Tools Used

There are many different project Definition tools out there, but they all have the same basic purpose: to give your agency the blueprints necessary to build your new home, to use another analogy.

Site Outline
This is an initial indication of many pages the site will have. It doesn’t get into navigation yet. It’s really just about NOT leaving anything out. It’s usually delivered in a Word document that you can edit, update, and pass back and forth. This can later be expanded into a Site Content Document or, as some like to call it, a Content Deck. After you complete the next few steps, you can come back to this document and paste in the copy for each page. You can make notes like “Image abcd.jpg goes on this page.” The next few steps (Site Architecture, Wireframe, etc.) will really tell you how the site is BUILT, but you can come back to the Site Outline / Site Content Document and use it as a place to hold all the copy, the product descriptions, personnel profiles, testimonials, etc.

Site Architecture or Site Map
Architecture implies structure and relationship between elements in a space. As the word Map indicates, it’s meant to show how the user navigates through your site. There are various tools an agency uses to create these elements. That doesn’t matter as much to you, the client, as how they share it with you and explain it to you. This could be delivered in a multi-page PDF, or as a series of screen-shots viewed in a browser window. There are great web-apps available to create Site Maps in a browser, move elements around, and save your updates to share with team members.

I worked on a project where the Site Map was printed on a large roll of paper, so you could follow the navigation logic all the way through the site’s multiple tiers and sections and pages. When completely unrolled, it was more than ten feet long. It was a great way for the whole team to pore over the document together and make notes.

Wireframes, Mood Boards, Mockups, Prototypes
These terms are often mistakenly used interchangeably.
Wireframe – It’s about structure. What are the main site sections? What’s more important? They often start with pen and paper, which can be the best way to begin, when you’re trying to solve the first, most simple problem: figuring out what goes where.
Mood Board – A collection of visuals: photos, graphics, colors, & typography, with no commitment to content or structure, only overall personality.
Mockup – It’s like a Wireframe with visuals included (colors, photos, logo, etc.). Some use Mockup to imply nearly finished Design Comps, while others use it to imply completed Design Comps.
Prototype – A working test model that you can click through, in a web browser. It can have a few essential design elements, or a nearly refined visual Design. But it’s “not quite” the finished Design. The purpose is to test functionality.

Step 3: Design: Tools Used

Design Comps are delivered as static images. I like to put my exported screen-shots in a browser window, and send the client a URL (link to a web page) to visit, for review. This gets the them as close to the final viewing experience as possible.

Steps 4 & 5: Development & Delivery:

By this point, you’re reviewing everything in the browser, until the site is completed based on your specifications. Congratulations, you’re on your way to the finish line.

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…