The Progressive Design Method: What it is and why I use it

I have recently decided to adopt the progressive design method of designing and developing websites with my clients. I believe that this is a better method that benefits both the client and designer and creates an excellent website that meets the client’s needs.

So, what is the progressive design method, you ask? Well, let’s first go over the normal design method used by most web designers, first.

Normal Design Feedback Loop

This loop involves design work, and feedback. The process goes over and over until it’s right.

 

With the normal design method, I would do the design work (after talking with you about what you needed, etc) and then send it to the client for feedback. The client would tell me what they like, what they don’t like, etc and send it back to me. To start off the process, I probably would have sent three design concepts, and then the client would have selected the one he or she liked. Then I’d develop it, and then again, we go through that loop.

The loop isn’t bad, but there is a problem with the process. The client is more of an art director or boss, and not so much of a collaborator. We’re not really partners in the process. And there’s a lack of communication in this process. I do work, and the client gives feedback. On top of this, the client is not an expert in web design.  The client can make a decision as far as the design goes, and it may not be a good decision. I could try to tell them, but they’re the boss.

Now, of course the client is the boss to a certain extent. But really, I’m partnering with them. The client hired me in the first place because I have an area of expertise that they don’t have.

Let’s also mention that the work may not have been clearly defined. And I’ve seen it before in the past! I may have met with the client to find out what they want, and felt like the work was well defined, but then once I sent the concepts and get the feedback, I find out they wanted something a bit different. I was going on a wrong track in the design from what they wanted. OK then, now I’ve got to do this all over.

What if there’s a better way? A way in which I influence the client and where the client influences me? Where I get to know the client’s needs so well that there’s only once concept even needed? What if there’s a way to make the client a collaborator in the process?

Oh, there is! I present to you the progressive design feedback loop!

Progressive Design Feedback Loop

In this loop, we define, ideate, prototype, build, and analyze. We can go back to the previous step, if needed.

Now before I continue, I’ve met people who tell me about how they can build a website like many I design in a few hours. And yes, I can build a website in a few hours too and maybe make it exactly what I want. If you’re one of those that thinks a website should be built in a few hours, you’re going to hate this process. The fact is, people who build websites in a few hours don’t typically work with clients. They probably build it for their own needs. But I’m not a mind reader, of course. I work with clients, and it takes time to understand and build what they want and need. There’s a process we go through before we even start building.

Also, it may be some clients are used to a different process. It may be one that you love or one that you hate. Either way is fine, as I’m not trying to get every client I can. I mainly work with the clients I’m a best fit for and that are a best fit for me. But I think when you actually go through the process, you’ll find it to be much more beneficial to you.

We have multiple steps in the process, and keep in mind, each process has a set amount of time. In that set amount of time, I have meetings with the client (maybe two per week). It sounds like a lot, but it helps to keep the client in the loop and also allows the client to influence me where I may need more influencing. If I’m going the wrong direction, I’ll know early on.

The process is designed to move the design forward, so that we don’t get stuck in the loop of doing things over and over for too long. Each step has a time limit on it.

Define

First, in our discovery sessions, I spend time to find out what the client’s needs are. I don’t just try to find out what the client wants on the website as far as functionality and design goes. I find out what the problems are in the business that can be solved with a web solution. This information will directly influence the design.

Basically, I need to know if they have a goal of increasing their business by x amount through their newsletter, site engagement, etc. I need to know what is working right on their current site, and what could be improved, and where their current site is completely failing.

We define what we’re doing. And I say “we” because the client is a collaborator, a part of the team.

Ideate

I will take a specified amount of time, maybe two weeks, or maybe more or less. This amount of time is specified from the get-go and I work on this until the end of that time. I will start sketching ideas. Design starts on paper. Many web designers totally skip this step in order to save time. I’ve been guilty of it from time to time but now I make sure I start on paper before I ever even go into Photoshop or Illustrator for anything else on the computer (other than getting photos/scans of the sketches to the client).

I will take the time to sketch out any buttons, wireframes, and other ideas as far as graphics go. ZURB (the creators of this process) had McAfee as a client.  In their ideate process, they asked “What if we represent security with a ninja?”. They were able to create a theme from this to add uniqueness to the final product. Sketches of the ninja were drawn, and in a number of situations, too! They also focused on all the other buttons, and then full website sketches, and then finally went into the next phase of prototyping.

dullatronAnother example (and one of my sketches) that I will be using on my new design of my own website is my evil robot, the enemy of good design, Dullatron (well, just a placeholder name, I’m going to be calling him something else, but he’s Dullatron right now). Of course he is a quick sketch (I will be displaying some of the quick sketches in my new design, just to show the design process) I don’t want a robotic process where everything is the same. I want something unique, and something that represents each client uniquely and solves the problem. I’m not looking to build a website, but a web solution. This robot represents the opposite of that and in the concept, I will be fighting against (and winning against) Dullatron.

Before I get to this, however, I will mention that it will be rare that I get something right the first time. Most of the time in the ideate process, you won’t get things right. It’s almost impossible. But in the ideate phase, I’m in communication with the client and finding out what ideas are working, and what’s not.

Prototype

Now, I’ll take another specified amount of time, let’s say two weeks again. I may go into Photoshop and Illustrator to create a comp, though these days I normally use the design-in-the-browser approach and just use Illustrator and Photoshop for graphics as needed. Prototypes will typically be mobile first (that is, I focus on mobile design first and then work up from there). Again, during this process, I’ll keep in touch with the client and there will be scheduled meetings. I’ll get feedback in these meetings and also frequently send ideas to the client.

Now, if something isn’t right in the prototype stage, well we can always go back to ideate.

Build

Now in the define, ideate, and prototype phases, we’re dealing mostly with the design aspects and the client should have influenced the design process and vice versa, the designer should have shared some expertise as far as the design decisions going on.

Now admittedly, building is the process where I’ve had trouble in the past with communicating, because typically we’re dealing with more technical terms at this point (there’s programming involved often times). Still, I’ve learned to provide regular updates, and provide it in plain English. It’s here where we start to actually build the product.

Ideally, I’ll build the site and there will be no problems with what was done in the ideate and prototype phases. However, it can happen and we may have to go back to ideate and prototype from time to time. In the end, we’ll have a product that we can then…

Analyze

Now we can analyze the product. Find out what’s working right, what’s not. We can beta test this here. And we’re still able to go back to ideate, prototype, and build, if needed.

Here, we’re finding out what works right and what doesn’t. We may do some usability testing on the concept as well. If the navigation isn’t as usable as we’d hoped, we may have to make some changes. But by this point, we should have a product pretty close to rolling out.  And once it’s ready to go, then we launch it!

The meetings

Let’s talk about the meetings for a moment. As I’ve said, there are frequent meetings in the process (be it in person or virtual over Skype). I would probably do about two a week. I would have a set time and probably wouldn’t go over an hour, and just focus on the work at hand. (as much as I’d like to talk about your weekend, there’s just not time for that, and you probably have other things to do, too).

The time limits in each step

Each step will have a time limit, typically two weeks. We want to get as close as we can to perfect on each step in that two weeks. We don’t go shorter and we don’t go longer on each step. If we feel like we’re done before the time is up, well let’s take some time to analyze it and see what we can do to make it better.

Now when I find I need to go back to a previous different step, unless I talk with the client and find that it’s needed, I probably won’t spend two weeks. Going back will typically be reserved for smaller details.

Conclusion

While I know it sounds a bit more complicated than the normal process, the progressive design process actually helps things run more smoothly between the designer and the client. It helps to move the design forward. It helps to educate the client on the process and also to further help the designer understand the needs of the client. The process requires collaboration from both the designer and client to work together toward a goal.

By the way, check out ZURB! They created this process and also created the Foundation framework which I’m starting to use on new sites I’m building, including the new version of this site that’s coming!