My Website Process: From Prospecting to Production

Joshua McSorley

15 min read

Building a site isn’t just “design a page, ship it.” It’s a conversation, a sprint, and a coaching session rolled into one. Below is the play-by-play I walk every client through, peppered with tips and, where it helps, prompts for screenshots you can drop into your own post.

1. The IF Call, Rapid-Fire Discovery

The IF call exists for one reason, to decide whether we should work together. To do that, I run through a 30‑question checklist covering:

Core requirements: features, integrations, copy needs, compliance, future phases
True scope: estimated page count, complexity, and whether outside specialists are needed
Time and budget realities: launch deadline, cash flow, and any hard constraints
Client experience level: first‑time site owner or seasoned marketer
Expectations: how involved they want to be, preferred feedback style, success metrics
Red‑flag hunting: hidden stakeholders, last‑minute pivots, or “my cousin will design the logo” surprises

By the end, I know if we are a fit and I have the raw material to build an accurate roadmap.

Screenshot idea: Zoom split screen, left column showing “IF Call Question Bank,” right column highlighting three example questions in a Notion checklist.

2. The HOW Call, Turning Notes into a Game Plan

Next comes the HOW call. Here’s what happens:

Recap the IF call findings in plain English, not jargon.
Walk through the draft project plan, milestones, and estimated timeline.
Explain the website’s job description: build trust, handle FAQs, shorten the sales cycle.
Clarify what a website is not: it will not magically drive traffic on day one, that requires a separate marketing engine (SEO, ads, email, content), which we can explore later.
Open Q&A to catch any blind spots before contracts fly out.

Screenshot idea: A Keynote slide titled “Your Website’s Job” with two columns, “IS” vs “IS NOT,” each listing three bullets.

3. Onboarding & Kickoff

Payment clears and your customer portal goes live. I drop in a living project plan, milestones, and a simple traffic‑light status so you always know where we stand.

Welcome email highlights

Link to the portal
Snapshot of the milestone timeline
My feedback philosophy — too little feedback stalls progress, too much sends us in circles, either one extends the timeline and nudges the price
Kickoff Call button with three suggested time slots
Kickoff Questionnaire link, a 15‑question form that digs into mission, offers, target audience, pricing, and competitors

Why the form matters
I need those answers in writing before we meet, it lets me prep wireframes and strategy faster. You can skip a question if it truly does not apply, but partial answers slow us down and may push the launch date.

Inside the portal

Project Overview card mirroring the timeline
Two‑minute video tour on how to upload docs, submit new marketing requests, book calls, or hit Pause / Cancel
Kickoff Questionnaire tile highlighted in yellow until it is complete
A status badge reading “Dependency, Questionnaire Due” until you click Submit

Screenshot ideas
• Inbox view of the welcome email with the “Complete Your Kickoff Questionnaire” line circled
• Portal home screen showing the yellow “Questionnaire Due” banner above the milestone checklist

This quick hand‑off, usually done within 24 hours, keeps everyone in sync and ensures we start the project with all the information needed to hit the ground running.

4. Discovery Synthesis with AI Assist

With the questionnaire in hand I gather every scrap of discovery material, call notes, form answers, and a quick round of competitor scans, then distill it all into four working documents:

Lean One‑Page Business Plan, a high level snapshot of goals, offers, and revenue streams
Ideal Customer Profile that spells out pains, gains, and decision triggers
Brand Tone & Voice Guide so every headline sounds like them, not generic lorem‑ipsum
GPT Instructions Sheet, clear prompts that tell the model, “Act like a senior UX copywriter for this audience, in this voice, with these business goals”

I feed the set into a custom GPT workspace. From here the model can draft page copy, microcopy, and even alt‑text, while staying locked to the approved tone and strategy.

Clients get viewing access to all four docs, drop comments, and once they click “Looks good,” the artificial intelligence starts cranking out first‑pass copy for the wireframes.

Screenshot ideas:
• Side‑by‑side view, left pane showing the Brand Tone doc, right pane showing GPT chat with the instructions pasted at the top
• Comment thread on the ICP document with the client tagging “OK to proceed”

5. Discovery Synthesis with AI Assist

With the questionnaire in hand I gather every scrap of discovery material, call notes, form answers, and a quick round of competitor scans, then distill it all into four working documents:

Lean One‑Page Business Plan, a high level snapshot of goals, offers, and revenue streams
Ideal Customer Profile that spells out pains, gains, and decision triggers
Brand Tone & Voice Guide so every headline sounds like them, not generic lorem‑ipsum‑with‑flair
GPT Instructions Sheet, clear prompts that tell the model, “Act like a senior UX copywriter for this audience, in this voice, with these business goals”

I feed the set into a custom GPT workspace. From here the model can draft page copy, microcopy, and even alt‑text, while staying locked to the approved tone and strategy.

Clients get viewing access to all four docs, drop comments, and once they click “Looks good,” the artificial intelligence starts cranking out first‑pass copy for the wireframes.

6. Wireframes and First‑Pass Copy

With the sitemap approved, we shift from structure to sketches.

Load the content skeleton into Figma and block out page sections, keeping one page on screen at a time.
Open the custom GPT workspace that already contains the ICP, business plan, and tone guide.
Generate up to ten copy options per section, headline, subhead, body, CTA.
- Pick the strongest line, tweak by hand if needed, and drop it into the wireframe.
- Rinse and repeat until the entire page reads like a tight first draft.
Export the finished wireframe as a PDF, drop it into a Google Drive folder shared with all stakeholders.
Email the team with:
- A direct link to the PDF, comment access enabled.
- A 90‑second Loom clip showing how to use Drive’s comment tool.
- A friendly reminder, “Please collect everyone’s notes in this file before sending it back, scattered feedback slows us all down and stretches the timeline.”
Turnaround rhythm
- Small sites, one page per day, feedback cycle can wrap in 24 hours.
- Mid‑size sites, a full week of daily sends.
- Large builds, plan for two weeks of back‑and‑forth.
- Each new batch of edits starts only after consolidated feedback lands in the Drive file.

Screenshot ideas:
• Google Drive folder showing Page‑01‑Home.pdf with six comment icons.
• A Figma artboard side‑by‑side with the GPT chat window where ten headline variants are visible.

Once every wireframe is locked, we slide into UI design, confident that structure, copy, and stakeholder alignment are already checked off.

7. Visual Direction (Mood Boards)

With wireframes approved, we move into what often feels like an unofficial rebrand. Even when clients insist they’re not “rebranding,” most want a fresh look that better reflects where the business is headed.

Although we've been talking about visuals since the very first discovery call, this is the first moment you actually see the creative direction on screen, so expect some back‑and‑forth here. The process is not perfectly linear, conversations about look and feel surface at every stage, but the mood boards below are the first concrete artifacts of those discussions.

How we kick off the visual direction:

Mood Board Creation
- Start by building a mood board inspired by the competitors and reference sites the client already shared.
- Create a second mood board based on my own research—pulling from Webflow showcases, Creative Market, Envato Elements, and other design libraries.
- Send both mood boards over with a quick Loom video explaining the logic and design cues behind each one.
Feedback & Iteration
- Invite the client to react: which elements do they love, which feel off?
- Offer to schedule a call to walk through both boards and dig into their preferences.
- If needed, I’ll produce a third or even fourth mood board until the overall aesthetic feels locked in.
Gathering More Inspiration
- Ask if they’ve come across new websites or templates since we began.
- Remind them that I can adapt nearly any template style they like—even if it’s just one small detail—into a custom, polished design.
Setting the Visual Foundation
- Confirm any existing brand assets that remain fixed, such as logos or color palettes.
- Highlight that even with unchanged brand colors, we can deliver a fundamentally new look and feel—from typography to layout hierarchy to image treatments.

Screenshot ideas:
• Side-by-side of Mood Board A vs. Mood Board B with arrows pointing to “Client Favorites.”
• Example of a Webflow template screenshot with a note: “We can reimagine this vibe for your brand.”

This stage ensures we have a shared visual language before jumping into detailed UI design, making the rest of the design process smoother and faster.

8. High‑Fidelity UI Design

With a mood board selected we swap wireframe grays for full‑color polish.

Style‑Guide Overhaul in Figma
- Update typography scale, color palette, spacing tokens, shadows, bevels
- Break the grid when the concept demands it, but keep the system consistent under the hood
Homepage Hero First, Always
- I pour disproportionate time into this single section, copy hierarchy, visual punch, and interactive cues
- I tell the client up front, “Expect a deep dive here, once this clicks the rest of the site falls in line”
Component‑Level Experiments
- Try alternate layouts when the original wireframe feels cramped, card‑flip, slider, split hero, whatever best carries the message
- Content tweaks are OK, but every change is flagged in a comment so copy approval stays tight
Custom Visual Assets
- Commission or illustrate bespoke icons, data visuals, or product mock‑ups
- Drop the drafts into Figma components so they update everywhere instantly
One Page at a Time Workflow
- Finish the hero, then the rest of the homepage, ship a PDF to Drive, wait for consolidated feedback
- Move to the next page, rinse and repeat, most pages breeze by once the visual language is set
- Exception, if the About page needs a story‑heavy, photo‑rich design, it can rival the homepage in effort

Screenshot ideas:
• Figma canvas zoomed on the hero section with style‑guide tokens open in the side panel
• Before‑and‑after overlay showing the wireframe hero versus the high‑fi hero
• Comment callout highlighting “Content tweak, swapped ‘industry leading’ for ‘trusted by 500+ teams’”

After every stakeholder signs off on the high‑fi designs we are ready to jump into Webflow for the build phase.

9. Webflow Development and Staging

The high‑fi designs are signed off, now it is time to turn pixels into code.

Spin up the build
- Duplicate the premium Reloom Style Guide project in Webflow
- Pull in the exact components that match each Figma section name, one to one, so the class system stays clean
Match design, no surprises
- Recreate every layout, spacing token, and interaction from Figma
- If a component fights the grid, adjust the grid, never hack the content
Optimize and import assets
- Export custom illustrations, icons, and mock‑ups from Figma at 2× resolution
- Run them through ImageOptim or Squoosh to crunch file size
- Upload to Webflow, drop into their spots, verify pixel perfection on the canvas
SEO housekeeping
- Fill meta title and description fields for every page
- Use the target keyword in the H1, first paragraph, URL slug, and image alt tags
- Confirm heading hierarchy makes sense for screen readers
Responsive sweep
- Check desktop, tablet, and both mobile breakpoints for every page
- Tweak flex and grid settings until nothing overflows and line lengths stay readable
Push to staging
- Publish to project-name.webflow.io, send the link to the client as a near‑final build
- Include a Loom walkthrough pointing out any areas still waiting on client assets or copy tweaks

Screenshot ideas:
• Webflow Designer with the duplicated Reloom Style Guide open, classes panel visible
• ImageOptim window showing a before and after file size reduction
• Staging site on a phone simulator and desktop side by side, both aligned perfectly

Once the client gives the green light on staging, we are ready for analytics setup and the formal launch sequence.

10. Staging, QA, Analytics, Legal, and Privacy

The staging link is in the client’s inbox, so I tackle the behind‑the‑scenes essentials while they review.

Analytics stack
- Install Google Analytics 4 and create a basic event for form submissions
- Add Microsoft Clarity or Hotjar for heat‑maps and session replays if the client wants deeper behavior insights
- Drop in HubSpot, GoHighLevel, or any other marketing script the client already uses
Cookie consent
- Configure a consent banner with Cookiebot or Osano, matching the site’s color palette
- Verify that analytics and marketing tags wait for approval before firing
Legal pages
- Spin up privacy policy and terms of service pages, starting from vetted templates tailored to the client’s jurisdiction
- Link both pages in the footer and the cookie banner for instant compliance
Quality assurance pass
- Test all forms, CTAs, and dynamic interactions in Chrome, Safari, Firefox, and Edge
- Confirm CLS, LCP, and other Core Web Vitals are green in Webflow’s audit panel
Timing overlap
- By the time this work is wrapped, client feedback on staging usually lands in my inbox
- I fold their notes into a final revision pass, keeping legal and analytics settings intact

Screenshot ideas:
• Google Tag Assistant showing GA4, HubSpot, and Clarity tags firing correctly
• Cookie banner visible on the staging site with links to freshly built privacy and terms pages
• Webflow audit panel with green checkmarks for performance metrics

Once analytics ping, cookies ask nicely, and legal copy is live, we are ready for DNS switch and public launch.

11. Soft Launch, Feedback Sweep, and Hard Launch

Soft launch, limited spotlight

Point the domain to Webflow or remove the password so the site is publicly reachable, but skip any big announcements.
Ask the client to share the link with a tight circle, stakeholders, investors, trusted customers, friends, and family.
Watch Google Analytics and Clarity for early hiccups, broken links, high bounce sections, or rage clicks.
Collect every comment in one Google Doc, label each as “bug,” “copy tweak,” or “nice‑to‑have,” then estimate time and cost for anything that goes beyond a quick fix.

Revision sprint

Most soft‑launch notes are spelling errors, mobile padding tweaks, or image swaps, which are handled inside the existing scope.
If new sections or heavy design changes appear, agree on a mini‑scope and timeline so the launch plan stays realistic.

Hard launch, full spotlight

Push final revisions to production and run a last pass on forms, analytics tags, and cookie banner.
Client flips the megaphone switch in the channels that fit their strategy:
- Social media post with a crisp product shot and announcement copy
- Email blast to current customers or investors
- Turn on paid ads that have been warming in draft mode
Monitor traffic and conversions for the first 72 hours, ready to hot‑patch any surprise issues.

Screenshot ideas:
• Slack or email thread titled “Soft Launch Feedback Round” listing the consolidated comments.
• Google Analytics real‑time screen showing the first soft‑launch visitors.
• Social post mockup scheduled in the client’s platform of choice with the launch graphic.

12. Post‑Launch Support and Growth Opportunities

30‑day support (included)

For the first month after launch I run a light maintenance program
- Weekly checks on uptime, form deliveries, analytics flow, and Core Web Vitals
- Quick patch if a browser update shifts spacing or an image CDN hiccups
At day 30 we meet to review Google Analytics, Clarity heat maps, and any early conversion data
- Identify the top exit pages and easiest wins for next‑phase tweaks

Strategy session turned growth roadmap

During that call I walk through a checklist of growth levers and offer recommendations before asking for the upsell

CRM integration, HubSpot, GoHighLevel, ConvertKit, whatever fits their funnel
Lead magnet plan like a downloadable guide or calculator to capture emails
Campaign landing pages for paid ads or ABM outreach, templated for rapid spin‑up
Paid ads kickoff if they want immediate traffic, including creative, copy, and funnel setup
Recruitment microsite when hiring is the next bottleneck, think culture page, open roles, and ATS integration
Ongoing CRO and A/B testing to keep lifting conversion rates month over month

How I package the upsell

Present a menu of add‑ons, each with a quick scope, timeline, and monthly or project fee
Highlight quick wins first, then long term growth projects
Offer a 10 percent discount if they commit within two weeks to keep momentum rolling

Screenshot ideas:
• Analytics dashboard slide titled “First 30 Days, Wins & Gaps”
• Trello or Notion board mockup showing proposed Phase 2 tasks, each tagged CRM, Lead Magnet, Ads, or CRO
• Simple pricing card graphic, “Growth Bundle, 3 Months, $X per month, Cancel anytime”

With data driven insights and clear next steps, clients see the path from shiny new website to sustained growth, making the upsell feel like the natural next chapter, not a hard sell.

Wrapping Up

From a lightning‑fast one‑page build that ships in a week to a multi‑stakeholder enterprise site that stretches to three months, the timeline lives or dies on communication speed. That is why I run a subscription model, it places healthy pressure on both sides: you stay engaged because the meter is running, I stay motivated to move fast because momentum keeps us both winning.

The real “secret sauce” is not a fancy plugin, it is the shared‑responsibility mindset, clear expectations, and rapid iteration. When feedback is prompt and specific, every decision stays tied to a business goal, not personal preference, and the entire project feels less like a marathon and more like a rhythm.

If you are crafting your own web‑build process, steal whatever you like from this playbook, just remember to keep the conversation flowing and the client momentum high. Screenshots, video walk‑throughs, and simple status dashboards turn abstract steps into visible progress, and visible progress keeps everyone smiling.