Website Design Wireframing Process

When a client needs website design changes — button placement, conversion action highlights, layout adjustments — the team follows a lightweight wireframing process before any development work begins. This keeps designers from being over-burdened, ensures client alignment, and gives developers a clear target.

When to Use This Process

Use this process for incremental design changes rather than full redesigns. Examples include:

Repositioning or adding CTA buttons
Adjusting conversion action highlights
Restructuring page flow or content blocks
Swapping or relocating contact forms

For major redesigns, pull in a designer earlier and plan a more formal design phase.

Step-by-Step Process

1. Identify the Design Need

During a client call or internal review, capture the specific design problem: what's missing, what's underperforming, or what the client wants to change. Note it as a task immediately so it doesn't get lost.

2. Schedule a Working Session

Book a short internal working meeting (30 minutes is usually sufficient) between the account lead and project manager to draft the wireframe together. This avoids bogging down designers on work that can be handled at the strategy level.

Example: After the Shine/A New Dawn call, Sebastian and Melissa scheduled a 30-minute wireframe session for Tuesday at 2:30 PM rather than pulling in a designer immediately.

3. Create the Wireframe

The wireframe doesn't need to be polished — it should communicate:

Layout changes: Where elements move to or from
New elements: Buttons, forms, highlights being added
Flow: How a user moves through the page

Tools can be as simple as a shared doc sketch, Figma frame, or whiteboard screenshot. The goal is a clear visual reference, not a design deliverable.

4. Get Client Approval

Send the wireframe to the client for review before any development work begins. This prevents rework and ensures the client has buy-in on the direction.

Present options if there are multiple viable approaches
Keep the ask simple: does this match your intent?
Note any feedback and revise if needed

5. Hand Off to Developer

Once the client approves, pass the wireframe to a developer with clear notes. For minor layout changes, a wireframe alone is often sufficient — no designer involvement required.

If the changes also involve form replacement or CRM integration, loop in the relevant technical context (e.g., which form plugin is in use, whether a CRM like Jane is being adopted) so the developer has full context.

Roles

Role	Responsibility
Account Lead	Identifies design need, leads client approval
Project Manager / Strategist	Co-creates wireframe in working session
Designer	Involved only for larger or more complex changes
Developer	Receives approved wireframe and implements

Form changes: If a form is being replaced (e.g., switching from WP Forms to Gravity Forms, or adopting CRM-native forms like Jane), coordinate the wireframe with the form decision so development only happens once. See ^[1].
CRM integration: If the client is adopting a new CRM, hold off on finalizing form placement in the wireframe until the CRM decision is confirmed. See ^[2].
Hosting changes: Avoid kicking off backend or SEO work until hosting is resolved, as migrations can create rework. Coordinate wireframe timing accordingly.

Meeting Structure Note

When a client engagement spans multiple active projects, consider splitting client calls into dedicated 30-minute blocks per project rather than covering everything in one session. Jumping between topics in a single meeting can cause confusion for both the team and the client.

Sebastian noted after the Shine call: "I do think future meetings should be 30 minutes one, 30 minutes other, because I felt like I'd formatted it well, but then when I was actually talking about it, I realized jumping from one to the other was a little confusing."

^[3]
^[1]
^[2]
^[4]