A behind-the-scenes look at my web design process

A better web design process creates opportunity for the best design solutions. The best design solutions are a reflection of the partnership between client and designer.

Can you identify with any of these scenarios?

• Projects get delayed months because clients are slow to provide content.
• Clients don’t thoroughly read your communication or are confused about what’s coming next.
• The only progress you make is by reacting to drama rather than following a plan.

The key to happier clients and smoother projects isn’t better design skills – it’s creating a better web design process (a better way to work with clients).

A strong web design process will help you proactively guide your clients rather than always reacting to drama – and – you’ll minimize your time on repetitive work and maximize your time for creative work.

It’s easy to get started…

Start writing it down

Start by thinking about the things you repeat every single time you work on a project.

When going through your next project, write down repetitive steps. Use whatever tool is comfortable for you – Asana, Trello, Basecamp, Evernote, Google Docs.

Some of the things I repeat when a client inquires:

• A yes response to an inquiry
• A no thank you response to an inquiry
• A request to set up a consult time
• An email that outlines an attached proposal
• An email welcoming a new client

I think you get the idea.

Break tasks into project phases

Next, break up the list you just created into sections or project phases that match the way you like to work.

Here’s how the project phases break down for my business:

• Onboarding
• Discovery
• Design
• Development
• Launch

Look for gaps or confusion

Think about past projects and where things have been confusing, inefficient or unclear to you and/or your client.

Where can you improve it so that it flows better? This is the first time this client has worked this way with you. Challenge yourself to create a system that is proactive about keeping them informed about what’s coming next.

Your self-assessment of some of your past projects might look something like this:

• Problem: Client took too long to get content to me for the project. Fix: Educate client at the very beginning of the project about how long content takes to put together. Give client a checklist to make the process easier for them. Set up multiple reminders to notify them that their content due date is coming.
• Problem: The exit process dragged on too long. I felt like I was making corrections to the project forever. Fix: Establish an exit procedure that gives client time to review and provide changes within a fixed amount of time.

Do you see where I’m going with this? Self-assessment can be tedious but it’s SO worth it. You can cut your time spent on repetitive steps in half or more. You’ll make more money per project and you’ll have more energy for creativity.

To help you get started, I’ve outlined my web design process below.

Remember, in applying this to your own design projects, you’ll have to make adjustments and that’s okay. I vary what I do a little based on client’s individual needs. I make sure there’s enough room in my budget to provide as much support in each phase as possible.

I generally work with entrepreneurs selling an online service. When working with a larger business, you might have to tweak onboarding just a little to accommodate a team.

My web design process

Onboarding (or bringing on a new client):

• I have potential clients inquire through project inquiry form on my site.
• If I feel the client is a potential fit, I extend the invitation to consult with me – using a scheduling tool like Acuity or Calendly so it’s easy for my prospect to setup a call time.
• If I feel the client is not a good fit, I reply and wish them well and provide alternate resources based on their needs.
• If we both agree that we might enjoy working with each other, I take the next step of sending a proposal. At this point, about 80% of proposals are accepted. I don’t go to the effort of a proposal unless I’m fairly certain we could be a good fit.
• If the client accepts, they’ll receive an invoice for the project retainer amount and we both electronically sign my contract (which is just the refined proposal with terms added – AIGA has a great base contract template if you are looking for one).
• I send the client a welcome pdf with information about our work together (my office hours, how to communicate with me, what’s expected of them, etc). Within the welcome information, I set the stage for managing scope creep. I encourage my clients to think big – that during this process they might want to pivot as they discover what’s possible. I LOVE this, but I tell them I will not hesitate to let them know if they venture out of scope. So they have the freedom to move through this process, thinking expansively but I also have opened the door to speaking freely about what we can and can’t do within the pre-defined scope as we move through the project. If a discussion or change in direction might move us out of scope – at that point I’ll assess and recommend if we will need to add to the scope of the project or table it for a Phase 2. It’s important to know your scope monkey.

Discovery

Projects vary based on scope, but here’s the simplified version of Discovery:

• The new project is setup in my project management tool and I assign my client questionnaire to the client to fill out and return to me.
• A date is set to discuss design and site strategy using Acuity. The questionnaire is due 3 days before our strategy session.
• We begin pinning inspiration (based on my guided instruction) to a secret shared Pinterest board.
• Strategy sessions are very collaborative and I always come away excited about the project. We talk about the client’s business goals and how they impact what we are doing, my vision for the project, and any questions my client has about the process or technology.
• I use the content due date to map out the schedule of the entire project. Collecting assets and writing copy can be daunting for clients, so I move my content due date to the middle of the project schedule to give clients plenty of time to provide me with what I need. As needed, I encourage my clients to work with a professional content strategist or copywriter.
• During the strategy session we also discuss the sitemap or structure of the site, which I work on collaboratively with the client.
• Based on answers to specific questions on the questionnaire, I’ll create a wireframe of the homepage. This gets my client thinking about function first. I start this process without content. In fact, it gives me an opportunity to recommend the ideal amount of content.
• I’ll continue to encourage my client by checking on the progress of their content and providing resources or giving feedback as they need it.

Design

• If our scope includes identity design and branding, I’ll start developing a logo and brand elements at this stage.
• For the next stage of the design of the website, I’ll create 3-5 style tiles for the client to review. These fairly quick interpretations of my client’s vision allow us to collaboratively eliminate the wrong direction and settle on a starting point for the homepage concept.
• My client’s homepage content is due.
• I create a homepage concept that marries the approved wireframe and the approved style tile. There’s no surprise for the client at this point, it’s the culmination of our collaboration together. There’s rarely more than one round of minor revisions.
• The rest of my client’s content is due.
• I then create interior page concepts or wireframes (depending on the project) of the remaining key page views or layouts.

Development

• Non-negotiable – development does not start until I have all my client’s content – it took me a while to learn how necessary this step is in keeping the project on track. At the same time, I understand that I need to continue to guide my clients through the content-gathering process so they are successful.
• While I’m building the custom template, someone on my team is loading content from client Google doc files into the site and formatting it to match the approved layouts.
• Using my project management tool, I’ll start assigning the client tasks to gather any remaining or missing items I need.
• To avoid confusion, I generally wait until the site is about 95 to 100% complete before sending the link to the client to review.

Launch

• The client reviews the completed site within about a week.
• I’ll instruct my client to provide me with one bulleted list of minor changes and I’ll make any tweaks/edits needed. During this time, I’m usually also finalizing the code for mobile devices and testing links and forms.
• We launch! Depending on the project, this either means turning off a coming soon page or moving the finished site from a development location to its live location.

Exit

• For 2 weeks post launch, I continue to allow the client to assign me small tasks as fixes and adjustments are generally needed.
• Within a day or two of launch, I post some “launch” discussions in my project management tool to let the client know how to manage their new site, and where and how to back it up. I let them know when my responsibility ends and how to work with me in the future.
• I’ll give them an opportunity to fill out an evaluation form and have and exit conversation with me.
• I’ll also layout the possibilities of when and how we can continue to work together – throughout the project I take notes for possible “Phase 2” projects so I can easily reference them at project exit.
• I’ll create custom how-to videos within a video tutorial section of their site so they can manage future updates on their own (if they wish to).
• I’ll send a thank you + a client gift to wrap up the project.

A better web design process creates opportunity for the best design solutions. And the best design solutions are a reflection of the partnership between client and designer.

Tag me in the Drama-Free Design Collective on Facebook and tell me – which part of working with clients is the hardest for you? I’ll tell you mine… the exit.