wiki/knowledge/website/website-design-wireframing-process.md · 666 words · 2026-04-05

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:

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:

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.

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

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."

Sources

  1. Wordpress Forms Plugin Selection
  2. Jane App Crm Evaluation
  3. Index
  4. Client Meeting Structure