Help! I've been asked to give feedback on wireframes. January 21, 2024 | Client Resources, Design Philosophy

Let’s start with the basics. What are wireframes?

A wireframe is a visual representation of a web page, stripped down to its essential components and structure. It serves as a skeletal framework, outlining the structure, narrative, and components of the website without diving into the nuances of visuals and aesthetics.

Wireframes are meant to communicate:

• The architectural framework of the site, showing how different content elements (such as mission statements, stories, and calls-to-action) will be strategically positioned on each page.
• Key storytelling flows, showing the “notes” of the narrative that each page will hit. For content-driven websites, storytelling is key.
• Content hierarchy of information. Through the arrangement of elements such as headers, subheadings, and body text, we can ensure that the most critical information takes precedence.
• The strategic placement of functional elements, such as donation callouts, forms for engagement, and navigation menus that guide visitors to essential information.

Why are wireframes such an important phase in the design process?

Because they are low-fidelity, wireframes help prevent misunderstandings by providing a tangible representation early in the design process. They allow for quick adjustments and refinements before committing to the more time-consuming tasks of high-fidelity design and development.

How does the site map relate to the wireframes?

Prior to receiving the wireframes deliverable, your team has likely already reviewed and approved the final site map. The site map and wireframes are connected deliverables, with the former laying the groundwork for the website’s structural hierarchy and the latter delving into the detailed blueprint of each page.

You’ll notice two important aspects of Simpatico’s site maps:

• Each page is numbered, and the number corresponds to the wireframe.
  For example, the “Who We Are” page in the site map is labeled 1 and each child page follows the numbering structure 1a, 1b, etc. These headings correspond with the labels on our wireframes.
• Each page is color coded in the site map.
  The color indicates how the page will be built in the content management system, WordPress. A green box means that the page will be built from a library of designed modules that we’ve created.

What do you mean ‘modules’ within a page builder?

Certain pages (the green boxes in the site map) will be constructed using distinct modules, which are like building blocks containing specific pieces of information or functionality. What’s noteworthy is that these modules aren’t just a part of the current wireframes; they will soon become accessible within the WordPress platform in any page constructed using the “page builder” template.

This means that, in the future, when you’re ready to create or modify pages on your nonprofit website, you’ll have the power to assemble these modules in WordPress like pieces of a puzzle. This modular approach not only streamlines the way information is presented on the wayfinding pages but also empowers you to easily manage and customize your website’s content in a straightforward manner.

Check out this Q&A for more information about how we leverage the power of modular design.

Is there a logic to which pages should be modular and which should be longform content? Should I approach them differently as I give feedback?

Within a website’s architecture, some pages serve as crucial wayfinding hubs, strategically designed to guide users through the digital landscape. These wayfinding pages act as informational junctions, offering clear signposts and pathways that allow users to effortlessly offramp to specific subsections of the site. Emphasizing concise and navigable content chunks, these pages are instrumental in directing visitors to key sections such as events, donations, or success stories.

On the other hand, longform content pages serve a different purpose, providing in-depth narratives, articles, or stories that encourage users to delve into comprehensive and immersive content experiences. While wayfinding pages optimize navigation efficiency, longform content pages aim to captivate and engage users in a more extensive exploration of the website’s offerings, ensuring a harmonious blend of accessibility and depth in the overall user journey.

What feedback is helpful?

As you review all of the wireframes, it may be helpful to keep the following questions in mind as you look to provide feedback:

• If you think about each user persona (e.g. donor) and what they might be looking for on the site, is the navigation structured in a way that fits their mental model and does it allow them to easily access the information they need?
• On each storytelling page, does the wireframe hit the right “notes” of the storytelling narrative? Is the information hierarchy correct? Exact copy or content aside, does the wireframe align with the storytelling approach and communication style desired by your company or organization?
• On the top level of pages in the site map, does the wireframe adequately address the offramps to subsections, ensuring smooth wayfinding for users? Is enough context given to help them understand where they are going?
• Think about what actions you want your users to take. Do the wireframe call to actions encourage users to take these actions? Are they prominent enough?
• Think about the content you plan to create and share in the future. Have the wireframes provided the space to feature this content?

What feedback should I avoid giving the team at this phase?

Since wireframes are the lowest fidelity deliverable in the website design process, it’s worth noting what feedback should be saved until later parts of the design process. Prioritize overarching goals and functionality over finer visual or copywriting details during this foundational phase. Refrain from premature emphasis on visual aesthetics, allowing the wireframes to establish a solid foundation first. Instead, encourage feedback that contributes to the refinement of narrative flow and strategic content placement before delving into visual specifics.

We have a large group of stakeholders. Do you have any tips for facilitating a smooth process of collecting feedback during the wireframing phase?

• Begin with wireframe education.
  Ensure stakeholders have a clear understanding of the above: what wireframes are for, and what’s helpful from a feedback perspective.
• Provide context.
  Conduct guided presentations or walkthroughs of the wireframes, offering context and explanations for each section to help stakeholders navigate and comprehend the design choices.
• Explain what constitutes helpful feedback.
  Direct stakeholders’ attention to key elements such as content hierarchy, navigation pathways, and interactive features, focusing on aspects critical to the organization’s goals.
• Create efficient and effective feedback channels.
  We’ve found that if a stakeholder has a straightforward, actionable comment (“Move this section higher on the page”), inline comments are effective. However, if a stakeholder has an open-ended question (“should we be promoting the blog here? Or news?”) it’s helpful to write this question down and discuss it in an internal meeting until consensus is reached. This helps to avoid the comment section devolving into an overwhelming number of open-ended questions and opinions. Organize collaborative feedback sessions for stakeholders to discuss and align on design choices, fostering a collective understanding and consensus.
• Set clear timelines and deadlines.
  This helps the group maintain momentum and ensure that the process aligns with the project timeline.