Here's My Fool-Proof Process For Designing Great Web Sites That Make Money

Use this full-proof process for designing great web sites

I can remember about 5 years ago when I first sat down to build the initial site for a web marketing firm I was just beginning. I opened up Photoshop, started a blank file and then just kinda stared at it for awhile. It’s not like I don’t know how to use Photoshop. This was the beginning of creating my process for designing great web sites.

I was paralyzed by one question: What is supposed to go here?

Soon thereafter I punted, got a WordPress theme and left the look and feel up to the theme.

It wasn’t until we started this website that I really found answers to those questions. And if you’re in that exact same place, the “what is supposed to go on my website?” phase of web development, let me refer you to an article about the critical path and another about the 6 things you must have on your homepage and one more on 4 problems and solutions to a better website.

The real problem I had was that I didn’t have a clear process on how to go from “I need a website!” to “I have a website!”. I guess I just thought that if you go to Photoshop there must be a setting for that somewhere.

Message + Medium = Website

The real problem with websites is that unlike any other media I know, the developer is responsible for creating both the message – what the website is supposed to say, AND the medium – the actual graphics and code of the website. Tragically, local developers routinely leave the content up to the client. It’s like they presume that the content and design don’t really have a tight relationship between each other.

The world, somewhere around high school, seems to divide itself into two groups: nerds and jocks/cheerleaders. It’s the oil and water social combination that we’re all familiar with.

In the business world, there’s a similar issue between marketers and programmers. This ends up being a losing proposition for both because a website clearly needs quality input from both departments.

Both departments will benefit tremendously by implementing a design process that deals with both the marketing and technical concerns.

From the developer and designer’s point of view, it’s all pixels and data to them. The designer is going to make something pretty. The developer is going to code it up to work right. But business interests aren’t represented yet. It’s at this stage of the game I’m used to seeing local web dev’s say “insert content here”.

The designer, in this common scenario, is responsible for designing a website that accomplishes the goals that you want accomplished.

It’s at this point, I have to pull the chain that stops the whole plant like in those old Saturn commercials. I gotta ask a really important question:

Is “Designer” an appropriate term?

Newman and I got into a discussion a few weeks back. We know that people use precise terms imprecisely. I’m probably guilty of it 50 times a day myself. But can we talk about “web designer” and “web developer” and what those phrases mean?

To me, a web designer is the person that’s responsible for creating the look and feel of the website. The word “designer” means they likely are familiar with Photoshop, Illustrator and other similar tools.

A web developer may have the same responsibilities as a web designer but the word “developer” implies that they’re approaching it from a coding perspective.

What I don’t see in either phrase is attention to the business concerns. This is where the imprecision comes in.

I want to have a third phrase that includes marketing. But “web marketer” completely ignores design and programming.

I can’t think of a great meta term to use. So YES, I’m going to say that “web designer” or “web developer” is as good of an an all-encompassing term for what web design is about as any other.

But it still ignores a real truth:

Business Websites Should Be Driven By The Needs of the Business

The words “designer” and “developer” don’t address that. And if you’re a designer or developer, that can be confusing as all hell. As I found out when I sat down to design my website.

Knowing Photoshop/Illustrator and HTML/CSS and maybe a little PHP/MySQL isn’t enough to get a website off the ground.

What still needs to be addressed is the WHY and HOW.

Build the Skeleton Before the Skin

Fortunately, you don’t have to get a degree in marketing or go find a Marketing for Dummies book. The right workflow and the right tools will turn what seems to be a process with a near infinite possibilities into a manageable project.

The workflow is designed to go from the big to the small. Right off the bat you’ll be asking the big business questions. By the end of it you’ll be tying up every last loose CSS class and PHP function getting ready for launch. Here’s how:

1. Ask the Important Questions

I could (and probably will) write a whole post on the most important questions to ask while doing a website re/design. But the point remains: everything you build comes from what the client says they need. Since they aren’t web developers, it’s unlikely they’re going to walk through the door knowing what to say to you to create a profitable website. This is where the questions come in. You want to ask questions that address the needs of the business, the needs of the audience, and then needs that are specific to the website. After you do a few of these, you’ll be able to put together a great starting questionnaire. Here are a few good resources to use in developing your own starting questionnaire:

Resources

Andy Rutledge: http://bit.ly/dKW2Ef
Sitepoint: http://bit.ly/eHoGc5
Adaptive Path: http://bit.ly/kWpOBx
How Blog: http://www.howdesign.com/article/Metaphor

2. Goals and Flows

Once you understand the needs of the business and the site’s users you can develop the broad goals and flows. This could be easily understood in an ecommerce situation or made increasingly complicated when developing a sales funnel or when developing the site’s customer service methods.

The important thing to know is, where your flows start and end.

[highlight color=”eg. yellow, black”]This is probably more complicated than you think.[/highlight]

Not every flow starts at the front page. Consider your potential marketing: SEO matters. Ads from AdWords matter. What people see in your marketing and which page they land on matters.

Make sure you are aware of all of these flows.

The huge upside to doing this work is that it will unify your marketing with your website, increasing the efficiency of your marketing and and generating a higher ROI.

3. Information Layout

If you’ve done the goals and flows properly above, you’ve got a good idea of how to do your information architecture. But what do you know about information architecture?

The goal of your information architecture is to represent visually your site’s hierarchy and all of the conditional and logical ways they connect.

There may be some kick ass tools out there to do this. I know a lot of businesses like Axure. But you gotta believe in it to use it since it runs $589. (Though, if you can pay for Photoshop, you should probably consider Axure since it’s hella good.)

Me? I use a combination of graph paper and color pencils plus Google Docs.

I find that for me, my mind works differently when I write things out using pencil and paper versus typing or drawing something out on the computer. It helps me spatially to draw out the hierarchy of a website. Once I get a rough sketch that I like, I’ll transfer it to a drawing in Google Docs.

These document can be as simple or complicated as you need them to be. The important thing is that they be complete. For example, the above image is good enough but it really should detail the steps in the Wizard. Else, it should be detailed somewhere else. Because somebody, at some point, is going to have to build it out. And the process needs to be made bare for the developer to see.

4. Wireframes

This is almost my favorite part of the entire process. I’m an analytical guy by nature, so I enjoy considering how to arrange the pieces to make the puzzle fit together properly.

To this point, it’s all be higher-level thinking. What are the business and audience goals? How does the information in the site flow across the pages? But now comes the time to develop the layout and the message.

I believe these to be the same thing.

it’s equally important to have an easy to follow layout as it is to say the right things. If one is missing, the other will suffer. Nobody will see your value proposition if it’s hidden someplace and nobody will understand your value proposition if you don’t say it at all. Both the layout and message contribute to create the final message. And wireframing is where we make sure we get this right.

The first part of wireframing is addressing the key needs. The general needs are:

Needs to speak the users language
Needs to communicate who the customer is
Needs to communicate the core benefits
Needs to show passion for the product/service
Needs to build trust
Needs to push user into the sales funnel/further into the sales funnel

This is where you start figuring our your value proposition or how you want to showcase your competitive advantage. It’s where you get your website’s messaging right.

This is the first time that actual content is getting tacked in place. By taking this approach, you’re going to make it a dream for the visual designer to understand how to create a design that will most appropriately support the site’s purpose and message.

There are a lot of wireframing tools that can help you sketch out your designs and considerations. The two I use most frequently are Mockingbird and Balsamiq though we list many more in our UX Directory.

5. Style Tiles

This is a relatively new step in my design process but it’s been really helpful in making the transition from wireframe to a completed graphic design comp.

For a full look at Style Tiles and to download the template, visit styletil.es.

The idea is to spend time coming up with several distinct graphic design ideas without having to work it through the entire comp. Let me tell you from experience: it’s not necessary to spend 8 hours on something before the person you show it to knows whether they like it or not.

So instead, give them an idea of the colors, the fonts, and a sense of the design style. This takes the guess work, for the most part, out of designing the comp.

Below are three examples of three style tiles developed for the same new website. Which one would you have picked?

6. Graphic Design/Comp

Now that we’ve got all of our mise en place, we can start to cook… er, build the visual design of the website.

I don’t want to say that the hard work has already been done, but everything has been done to this point to where the designer can focus on applying the approved style tile to the approved wireframe. Now, rather than sitting down in front of Photoshop, like I did 5 years ago, with a dumb look on your face, you can now invest yourself in fully realizing the work that’s already been done.

I still use Photoshop and Illustrator for these tasks but some people swear by Fireworks. The articles in Smashing Magazine have been making me want to take a closer look. When I do, I’ll be sure to write about it.

7. Coding/Analytics

If you’re working on a site that just needs CSS, this is the time to get to it. If you have programming, this is also where you can do that. If you’re farming out your programming then you could have done that earlier and then incorporate it in this step.

For my coding needs, I run a MAMP Pro setup on my iMac and use Sublime Text 2 as my code editor and FileZilla for FTP.

If you need to bone up on your CSS, the course on codecademy.com will get you squared away.

I include Analytics here because Analytics includes some easy programming. It’s mostly just setting up your events, goals, and funnels. No biggie but an important step worth mentioning.

8. Review/Testing

This is the little used and often missed step in the whole process that (a) kicks off the idea of iterating your website (b) finds problems before the site goes live and (c) puts that extra shine and polish on your product before it goes live.

How you actually go about doing the review and testing is up to you. You can get people in the office who haven’t used the site before to run through it. Send it to friends and family members. Bug people in a coffee shop. Or go the serious route and use a service like usertesting.com or hire a company to get a focus group together of your potential customers to review the website.

You’ve come this far with care and attention to the website, why skip this step and potentially fumble on the goal line?

8a. Fix the Problems

If you found portions of the website that need to be fixed or revamped before launch, do it now. Double check to be sure that all of your tracking is in place and ready for launch.

9. Launch

This is the easy part, the hard part, and the part that has some anxiety and relief to it all rolled into one.

Launching a website is like having a baby. It doesn’t require as much screaming, blood, or well, babies but when we launch a website, we’re launching something that’s going out into the wider Internet seeking interaction. And much like a parent watching their child struggle or excel with the basics, when we look at our analytics data, we get to see the same thing. And like every good parent, we want to see our kids do better. That brings us to…

9a. Tell the Search Engines

I don’t know if this step needs to be stated but since I do it every time, it feels appropriate to talk about it. You need to be sure to have a sitemap on your website and you need to sign up with both Google Webmaster Tools and Bing Webmaster Tools. Then check your Google Analytics profile to connect your Webmaster Tools account to your Analytics account.

10. Iterating

The iterative process is the cornerstone of how we believe websites should be designed: they are communications written in a changeable medium and should be viewed and used as such. Always test. Always analyze. Always strive to get better. This is what the iterative process is about. When used properly, it’s profitable for everybody involved.