The web design process, step by step — a Canadian field guide

Why a defined process matters more than talent

A skilled designer with no process produces a beautiful site that misses the business goal. A disciplined process with an average designer produces a site that converts. The process is what turns a subjective creative exercise into a repeatable, accountable project with checkpoints you can actually manage. This is the single biggest reason agencies charge more than freelancers — you are paying for a methodology that de-risks the outcome.

In Canada, where a professional site represents a CA$5,000–$50,000 investment for most businesses, the cost of a process failure is measured in months and thousands of dollars. The most common failure is not bad design. It is a project that drifts because nobody defined the goal, nobody owned the content, and nobody agreed on what "done" means. A defined process closes every one of those gaps before they become change orders.

The nine stages below are sequential but overlapping. Content production often begins during design. QA runs continuously, not only at the end. But the gates between phases — the formal sign-offs — are non-negotiable. You should never start visual design before the sitemap is approved, and you should never start development before the design is signed off. Skipping a gate is how a four-week project becomes a four-month one.

One framing note before we begin: this is a design and build process, not a marketing process. Once your site is live, growing its traffic is a separate discipline — see the local SEO guide and SEO services overview for what comes after launch. The process here gets you a fast, credible, conversion-ready asset. What you do with it afterward determines the return.

The nine stages at a glance

Here is the full process mapped against typical timeline share and budget share for a professional Canadian small-business website in the CA$8,000–$12,000 range. Use it as a planning baseline — exact splits shift with project type.

Note that budget shares total to the build figure, while content can sit inside or outside the build depending on who writes it. Timeline shares overlap — content runs in parallel with design and development, which is why a 12-week project does not equal the sum of every stage end to end.

Stage 1 — Discovery: learn before you draw

Discovery is where a good project is won or lost. Before a single pixel is placed, the team needs to understand your business model, your customers, your competitors, and the one measurable outcome the site exists to produce. A designer who skips discovery and quotes after a fifteen-minute call is selling a template, not a solution.

What happens: A kickoff workshop (60–120 minutes) covers your goals, audience, brand, and constraints. The team audits your current site analytics if one exists — bounce rate, top pages, conversion paths, traffic sources. They run a competitor analysis against three to five rivals ranking in your market. They define a single primary success metric, such as "20 qualified contact-form submissions per month from organic search in Greater Calgary."

Deliverables: A written project brief, a draft sitemap, a competitor audit summary, a defined primary KPI, and a confirmed scope-of-work document. On larger projects, lightweight user personas and a content inventory of the existing site.

Who does what: The strategist or project lead drives discovery; you supply business context, access to analytics, and decision-maker availability. On a freelance project, the freelancer wears the strategist hat. On an agency project, this is often a dedicated strategist or account lead.

Timeline: 1–2 weeks. Budget: CA$500–$3,000 depending on depth; on smaller freelance projects discovery is folded into the project fee rather than itemized.

The deliverable to insist on is the primary KPI. If your provider cannot state, in one sentence, what the site is supposed to make happen and how you will measure it, discovery is not finished. Everything downstream — IA, design, copy — should trace back to that sentence.

Stage 2 — Strategy: turn goals into a plan

Strategy translates discovery findings into a concrete plan. It is the bridge between "here is what we learned" and "here is what we will build." On small projects this phase is short and informal; on larger projects it is a formal deliverable you sign off before any structural work begins.

What happens: The team defines the conversion strategy — what action each page type should drive and how. They confirm the platform choice with written rationale (WordPress, Webflow, Shopify, custom), map primary keyword targets for each core page, define the brand voice and tone, and set the technical requirements: integrations, languages, accessibility target, and performance budget. For Quebec-facing businesses, this is where bilingual French/English requirements under the Charter of the French Language (Bill 96) are scoped and priced.

Deliverables: A strategy brief covering platform decision, conversion goals per page, a keyword-to-page map, a brand voice summary, and a technical requirements list (integrations, hosting plan, accessibility target such as WCAG 2.1 AA, performance target such as a sub-2.5-second Largest Contentful Paint).

Who does what: The strategist leads; the developer advises on platform and technical feasibility; you approve the platform decision and confirm integration needs. Platform choice is a long-term commitment, so review the website platform comparison and custom development vs. builders guides before signing off here.

Timeline: 3–7 days. Budget: 5–10% of build, or CA$500–$2,500 as a standalone deliverable on larger projects.

Stage 3 — Information architecture & wireframes

Information architecture (IA) is the skeleton of your website: how pages are organized, how navigation works, and how a visitor moves from landing to conversion. Wireframes are low-fidelity layouts that show structure and content placement without colour, imagery, or branding. This phase is deliberately ugly on purpose — stripping away visual polish forces everyone to focus on hierarchy and flow.

What happens: The UX designer finalizes the sitemap, defines the navigation structure (primary nav, footer, utility links), and produces wireframes for each unique page template — typically homepage, service/product page, about, contact, blog index, and blog article. Wireframes establish where the headline, hero, social proof, CTAs, forms, and supporting content sit on each template. Interactive prototypes may be produced in Figma so you can click through the flow before any design is applied.

Deliverables: A finalized sitemap, a navigation map, greyscale wireframes for every unique page template, and optionally a clickable Figma prototype. Mobile and desktop wireframes for key templates, since mobile-first structure is non-negotiable in 2026.

Who does what: The UX designer owns wireframes; you review for completeness — is every page you need represented, and does the conversion path make sense? This is the cheapest stage to request structural changes, because moving a block in a wireframe takes minutes and moving it in code takes hours.

Timeline: 1–2 weeks. Budget: 10–15% of build.

The gate here is explicit sign-off on the sitemap and wireframes. Approving structure before styling is the single highest-leverage discipline in the entire process. Clients who skip ahead to "but what colour is the button" during wireframing are optimizing the wrong layer and will pay for it in revision rounds later.

Stage 4 — Visual design: apply the brand

Now the wireframes get dressed. Visual design (UI design) applies your brand — colour palette, typography, imagery, iconography, spacing, and motion — on top of the approved structure. This is the phase clients are most excited about and the one most likely to spiral into endless revisions without a disciplined revision process.

What happens: The UI designer creates a high-fidelity mockup of the homepage first, establishes the visual system (a style guide of colours, fonts, button states, and components), then designs the remaining unique templates against that system. Real or placeholder content is used so the design is tested against actual copy lengths, not lorem ipsum. Designs are produced for both mobile and desktop breakpoints. Decisions on colour are grounded in colour psychology and accessibility contrast ratios, not personal taste alone.

Deliverables: High-fidelity Figma mockups for every unique template at mobile and desktop widths, a reusable design system / component library, hover and interaction states, and a finalized set of brand assets. A defined number of revision rounds — typically two on the homepage, one on interior templates.

Who does what: The UI designer leads; you provide consolidated, single-voice feedback. The most expensive pattern in this phase is committee feedback — five stakeholders sending conflicting notes. Appoint one decision-maker who collects internal input and delivers a single, reconciled revision list.

Timeline: 2–3 weeks. Budget: 20–25% of build — typically the largest single line item after development.

Stage 5 — Content: words, images, and proof

Content is the most under-budgeted and most frequently mismanaged phase of any Canadian web project. A beautiful design wrapped around weak copy converts poorly. And nothing stalls a project longer than waiting on a client who promised to "write it themselves" and then disappears for six weeks. Assigning content ownership at contract signing is not optional — it is the difference between a 10-week project and a 26-week one.

What happens: Copy is written or edited for every page against the keyword-to-page map from strategy, in the agreed brand voice. Professional or stock photography is sourced and optimized. Testimonials, case studies, certifications, and trust signals are gathered. For bilingual sites, professional French translation and localization runs in parallel — not machine translation, which underperforms badly at converting Quebec visitors. Content is loaded into the design or staged for development.

Deliverables: Final approved copy for every page, optimized images with descriptive alt text, gathered social proof, SEO metadata (title tags and meta descriptions) per page, and any legal pages — privacy policy, terms, and a return policy for ecommerce — drafted to PIPEDA and, in Quebec, Law 25 standards.

Who does what: This depends entirely on your contract. Either you write it, you hire an independent copywriter, or the agency provides one at CA$150–$350 per page. Whoever writes it, the designer or developer places it. For high-stakes pages, professional conversion copywriting earns its fee many times over.

Timeline: 2–4 weeks, run in parallel with design and development. Budget: 15–20% of total project, or CA$150–$350 per page for professional copy.

Stage 6 — Development: build it for real

Development converts the approved design into a working, responsive, fast website on the chosen platform. This is where the design becomes real code or a configured page builder, where integrations are wired in, and where performance is engineered rather than hoped for.

What happens: The developer builds each template to match the approved design pixel-for-pixel across breakpoints. They implement responsive behaviour, wire up forms and email routing, connect integrations (booking systems like Jane or Calendly, payment gateways like Stripe CA or Square, CRMs, email marketing tools), set up the CMS so you can edit content, and engineer performance — image compression, lazy loading, script deferral, font optimization — to hit the Core Web Vitals target set in strategy. SEO foundations go in here: clean URL structure, heading hierarchy, schema markup, XML sitemap, and robots configuration.

Deliverables: A complete, responsive website on a staging server; functioning forms and integrations; an editable CMS; implemented on-page SEO and schema; a passing Core Web Vitals baseline; and a staging URL for client review.

Who does what: The developer owns the build; you review on staging and confirm every integration works with real test data — submit the contact form, run a test transaction, verify the booking flow. Insist that you own the site files, the domain (registered in your name at a CIRA-accredited registrar for .ca), and the hosting account from day one.

Timeline: 2–4 weeks for a standard site, longer for ecommerce or custom. Budget: 25–30% of build — usually the single largest line item.

Stage 7 — Quality assurance: break it before users do

QA is the disciplined hunt for everything that is wrong before the public sees it. Skipping or rushing QA is how Canadian businesses launch sites with broken forms, layout bugs on iPhones, and contact submissions that silently vanish into a spam folder nobody monitors. A proper QA pass is cheap insurance against an expensive, embarrassing launch.

What happens: The team tests the site across browsers (Chrome, Safari, Firefox, Edge) and on real devices (iOS and Android phones, tablets, desktop). They verify every link, every form submission and its email delivery, every integration, and every CTA. They check responsive behaviour at all breakpoints, validate accessibility against WCAG 2.1 AA (contrast, keyboard navigation, alt text, focus states), confirm load speed on a throttled connection, proofread all copy, and validate every piece of schema markup. A pre-launch SEO check confirms metadata, canonical tags, redirects from old URLs, and that staging is not accidentally indexable.

Deliverables: A completed QA checklist, a bug list with severity ratings, a cross-browser and cross-device test report, an accessibility audit result, and a confirmed pre-launch SEO checklist.

Who does what: The developer or a dedicated QA tester runs the technical pass; you do a final content and brand review — your name spelled correctly, phone number correct (test that it actually rings), hours accurate, every claim true. The single most important client test: submit the contact form yourself and confirm the email lands in the right inbox.

Timeline: 3–7 days. Budget: 5–8% of build.

Stage 8 — Launch: go live without drama

Launch is the controlled act of pointing your domain at the new site and making it public. Done right, it is a quiet non-event. Done wrong, it produces downtime, broken search rankings, lost form submissions, and a frantic scramble. The difference is a launch checklist followed in order.

What happens: The team migrates the site from staging to production, configures DNS and SSL (HTTPS), implements 301 redirects from every old URL to its new equivalent to preserve SEO equity, submits the XML sitemap to Google Search Console, verifies analytics (GA4) is firing, removes the staging site from search indexing, and confirms the site is live and stable. For ecommerce, a final live test transaction confirms the payment flow and tax calculation work in production.

Deliverables: A live website, a redirect map confirming old-to-new URL mapping, GSC and GA4 verified and submitting data, SSL active, and a launch confirmation report. CMS training — a recorded walkthrough or live session — so you can edit content yourself.

Who does what: The developer executes the launch; you provide DNS access (or authorize the registrar change) and do a final live smoke-test. Schedule launch for a low-traffic window — a Tuesday or Wednesday morning, never a Friday afternoon, so the team is available if anything needs a fix.

Timeline: 1–2 days including DNS propagation. Budget: 2–4% of build.

Stage 9 — Post-launch: the work that pays back

Launch is the starting line, not the finish. A website is a living asset that needs maintenance to stay secure and optimization to keep improving. The businesses that treat launch as "done" are the ones whose sites are hacked eight months later or whose conversion rate never moves. Post-launch is where a good site becomes a great one.

What happens: Immediate post-launch (first 30–90 days) covers bug monitoring and fixes — most reputable Canadian providers include this in the build. Ongoing, the site needs security monitoring, plugin/theme/CMS updates, offsite backups, and uptime monitoring. On the growth side, the team reviews analytics monthly, runs conversion rate optimization against the primary KPI set in discovery, and builds out new landing pages and content. This is also where ongoing SEO lives.

Deliverables: A bug-fix window (30–90 days), then a maintenance care plan and/or a growth retainer. Monthly analytics reports tied to the KPI, a maintenance log of updates and backups, and a roadmap of optimization experiments.

Who does what: An account manager or the freelancer manages the relationship; you decide whether to self-manage maintenance or buy a care plan, and whether to invest in a growth retainer.

Timeline: Ongoing. Budget: Maintenance care plan CA$75–$300/month; growth or SEO retainer CA$750–$3,000/month.

Full process budget breakdown (CAD)

The table below shows how the same nine-stage process scales in dollars across three common Canadian project tiers. These are design-and-build figures, pre-tax, excluding ongoing retainers.

All figures are pre-tax; GST/HST of 5–15% applies on Canadian provider invoices depending on province. On brochure projects, discovery and strategy are almost always bundled into the project fee rather than itemized — but the work still happens, even if informally. For the full pricing logic, see the web design pricing guide and the interactive cost calculator.

The process timeline, week by week

Here is how the nine stages typically sequence for a professional Canadian small-business site delivered in roughly 11 weeks, assuming responsive client feedback. Note how content and development overlap — that parallelism is what keeps the calendar tight.

1. Weeks 1–2 — Discovery. Kickoff workshop, analytics audit, competitor analysis, brief and draft sitemap, primary KPI locked.
2. Week 2 — Strategy. Platform decision, conversion goals per page, keyword-to-page map, technical requirements signed off.
3. Weeks 3–4 — IA & wireframes. Sitemap finalized, wireframes for every template, structure approved. Content production begins in parallel.
4. Weeks 5–7 — Visual design. Homepage mockup, design system, interior templates, two revision rounds, design signed off.
5. Weeks 5–8 — Content (parallel). Copywriting, photography, social proof, French localization if bilingual, metadata.
6. Weeks 8–10 — Development. Build to design, responsive engineering, integrations, CMS setup, performance, SEO foundations, staging review.
7. Week 10 — QA. Cross-browser and device testing, form and integration verification, accessibility audit, pre-launch SEO check.
8. Week 11 — Launch. Migration, DNS, SSL, 301 redirects, GSC and GA4, CMS training, go-live smoke test.
9. Weeks 11+ — Post-launch. Bug-fix window, then maintenance and growth retainer; monthly KPI reporting.

The single biggest determinant of whether this 11-week plan holds is your feedback speed. Every approval gate you delay by a week pushes the launch by a week — and often by more, because designers and developers rebook your slot behind other clients when you go quiet. Treat your own response time as a project deliverable.

How the process flexes by project type

The nine stages are universal, but their weight shifts dramatically by project type. A landing page compresses the process to days; an ecommerce build expands several phases substantially.

Single landing page. Discovery, strategy, and IA collapse into a single half-day. The whole process runs 1–3 weeks. See landing page design for the conversion-focused variant of this workflow, where design and copy carry almost all the weight.

Brochure site. The five-to-six-page classic. All nine stages happen but discovery and strategy are informal and bundled. 3–6 weeks, CA$2,000–$6,000.

Ecommerce. Discovery expands to cover catalogue structure, payment and shipping, and tax; development balloons to handle product import, variants, Canada Post integration, and PCI-DSS-compliant checkout; QA adds live transaction testing. See ecommerce website design and Shopify web design for the platform-specific flows. 12–20 weeks, CA$15,000–$50,000+.

Redesign / migration. Discovery adds a content inventory and a full URL audit; launch adds a comprehensive 301 redirect map to preserve existing rankings — the highest-risk step in any migration. 4–12 weeks.

Custom web app. The process gains formal sprints, a staging-to-production pipeline, and continuous QA. See custom development vs. builders to decide whether your project genuinely needs this. 16–40 weeks.

Client checklist: your job at each stage

The process only runs on time if you hold up your side. Most delays are client-side, not designer-side. Use this checklist to know exactly what is expected of you at each gate.

• ☑ Discovery: attend the kickoff, grant analytics access, name three competitors, and approve the single primary KPI in writing.
• ☑ Strategy: approve the platform decision, confirm every integration you need, and state your language requirement (EN, FR, or bilingual).
• ☑ IA & wireframes: review the sitemap for missing pages and sign off on structure before any styling begins.
• ☑ Visual design: appoint one decision-maker, gather internal feedback into a single reconciled list, and respect the agreed revision-round count.
• ☑ Content: deliver copy and assets on the agreed date — or pay for a copywriter. This is the deadline that breaks projects.
• ☑ Development: review the staging site, test every form and integration with real data, and confirm you own the domain, files, and hosting.
• ☑ QA: do a final brand and accuracy pass — name, phone (test it rings), hours, claims — and submit the contact form yourself.
• ☑ Launch: provide DNS access promptly, complete CMS training, and run a live smoke test in the first hour.
• ☑ Post-launch: decide on a maintenance plan before the bug-fix window ends, and book a monthly KPI review.

Common ways the process goes wrong

Most failed Canadian web projects fail for the same handful of reasons. Recognizing them early is the cheapest insurance you can buy.

• 🚩 No defined KPI. If nobody can say what the site is supposed to make happen, every design debate becomes a matter of taste and the project drifts. Lock the KPI in discovery.
• 🚩 Undefined content ownership. The number-one cause of stalled projects in Canada. Assign it in the contract — you, an independent writer, or the agency.
• 🚩 Skipping the wireframe gate. Jumping straight to high-fidelity design means every structural change happens on an expensive layer. Approve structure first.
• 🚩 Committee feedback. Five stakeholders sending conflicting notes triples revision cycles. Appoint one decision-maker who reconciles internal input.
• 🚩 Scope creep without change orders. "Just one more page" mid-build, repeated, is how a fixed-price project becomes unprofitable and resentful. Use written change orders.
• 🚩 No 301 redirect plan on a redesign. Launching a redesign without mapping old URLs to new ones can erase years of search rankings overnight. It is the highest-risk step in any migration.
• 🚩 Treating launch as the finish line. No maintenance plan means an outdated, eventually hacked site. No optimization means a conversion rate that never improves. Post-launch is where the return lives.

Tools used across the modern web design process

For transparency, here is the typical toolchain a Canadian designer or agency uses at each phase in 2026. You do not need to know these, but understanding them helps you read a proposal and ask better questions.

Discovery & strategy: Google Analytics 4 and Search Console for audits, Ahrefs or Semrush for keyword and competitor research, Notion or Google Docs for the brief, Miro for workshops.

IA & design: Figma is the near-universal standard for wireframes, prototypes, and high-fidelity design. FigJam for sitemaps and user flows.

Content: Google Docs for copy, Adobe Stock or Shutterstock for imagery, TinyPNG or Squoosh for image compression, DeepL or a professional translator for French localization.

Development: WordPress with GeneratePress/Kadence, Webflow, or Shopify for SMB builds; VS Code, Git, and frameworks like Next.js for custom work. AI-assisted tooling is increasingly part of the flow — see AI web design tools 2026 for where it helps and where it does not.

QA & launch: BrowserStack for device testing, Lighthouse and PageSpeed Insights for performance, WAVE or axe for accessibility, and the hosting provider's staging-to-production deployment tools.

FAQ: the web design process in Canada