News

Custom Website Development Process: From Figma Design to Website Launch

First Published: Jun 6, 2025Last Updated: Jul 28, 20265 min read

Category: Web Development

Custom Website Development Process: From Figma Design to Website Launch

A Tauranga-based accounting firm came to Pulsebay midway through what was supposed to be a straightforward website refresh with a previous agency. The brief had been agreed months earlier. What arrived looked nothing like what was pitched, the launch date had already slipped twice, and nobody could explain why. The firm's practice manager summed it up on the first call: “We just want to know what's actually happening at each stage, and when.”

Most NZ businesses have been through a website project that didn't go the way they hoped timelines blew out, communication went quiet, the final result looked different from what was discussed, and content delays pushed everything back by months. A good process prevents these outcomes. Here's Pulsebay's end-to-end custom website development process: the key stages, roughly how long each takes, and what we need from you to keep things moving, told partly through how it played out once the firm's project restarted properly.

Key Takeaways

  • A website project has nine distinct stages, and skipping or rushing any of the early ones is what causes the timeline and budget problems that show up later.
  • SEO structure gets decided before any page is designed. A site built without this foundation underperforms in search for years and is expensive to fix afterward.
  • Content, not design or development, is the most common cause of timeline overruns getting ownership and deadlines agreed at the very start prevents most delays.
  • Wireframes exist because structural changes are cheap before visual design and expensive after it getting the structure signed off early is what keeps the design phase fast.
  • Launch is the most heavily prepared single day in the process, not a casual final step and the weeks immediately afterward matter as much as the day itself.

What Are the Key Stages in a Custom Website Development Process?

A website project usually involves nine stages: discovery, information architecture and SEO structure, content strategy, UX and wireframing, Figma design, development, quality assurance, launch, and handover and training. Each phase builds on the previous one, so the final website is designed to generate results, not just look good.

Custom Website Development

A website project usually involves nine stages: discovery, information architecture and SEO structure, content strategy, UX and wireframing, Figma design, development, quality assurance, launch, and handover and training. Each phase builds on the previous one, so the final website is designed to generate results, not just look good.

Phase 1: Discovery (2–3 Weeks)

Before any design starts, we need to understand your customers (who they are, what problems they're solving, how they search for what you offer), your business goals (lead generation, ecommerce, credibility, self-service the goal hierarchy determines every design decision downstream), your current situation (what your existing site does well, where it falls short, current rankings, analytics data), your competitors, technical requirements, and a content inventory.

The discovery phase outputs a project brief both parties agree on before design begins. What we need from you: access to Google Analytics 4 and Search Console, existing brand assets, and a one to two hour discovery session with key stakeholders. This is also where an SEO strategy starts taking shape, well before any page is designed.

For the accounting firm, discovery surfaced something the previous agency's brief had never asked: the firm's actual bottleneck wasn't visual appeal at all, it was that prospective clients couldn't tell from the homepage whether the firm handled small business or personal tax costing enquiries before a redesign was even relevant.

Phase 2: Information Architecture and SEO Structure (1–2 Weeks)

Before design, we map the complete page structure to every page, its URL, its primary purpose, and the keyword it targets. This is why sites built this way rank: SEO is baked into the architecture, not applied as an afterthought. We're asking what pages need to exist for every target keyword, how the information hierarchy is structured for users and Google, where internal links distribute authority, and which pages are conversion-focused versus traffic-focused. The output is a sitemap document, a complete visual map annotated with target keywords and page purposes.

A site launched without an intentional SEO-driven structure underperforms in organic search for years, and the structure can't be easily fixed after launch without significant rework. For the firm, this phase produced separate, clearly targeted pages for business and personal tax services; the exact gap discovery had surfaced instead of one blended “services” page trying to speak to both audiences at once.

Phase 3: Content Strategy and Copywriting (Overlaps with Design)

Content is the most common project bottleneck. We identify early exactly which pages need client-provided content and which we write in-house, with a content calendar and firm deadlines.

We typically write: service page copy, homepage copy, FAQ answers, blog posts, meta titles and descriptions, CTA text

We typically need from you: project examples or case studies, team bios, company history, technical details only you know, proprietary data or statistics

Professional photography of your team and workspace meaningfully outperforms stock photography for conversion if it's in scope, schedule it early, since waiting on photos at the end of a project adds two to three weeks. Most projects run longer than planned because client-side content arrives late; clear deadlines and a lightweight content brief per page help significantly.

Quick check: If nobody on your side can say, right now, who owns writing the About page and by what date, that's the gap most likely to blow out your timeline later.

Phase 4: UX and Wireframing (1–2 Weeks)

Before visual design, we wireframe the key pages typically the homepage, a service page template, a landing page template, and the contact page. Wireframes are black-and-white structural layouts showing how sections are arranged, where CTAs appear, how navigation works, and what's above versus below the fold. Wireframes are cheap to change; a page in final visual design is expensive to change. Getting structural decisions confirmed here means the design phase runs faster with fewer revisions.

Plan. Structure. Wireframe.

Phase 5: Visual Design in Figma (2–4 Weeks)

With wireframes approved, visual design begins in Figma across desktop and mobile breakpoints a design system (typography, colour palette, buttons, spacing, icon style), reusable components (hero blocks, service cards, testimonial sliders, CTA banners, navigation, footer), then full page design using those components.

We typically do two rounds of feedback: the first for overall direction, the second for refinements that keeps revision cycles efficient rather than cycling indefinitely. You get full Figma access throughout with real-time commenting; a free viewer account is enough, no paid Figma seat required. For the firm, this was the phase where the redesigned homepage now leading with the business-vs-personal distinction from Phase 2 finally looked the way the original brief had promised months earlier.

Phase 6: Development (3–6 Weeks)

With designs signed off, development begins. Our standard stack for NZ business websites:

WordPress with Gutenberg blocks for businesses needing a robust CMS non-developers can update. We build on clean, lean code, not page builders like Elementor or Divi, which produce bloated output that consistently fails Core Web Vitals. See our separate breakdown on whether WordPress is still worth using in 2026.

Next.js (headless) for businesses prioritising maximum performance or multi-channel content delivery. See our headless development guide.

Images are served in AVIF/WebP with responsive sizing, JavaScript loads asynchronously where possible, and Core Web Vitals targets (LCP under 2.0s, INP under 200ms, CLS under 0.1) are tested throughout development, not just at the end the same discipline covered in our page speed and SEO guide. Any third-party integrations CRM, booking system, payment gateway, accounting software are built and tested during this phase. All development happens on a private staging URL, so you can review progress without affecting any live site.

How Do Custom Web Developers Handle Mobile Responsiveness?

Every page is designed at both desktop and mobile breakpoints from the start, not adapted afterward component design (hero blocks, cards, navigation) is built to reflow correctly across screen sizes as part of the design system itself. During QA, responsiveness is tested on real devices (iOS Safari, Android Chrome) rather than just resizing a desktop browser window, since real devices catch touch-target sizing, font scaling, and layout issues that a resized browser window can miss.

Template-Based vs Custom Website Development: What's the Difference?

A custom build starts from your specific content architecture and SEO structure a template starts from someone else's generic structure that your content gets fitted into

Custom development uses clean, lean code built for your exact requirements templates and page builders (Elementor, Divi) generate bloated output that struggles to pass Core Web Vitals

A custom site scales with your business adding a booking system, custom integration, or unique page type doesn't require fighting a template's constraints

Templates are cheaper and faster for very simple, generic needs custom development pays off once performance, SEO structure, or specific functionality genuinely matter

Design and Develop

Phase 7: Quality Assurance (1–2 Weeks)

Before anything goes live, structured QA runs across the complete site: cross-device and cross-browser testing (Chrome, Safari, Firefox, Edge, iOS Safari, Android Chrome on real devices), performance testing (PageSpeed Insights on homepage, key service pages, and landing pages any score below 85 on mobile is investigated and fixed), an SEO audit (unique meta titles and descriptions, correct H1 hierarchy, validated schema markup, correct XML sitemap, properly configured robots.txt, tested 301 redirects), full functional testing, and a basic WCAG 2.1 AA accessibility check (colour contrast, keyboard navigation, image alt text, form labels).

Phase 8: Launch

A smooth launch requires preparation: domain DNS records ready to point to new hosting, SSL certificate ready for the new domain, 301 redirects from all old URLs documented and tested, Google Analytics 4 and Search Console access confirmed, and an old-site backup taken before any changes. We prefer weekday afternoon launches NZ business hours, but later in the day when traffic is typically lower and the team is available if anything needs attention. We monitor analytics, uptime, and Search Console coverage closely for the first two weeks post-launch.

Launch and Connections

Phase 9: Handover and Training

After launch: a recorded CMS training walkthrough covering how to update pages, add blog posts, manage images, and update custom fields yours to keep and share with new team members plus a handover document with login details, hosting details, and support contacts. Most clients move onto a website maintenance plan after launch, covering security updates, backups, performance monitoring, and support for minor updates.

Where the Firm's Project Landed

The restarted project launched on schedule against the timeline agreed at the end of discovery, the same discovery phase the original agency had skipped straight past. Within the first month, the practice manager reported a noticeable shift in enquiry quality: prospective clients were now arriving already knowing which service they needed, instead of asking the front desk to explain the difference between the firm's business and personal offerings. That was the exact problem Phase 1 had identified, months before a single page was designed.

How Long Does a Custom Website Take?

Site typeTimelineNotes
Simple brochure site (5–8 pages)8–10 weeksAssuming content is ready early
Medium business site (10–20 pages)10–14 weeksContent timeline is critical
Complex site (20+ pages, integrations)16–24 weeksDiscovery and integrations extend timeline
Ecommerce website14–20 weeksProduct data migration adds complexity

These assume responsive client engagement. The most common cause of timeline overruns is content delays copy, photography, and approval cycles taking longer than planned. The second most common is scope creep: new features or pages added mid-project without a timeline adjustment.

What Are the Typical Costs Involved in Custom Website Development?

Cost scales with the same complexity tiers as the timeline above: a simple brochure site typically sits at the lower end of a custom build, a medium business site with more pages and some integration work costs meaningfully more, and a complex or ecommerce build with multiple integrations and custom functionality runs highest. Exact figures depend on your specific page count, content needs, and integrations. Our website cost calculator gives a tailored estimate, and a discovery call gives you an exact number once scope is clear.

Design to Launch

Common Challenges in the Custom Website Development Process

Content delays: Copy, photography, and approval cycles are the single biggest cause of timeline overruns

Scope creep; New features or pages added mid-project without adjusting the timeline

Vague feedback: “It doesn't feel right” requires follow-up before anything can change; specific feedback (“the headline feels too small relative to the hero image”) moves projects faster

Slow approval cycles: Every review round that stalls pushes every subsequent phase back

Skipping structure for speed: Sites launched without an intentional SEO-driven architecture underperform for years and are expensive to restructure later

Best Practices for Managing a Custom Website Development Project

Confirm content deadlines and ownership (who writes what) at the very start, not partway through

Get structural decisions signed off at the wireframe stage, before visual design begins

Give specific, actionable design feedback rather than general impressions

Review progress on staging throughout development rather than waiting for a single big reveal at the end

Plan the maintenance and support arrangement before launch, not as an afterthought once the site is live

Which Companies in New Zealand Offer Custom Website Development Services?

Look for an agency that treats SEO structure, performance, and content as part of the build rather than add-ons. Many NZ web design shops hand over a finished-looking site with none of that groundwork done, which shows up in search rankings a year later. Pulsebay's web development work covers custom WordPress, headless, and ecommerce builds on Shopify or BigCommerce all with SEO optimisation built into the process described above, not sold as a separate line item. 

Process

How Do I Choose the Right Custom Website Development Company?

Ask to see their actual process a vague “we design it, you approve it” answer is a warning sign compared to a documented phase-by-phase approach like the one above

Confirm whether SEO structure and performance targets are built into development or handled separately (and by whom)

Check whether ongoing support and maintenance is offered after launch, not just the initial build

Ask for a realistic timeline with the biggest risk factors named upfront (usually content) rather than an optimistic best-case number

Final Thoughts

A great website isn't the result of a single design or development decision, the outcome of a well-planned process. From discovery and SEO planning to design, development, testing, and launch, each stage plays a critical role in creating a website that performs for both users and search engines. By following a structured approach and working with the right development partner, your business can launch a website that's built for long-term growth, not just launch day.

Ready to Build a Website That Delivers Results?

Whether you're launching a new website or replacing an outdated one, the right process makes all the difference. Pulsebay designs and develops high-performing websites that are fast, SEO-friendly, and built to support your business goals from day one.

Book a Website Strategy Call

FAQ

How long does custom website development take?

Most custom websites take between 8–14 weeks depending on site size, content availability, and technical requirements larger or ecommerce builds can run 14–24 weeks.

Why do websites use Figma before development?

Figma lets you review the design and user experience before any code is written, which is far cheaper to change than a page that's already been developed.

What causes website development delays?

The most common reasons are delayed content, slow approval cycles, and new features or pages added after the project has already started.