Part 4: Parts of a Web Design Process
Every web design company has a slightly different process, but most of the fundamentals are the same. This here is the process I've found to be the most effective way to engage clients and ensure successful projects.
Good process is EVERYTHING
There is no one right way to build a website—each firm has their own unique process developed over dozens or hundreds of previous projects. What's important is that they have a predictable, engaging, and intentional process. A good process allows you to know exactly what is expected of you and when it's expected, and lets you feel confident in where things are headed (without having to babysit your web designer!).
Pro Tip: Asking about process before accepting the proposal is a great way to get a sense of what it will be like to work with the firm. If a firm doesn't have a well-defined process that they can clearly articulate, be careful.
Key steps in a typical website process:
Our process
Discovery/Research
Before diving into the actual website, it’s worth spending some time with your web design firm clarifying your goals as an organization, identifying who you’re targeting, and who your competitors are. Otherwise you’ll likely spend a ton of money putting your old website in a fancier package.
If you already have a clear sense of your goals, audience, and competition, this might be a fairly simple process of communicating this information to your web designer. But if you haven’t done this recently, it’s a great idea to budget for a discovery session before diving into a web project.
Many web design firms include/require a discovery session as part of the project. This session can involve your staff, leadership and other stakeholders working through a number of discussion questions and exercises to identify what you want.
The web design firm will also extensively review your existing website, printed collateral, brand guidelines and any other documents foundational to your organization. They’ll also spend some time getting a sense of what your competitors are doing and ensure they understand how you differentiate yourself as an organization.
Sitemap
The first deliverable in most website projects is a sitemap, which is a basic flow chart of the pages on your site.
The sitemap outlines the site architecture and identifies all of the pages that will be included in the new site. You’ll use this to identify what content needs to be written or revised. The sitemap should organize the parts of your work into a logical structure that makes it easy for users to understand who you are as an organization and answer their questions.
A couple key questions to answer are:
- Who are you? (About page)
- What do you do? (Programs, services, activities)
- Why do you do it? (Mission, purpose)
Website Prototype
The next phase is in my process is a Prototype, though not all web design firms use this.
A prototype is a fully functional website using placeholder images, dummy text, and bare-bones functionality. The point of this phase is to let you click around the site and get a feel for the user experience without being distracted by design elements.
During this phase, I encourage my clients to pretend they are a specific user type (e.g. a donor, a program participant, etc.) and see how quickly they can find the information they’re looking for.
Many clients come alive at this phase because they finally have a tangible website to use and provide direct feedback on. We can talk all day about building a filterable grid or donation user flow, but for non-web-designers, it can be hard to picture exactly what we’re talking about.
The prototype ensures we’re all on the same page before going deep into the design or coding.
Visual Design
In the visual design phase, the web design firm will design the look and feel of the site including typography, layout, colors, and photography. Depending on the project and the firm, this might be submitted as static image files whereas other times it’s done directly in the browser. For smaller projects, I usually combine this with the draft phase.
If you aren’t a designer, it can be intimidating to provide feedback on the visual design. I recommend you focus on the feel of the design and whether it captures the feeling your target audience associates with your organization.
If you have defined brand guidelines, you’ll want to confirm at this phase that it meets all the specifications.
Draft Site
Once all of your content is complete and the previous steps have been signed off on, it’s time to build the fully designed/coded website. This phase is the most time-intensive for the web design firm but—assuming you’ve already provided all of the content, images, and feedback requested—is a relatively quiet phase on the client end. Just sit back and enjoy a quick break before the revision rounds.
Revisions
Once the draft site is submitted, it’s time for revisions. Your design firm should outline the process for reviewing the site and submitting revisions.
My process includes two rounds of revisions. Here’s what a typical revision process looks like:
- You review the site and share it with any other staff members, board members, and other stakeholders.
- You request any thoughts or feedback be submitted to you. This can be either via email or in a meeting.
- You compile all of the agreed-upon revisions into a single document. Make sure to read and consider each request you received from colleagues. Sometimes people will request changes that others disagree with. Only include requests that have been carefully vetted and agreed upon.
- Submit the list of requests.
- Follow up discussion with web design firm to ensure everything is doable and in-line with the goals of the site.
- Web design firm makes the changes and sends you the updated site.
- Repeat steps 1-6 for Round 2.
Tips for a successful revisions process
- DO share the site broadly with stakeholders and others who can offer valuable feedback.
- DO designate a person to collect and compile the revisions. Their job is to decide what feedback to pass on and what to ignore.
- DON'T just blindly copy and paste all of the feedback you get into a single document. If you get feedback from lots of different people, chances are some of it will be contradictory.
- DO solicit specific (rather than open-ended) feedback, make sure to focus on what people are experts on. Dave from Development should be invited to give extensive feedback on the Support Us page, but his opinions on color palette may not be as helpful.
- DON’T be afraid to ask questions! If something doesn’t seem right, make a note of it and ask your design firm to clarify.
- DO ensure that the design fits the mood and branding of your organization, but don’t undermine the experts you’ve hired by nitpicking design details.
- DO review the entire site carefully in Round 1, then again in Round 2. Additional requests outside of the specified process will likely be considered a scope addition with a corresponding increase in the budget. Take the included rounds seriously and don’t miss your opportunity to perfect the site to your vision.
Knowledge is Power.
Empower your nonprofit's marketing with periodic tips and tricks delivered to your inbox.
"*" indicates required fields