We don’t have to tell you twice: The web design process can get messy. Each project has so many moving parts to it, from interfacing with clients to all that goes into any iterative design.
That makes it all the more important to come equipped to each project with a standard process you trust in that’ll guide you and your client from onboarding to handover. (Sidenote: have you seen the work-in-progress content that's taking over the internet?)
The payoff is big. For example, settling on when to introduce full content into your sketches, or when to establish guidelines for the feedback process, doesn’t just let you use your time most effectively. It also helps you win the trust of more clients.
However, arriving at the right process can take several cycles of trial and error. So we say: Skip out on the learning curve. That’s why we put this list together for you.
The 7 recommended steps to a more efficient web design process
Read through each section below for valuable tips on how to streamline your workflow.
Create an intake form with the right questions
Craft a persuasive web design proposal
Start designing your client’s website
Finalize your design
Test the website before client handoff
Launch the website
Monitor and maintain the website
I. THE CLIENT ONBOARDING PHASE
01. Create an intake form with the right questions
Before embarking on the web design process, you first need clients. And the way you generate leads - including the information you make available about your services on your website - is how you land your business in front of the eyes of great potential clients.
Forget spending time engaged in discussions with clients whose budgets don’t reach the minimum charge of your services. Or with ones who aren’t exactly sure what they want yet. The new objective is finding those clients who bode good news for your bottom line, and who will know how to make use of your skills and time.
One way to immediately identify these leads is by creating a page on your website that clearly states how much you charge and the range of your services. This allows visitors to self-select, so neither of you are wasting the other’s time.
Placing an intake form on your site can help you evaluate from the get-go whether a client will be a good fit. Some sample questions to pose include:
Contact information: What is your email address and phone number?
What service is needed? (A drop-down menu could work well here)
What industry is your business in?
What business goals are you hoping to accomplish with your website launch or redesign?
What is your timeline?
What is your budget?
What are some examples of websites you like? What stands out to you about them?
Open space to write additional notes
Based on the responses you receive, you can reach out via email to schedule a meeting with the clients who you want to work with. There, you’ll share your proposed roadmap to business success with this potential client. If possible, in-person meetings are ideal, yet phone, video, and email are all suitable alternatives.
02. Craft a persuasive web design proposal
Assemble a web design proposal that wins you a contract:
After your meeting is set, it’s time to write the project proposal that advances your relationship with this client towards a contract. Besides making a notable impression, a thoroughly-researched proposal helps you get in sync with the client from square one and lay out a pathway to a collaborative relationship going forward.
Granted, your original proposition will probably undergo a few drafts after this stage, as your client becomes more precise with their ‘asks,’ or as they match their budget to the reality of what is possible. Entering the meeting with a strong vision is also valuable for proving why you’re the best one for the job.
Remember - you’re not selling a website. You’re selling a solution that aligns with and advances the client’s business goals. To underscore that point, every excellent web design proposal should include these key components:
Demonstrated understanding of the client: Conduct extensive research into their brand. What product or service do they offer? Who are their competitors and how does this product or service differ from others out there? What is the tone of voice and story they are trying to convey? Speaking the language and story of a particular brand will resonate well with that potential client.
Clearly articulated goal: Identify the challenge at hand, and then name the solution that you will provide. This answer should be defined as a measurable, business-oriented outcome. In short: What is the value that you will provide to them? This is arguably the most important stage of the entire web design process, because it will inform every aspect of what you continue on to do, from the way you structure the website to the wording of CTAs. Some examples of possible KPIs (key performance indicators) could be: Increasing landing page conversions by 30% over one year. Doubling eCommerce sales each month. Reducing the average cart abandonment rate by 15% over 6 months. Be specific and confident in your ability to do a fantastic job. Yet still make sure to conduct market and client research to know what’s feasible when you name a number. Once you close the deal, this goal will become your motto for the rest of the project.
Sitemap: All successful websites can trace their origins to an airtight sitemap. This is a hierarchy of all planned web pages that illustrates the connections between each of them. It’s the blueprint required before any further building can be done. When determining what to insert into your sitemap, return to the goal you articulated together with your client. Perhaps it’s our example from above of reducing the abandoned cart shopping rate by 15% over the next 6 months. What website elements and pages will be necessary for realizing that metric? Where will the product and checkout pages live in relation to the homepage and each other?
Attractive design: Put simply: If you’re going to be trusted with their entire website, show off the talent you’re made of with a professional proposal design.
Outline logistics: Even if you've listed your pricing info and standard turnaround times on your website, it's important to discuss timeline and budget directly with your client. Visualize the projected project timeline in your proposal. And whatever your pricing model is, name it and note the dates on which you will expect payment before proceeding.
Present the web design proposal in a stakeholder meeting
After you’ve delivered the proposal and walked your client through your vision, there are a few takeaways to capture before the end of the meeting. These are the final details that will elevate the document you already hold into the final, actionable version.
Take the opportunity to ask the client these questions (and if their answers are similar to what you found in your prior research, that’s a sign of a job well done!):
What is the narrative surrounding your brand?
What are your product or service’s strengths?
What’s your brand’s personality?
Who is your target demographic?
As the client sees you’re understanding their business, their confidence in you will grow. Plus, the additional data you’ve collected will prove useful as you sharpen your stated goal.
It’s also a good time to solidify expectations in the client-designer relationship in a brief:
What assets (e.g. logos, style guidelines, copy, etc.) will you need from them, and by what stage of the process?
What are your norms for updates and feedback during the design process? This is your moment to set up boundaries aimed at keeping you safe from the dreaded scope creep, when projects are thrown into endless limbo as clients keep adjusting their vision or requirements.
Give a firm number for the rounds of revisions you allow, when they will occur, your preferred communication method (phone, email, in-person, etc.), and what can be expected in the client feedback process. If you enforce a pricing mechanism for additional requests down the line, mention it here, too. Use this opening to also officially appoint who from their organization will be the one giving you feedback. Yes, there may be multiple stakeholders involved on their side, but it’s best you agree in advance of the project who your one point person will be to avoid any confusion in the future.
Confirm the timeline and budget again. Based on your pricing model, confirm the amount you are owed at each stage of the project. If you charge fees for actions like missing the deadline on submitting assets or feedback, this is also the time to review those policies. Finally, share your working hours when your customers can reasonably expect to contact you for any questions they may have throughout the project.
Throughout it all, keep reminding yourself that you are the expert in the room. Listen carefully to what your future client is saying, but don’t hesitate to add your professional opinion into the discussion. After all, they’re hiring you because of your expertise.
Sign a well-negotiated contract
The standard contract you use should cover all of your bases: pricing, deadlines, client assets, late fees, to name a few. We recommend sticking in a clause about what conditions could allow you to terminate a project. After your client consultation, implement all of the specifics you agreed upon and send it, along with the final version of your web design proposal, to the client.
The anxiety of looming deadlines or the urge to jump into new creative projects are both real pulls. But refrain from pursuing any work until the signed document is back in your hands.
II. DURING THE PROJECT
03. Start designing your client’s website
Most web professionals generally follow a standard progression of design stages, from basic sketches to full-blown mockups. Doing the design in stages gives yourself time to check in with clients to make sure your visions continue to be synced.
Do your visual homework
We recommend immersing yourself in the visual identity of the brand you’re working for, and that of its competitors. Thoroughly familiarize yourself with any pre-existing visual language guidelines your client has sent your way (e.g. logo, color scheme, fonts, etc.).
Also browse the websites of similar products or services, building a visualization board as you go using screenshots of elements you liked. Consider in parallel the experience of these sites, such as the website animations. As you go, keep a pen and paper close by for the moments when new ideas jump to mind.
Move your ideas into wireframes
Once you have something down you like, turn to wireframes to synthesize your beginning sketches and sitemap. These prototypes show the web structure without delving into too much detail too soon. That’s their major benefit: Expressing the format of the future page without needing every high-quality image in place or text box full of the exact copy.
Once you have your wireframes completed, loop back in with your client to present it to them and get their feedback. Since wireframes are quite flexible, it will be much easier to make adjustments at this point in the design process.
Be diligent about SEO
Web professionals have many different ways of handling SEO (Search Engine Optimization). For some, it’s a flagship part of their expertise. Others require that clients prepare and submit all keywords they want to target and all text for the website. There’s no one right way here.
Whatever approach you choose, be upfront about it during the early project phases, and emphasize the importance of the deadlines you put in place for keeping the whole process moving ahead. This section contains advice for those partners who are owning SEO strategy development in some capacity.
As strong SEO is instrumental to any website’s hopes for high visibility and organic web traffic, it makes the most sense to perform keyword research before writing (or editing, if your content is client-generated). Just as the sitemap became the blueprint that guided your more fleshed-out wireframes, your list of targeted search words will serve as the scaffolding for your finished text.
Some tools we like for keyword research are the Wix SEO Wiz, Google AdWord’s Keyword Planner, or Answer the Public. Always cross-check promising high-volume search terms against how they appear on the SERPs in your client’s country (use an anonymous search browser so your personal data doesn’t influence the algorithm of what’s displayed) to evaluate intent.
For a more in-depth overview, see this guide to finding the perfect keywords or to choosing an SEO strategy for your client’s website.
Create mockups with client-ready content
One common industry tendency is first finalizing your design, only then to return to insert the intended content. While we love Lorem Ipsum, those Latin words perform less well in your final mockup. Why? Because they are an unrealistic estimate of what the copy will actually be.
Depending on your arrangement with your client, this material will either be written by them or a team of freelance writers you’ve hired. Regardless of where it’s being sourced from, adding real content will make your mockup stronger, and therefore result in a higher chance that the client will be more enthusiastic about what they see. Once you’ve fit all of these pieces together, you can show the client for approval before moving on to actually building the site.
04. Finalize your design
As you enter this final stage, keep revisiting the question: How does this support the goal I identified together with my client?
First create the homepage, and then present it to your client. Draw links between your design choices and their business strategy, demonstrating how each visual element supports the goals the two of you have established for the website. Compile and implement the feedback they give. Once you get approval, you can then proceed to create the next series of pages.
After finalizing the design of all the pages, organize another meeting with your client to preview the site together. It’s always a nice touch to send screenshot images of each page prior to your conversation. As you speak about the website, explain the decisions you made along the way with confidence. Believing in your direction and your work will help them feel similarly confident about it, too.
Once you get approval on the desktop version of the website, you can move on to optimizing it for phones and tablets using mobile-friendly web design best practices. After finishing this part, get one final approval from your client.
05. Test the website before client handoff
The projected launch date is nearing, and your design has been approved. Here’s a checklist of some crucial site elements to test before publishing:
Double check every link and linked element to ensure it leads where you want. This includes, but is not limited to, email subscribe buttons, eCommerce purchase options, contact forms, and social links.
Review the personalized plan Wix SEO Wiz has created for you to ensure each page is accompanied with everything it needs, from alt text to meta tags, to compete on search engines.
For websites where you’ve used the Advanced SEO Panel to take full control over how the website will appear on SERPs and social platform, open up the panel again to read through your custom meta tags and structured data.
Test the loading speed. Wix Turbo technology makes Wix websites faster than ever. Use the Wix Speed Test to calculate the site’s loading time and assess whether any changes need to be made before publishing, such as altering your video placement or moving content out of iFrames.
06. Launch the website
Both the desktop and mobile sites are designed, created, and approved.
Sharp content appears on its pages, and you’ve worked hard on the SEO for each one.
You’ve tested each link, measured the loading time, and iterated as needed along the way.
After one final run through with your client, you’re now officially ready to go live.
Before you do, make sure to enable any tracking and analytics marketing integrations that will help you and your client monitor the website’s performance vis-à-vis your key metrics.
III. THE CLIENT OFFBOARDING PHASE
07. Monitor and maintain the website
Perform website maintenance
At some point between your initial meeting and the website launch, it’s a good business practice to raise the possibility of performing ongoing website monitoring and maintenance for your client, otherwise known as upselling. You will generally find your client is more open to the idea after the project is underway and they’ve grasped the value you provide to their online presence.
If that’s something you and your client have agreed upon, then select the marketing integrations that generate the information you’ll need to do your job effectively. Monitor traffic with Google Analytics, and gain insight into on-page user behavior through tools like Hotjar and Crazy Egg.
Different information will help you identify if and where you need to make edits to your website. For example, statistics (bounce rate, page views, etc.) and data compilations (heatmaps, session recordings, etc.) will help you decide if you need to move the CTA, sharpen the page headline, or any number of other related edits.
Complete the client handover
Wix makes the client handoff process easy, letting both you and your client make updates as necessary on the completed site.
Kick off the transition by offering your client a mini site introduction session to display and explain the overall picture. Besides preemptively answering lots of questions your clients might have for you in the future (saving you from having to respond to a bunch of intermittent urgent texts), it also lets your web expertise shine.
Your client will appreciate you taking the time to teach them how to use their Wix website (and don’t forget, you can - and should - charge for this!). To boost your delivery, there are ready-made presentations waiting for you amongst the tools and guides available to Wix Partners. Below is a sampling of the resources and knowledge to share:
Records of any branding visuals you’ve selected: fonts, colors, images used, etc.
SEO best practices for future blog posts or other content they might write.
Business solutions at their disposal, such as Ascend by Wix.
How to integrate their social media presence with their website.
Don’t be afraid of introducing upselling here, too. Mention, when appropriate, other services you offer that they might be interested in.
Remember to take screenshots for your personal portfolio before you transfer the site and a client can enter to make changes.
Finally - and very importantly - make sure you have received your last payment, as agreed upon in your contract, before handing the website off.
Follow up
Even though the site is now in the hands of your client, your job isn’t done just yet. There are a few more opportunities for you to help translate a one-time project into future references or an ongoing business relationship.
First, immediately send a ‘goodbye and thank you’ email to the client after transferring ownership of the site. Ask them, while you have their attention, to submit a testimonial, which you can then display on your website. Also ask if you have their permission to post their website to your social media accounts and website, so you can expand your online portfolio.
If your client hasn’t opted for continued website maintenance, it doesn’t mean they never will. Consider setting reminders on your calendar for three months, six months, and one year out from the project completion date. At each of those intervals, follow up with the client to ask how they’re feeling about their website, and remind them that you’re here if they ever require additional consultation services or website optimization training.
Did we miss something? Have you discovered a tip that has changed your whole workflow? Tell us about your web design process in the comments!
.jpg)
