Unpacking the process: What actually happens when we build your new website?

Websites can be a little confusing, and there’s a million and more different ways to build one. You’re probably not the only one wondering what my process looks like, so here’s an in-depth explanation of everything you can expect when you work with me! Buckle up because this might be a long one...
sitting at computer

Phase 1: The discovery call

I like to start everything off with a discovery call (which is really just a friendly chat about your business and what services or products you offer). This conversation helps me to understand your business in-depth, your goals, and what success looks like for your new website! Do you want to:

  • Gain more leads through Google?
  • Update important information on your new website internally?
  • Have a beautiful, modern website that looks great on all devices (mobile/iPad/desktop/TV).
  • Showcase your portfolio to attract higher-value projects or clients?
  • Reduce the volume of basic customer support inquiries through clear FAQs and other structurally designed changes.
  • Enter a new market or launch a new product/service?
  • Increase your brand authority and build a deeper trust with your audience?

Whatever it is, I want to talk about it!

We’ll also discuss the right tools for your project (think website CMS, plugins, page-builder, platforms, hosting), and narrow down the scope so that I can send you a tailored proposal in the next phase!


Phase 2: The proposal

It’s really important to define the overall project scope and establishing a clear strategy based on competitor analysis and market trends right from the very start. This is exactly what happens during this phase.

a) What you receive

Following an internal analysis of your business and our discovery call in stage 1, you will receive a tailored proposal reflecting the specific work required and a cost calculated for your website project.

b) Potential deliverables

Things that might be included in this proposal based on our discovery call and my research include (and are definitely not limited to):

  • Site mapping
  • Wireframing (structural blueprint)
  • Copywriting
  • Brand guidelines
  • Website design
  • Website development
  • Custom development features
  • SEO research and implementation

Take some time to read over this proposal and make sure you’re completely happy with the strategy and scope before we move forward. Your feedback is always welcomed, so please request any changes or ask for clarification before we move onto the next phase. Final approval of this proposal will be confirmed by signing the project contract which I’ll send through to you once you’ve given the green light.


Phase 3: Structure & mapping

This phase translates the strategy into a clear, structural plan, effectively serving as the website’s blueprint (you can’t build a house without one! Well you kind of can but you really shouldn’t). Key deliverables may include site mapping, wireframing and content organisation, which should be planned before any visual design work begins.

a) Site mapping

  • Every website needs a sitemap! This is important so we know which pages need to be created and how they are all linked together. This is essentially a “table of contents” for the entire site, laying out the hierarchy of all pages and defining their logical flow.
  • Sometimes my clients provide this to me, other times I develop it myself based on competitor research and our discovery call. This is really important and ensures every page aligns with your business goals and user needs.
  • By completing the sitemap, we establish a strong, logical foundation for the wireframes, design and the final website development!

b) Wireframing:

  • This stage may be required for larger, more complex projects. I’ll develop wireframes for the main page content before the design so we know exactly what content will go where.
  • What exactly is wireframing? Wireframing is creating a visual plan for a website page before we start decorating or adding colour. I usually use a tool called Relume, and my wireframes focus only on the website structure, using black, white, and grey boxes with text.
  • Wireframes establish the placement of content, Call-to-Action (CTA) buttons, and navigation elements to optimise usability and ensure all website content is in the right place.
flinders university sport and fitness wireframing and sitemap
Sitemap & wireframing using Relume

c) Organising the website content

  • Determining exactly what content (copy, imagery, video) needs to be created or gathered is really important before we start the design. I’ll give you access to a Google Drive folder, and you can throw everything you already have in here, then we’ll come up with a plan for the rest of the content.
  • If you’ve organised professional photography, we can use placeholders until this is ready. Otherwise, I’ll source stock imagery during the design process.
  • If you’ve opted for copywriting with me, I’ll work directly with my partner by sharing the finalised assets above. This means we will be able to time the delivery of the written content with the design and development timelines, ensuring all website elements are ready to go at the same time!

Phase 4: The design

Finally, it’s time to move onto the design! This is where the project comes to life visually and focuses on the Figma Prototype and your feedback. So, what does the design process include?

a) Website branding

  • Applying your brand’s colour palette, typography, and visual assets to the Figma design file. This stage may also incorporate a mood board, used to communicate the “feel,” or style of your new website.
moodboard examples
Mood board examples

b) Figma desktop prototype

  • I’ll create a home page for your feedback, followed by the rest of the pages outlined in our scope. Figma offers a way to visualise the design and animations, and real-time collaboration – everyone involved can give specific, section-by-section comments.

c) Please give me feedback!

  • Finalising the Figma prototype is a really important collaborative step. Your input is so valuable to confirm the design aligns with your vision before development work begins. Once development has started, changing the design is very difficult to do, so make sure you share all of your thoughts with me during this phase!

d) Responsive mobile and tablet design

  • Once the desktop version is signed off, I’ll work on the mobile design for your feedback. Larger projects may also require a tablet/iPad design prototype. Next up, we build!

Phase 5: We build

Leave it with me! I’ll quickly build out your site according to the Figma prototype, using the strategy, sitemap, structure and design prototype we’ve decided on together. Warning: It gets a bit technical below, so feel free to reach out if you have any questions about anything!

a) Website development:

  • Turning the approved Figma designs into a clean, responsive, and functional website using Webflow or WordPress. For e-commerce, I work with Shopify. I will also share a staging link with you after building out the main pages so that you can view the website’s progress and provide feedback.

b) Content integration & technical SEO

  • Placing all finalised copy, images, articles, products and media into the developed website.
  • Alt tags and SEO Titles/Meta descriptions will be implemented here.
  • Analytics, Search Console, Recaptcha & any other relevant tracking tags will be added here.
  • URL redirects, 404, policy pages, website links will also be audited.

c) QA testing

  • Cross-browser (Safari, Chrome, Firefox etc.) and multiple device testing will occur across Desktop/Tablet/Mobile.
  • This bit is super important – your extra pair of eyes after the build is essential for final confirmation of links and bits and pieces before the launch!

d) The launch:

  • I will update the domain records to ensure a seamless transition to the new website, the sitemap will also be resubmitted to Google.
  • Speed tests will be conducted (GT Metrix, Lightroom, PageSpeed) once the site is live.
  • I’ll also provide training on content management, and offer ongoing support and maintenance as needed!
mockups of tl engineering devices - desktop, mobile, tablet
Recent website launch mockup – TL Engineering

Phase 6: Beyond the launch: Ongoing maintenance

Once your site is successfully launched and performing (e.g., loading quickly and indexed by search engines), ongoing maintenance and ad-hoc work are often required. I offer these services so you don’t have to worry about a thing.

The scope of these services is usually defined in Phase 1, or you may decide you’d like a new component added at a later date. As an exclusive benefit, if you opt into hosting with me, you will receive access to better discounted rates for any ongoing ad-hoc work and any future work! This can include:

  • Routine updates to the CMS (WordPress especially, plugins, etc.) – Included in my hosting!
  • Checking site speed, uptime, and backing up the website regularly, so you don’t lose any of your new blog posts and content updates – Included in my hosting!
  • While a few of my clients choose to update their new website themselves, a lot simply don’t have the time, or would prefer a professional to take care of the ongoing work and new components, that’s where I come in with my ad-hoc rates. Read more about this on my pricing page.

Ready to start your new website?

If you’re looking for a clear strategy, a transparent build process, and a website designed for real business growth, let’s talk. Book your discovery call with me here and let’s get started on Phase 1.

Join my newsletter

Sign up to my newsletter to get updates on web design trends and behind-the-scenes project insights. I'll also let you know when I'm offering new products and services!
linkedin light
facebook icon small 1
behance light

Google reCaptcha: Invalid site key.

sam facing towards computerretro swirl right