Design Feedback 101: How to Give Feedback on a Wireframe

From infancy, we learn good and bad behavior based on the feedback we receive from those around us. We rely on feedback to shape our world and behaviors, and this continues into adulthood.  

The website design process is one situation where feedback is especially important. 

Wireframes and designs in general evolve into their best possible versions when we get insights from our team or even clients, but only if that feedback is given effectively. 

In this article, I will focus on how to do that specifically in the wireframe phase.

A little background on wireframes

If this is your first time going through a design process or are not familiar with wireframes, I encourage you to read our earlier post, Wireframing 101: 7 Benefits Behind Wireframing Your Website Redesign.

The tips on providing feedback on wireframes below can be applied to all types of wireframes discussed in the article above as well as one not mentioned in the previous article, content wireframes. 

At IMPACT we have begun to introduce content wireframes in our website redesign process as to replacement to medium fidelity wireframe (a grayscale rendering of a webpage focusing on structure and functionality). 

We will discuss reasons for this in an upcoming post, however, it is important to have some context to the wireframe type as they will be referenced in the article below. 

Content wireframes layout the basic structure and functionality of the webpage as one would expect from a wireframe. However, the difference lies in the fact that the website copy is written and implemented within the wireframe prior to the page moving into the design phase.

The purpose of the content wireframe is to provide more information for the designer on how to guide the user’s interaction through the design. 

Not only are content wireframes much more informative in this respect but the use of content wireframes speeds up the entire redesign process by establishing the content from the beginning of the project rather than part way through.

With that, let’s dive into wireframe feedback...

4 keys to providing feedback on wireframes

Now that we understand the importance of feedback as well as the importance of wireframes, here are the four most effective areas of focus when providing feedback to your designer on them.

1. Start with the goal in mind

Before even glancing at a wireframe, be sure to review the overall purpose or goal of the page and project. 

This may be something that was established collaboratively or by the strategist you are working with, but either way, it is important that everyone is in agreement with the primary purpose of the page you are reviewing.

When keeping the goal in mind (as the reviewer or primary feedback provider), you are forced to look at the functionality and structure and ask yourself if that goal is achieved, rather than getting caught up in specific design aesthetics. 

If you are unsure of the goal, here are a few questions to ask:

1. Is the primary purpose of the page to convert or inform? 
2. Does the subject matter of the page require longer content or short/concise content?
3. What type of media do you have or plan to have on the page? 

2. Put yourself in your user’s shoes

When designing or redesigning a website for your company or organization, it is easy to fall into the trap of injecting your personal options into the structure and design of the site. 

Structure and design feedback can easily turn into what you like and what you believe should be on the website if you are not careful. 

A website isn’t about you or your organization, it's about your customer or prospect. 

Therefore, when reviewing wireframes and designs it is important to ALWAYS put yourself in the consumer’s shoes. 

I often take a step back and reflect on my personal user behaviors when interacting with websites. The very things that annoy me are like the same things that annoy the average consumer. 

When it comes to user experience, ask yourself the following questions before reviewing and providing feedback on a wireframe: 

• Who are we building this website for? 
• Who do we want to purchase/signup/register for your goods or service? 

3. Scan for structure

If you are following along with the steps above, you now have the overall goal of the website and specific page in mind. At this point, you are ready to dig into the wireframe. 

Take a step back from the wireframe and do a complete scan of the page. Scroll through the page as if you were doing a quick scroll of a web page you just landed on. 

As you scan, observe the following:

• Does your eye flow down the page? If not, where do you get “stuck”?
• Which elements stand out and which areas are you overlooking?
• After you have identified the areas you are overlooking, are they necessary for the page or can they be removed to create a more concise purposeful page?

Once you have made your initial observations, take a closer look at the wireframe for a second time.

 At this point you will want to ask yourself the following questions:

• How does the structure support the navigation of the website?
• Is the page a user end point or where does each call-to-action take the user?
• Is the page length appropriate or necessary to achieve the overall purpose of the page? If there is a section that you are ‘on the fence’ with, more often than not you’ll want to remove it. 

This structural scan will help you ensure that the page reinforces its purpose and overall goal and make it easy for the user to do what you want them to do.

4. Understand the content

Once you have completed your structure review, it is time to review the content. 

Wireframes with page content allow you to review the text without the distraction of design elements. This gives you the opportunity to critically focus on the content.

When reviewing the content within the wireframe, pay close attention to whether or not the structure supports the content and goal or if the structure distracts the user. 

One way we at IMPACT like to test the content of the page is to ask ourselves the following, “if the user left the website 30 seconds after reviewing the page is the purpose or objective clear enough to the user?”

More often than not this simple test will help us identify clear gaps in our content and what needs to be done to close them.

When reviewing the content within a wireframe, you should also evaluate whether or not the most important areas of your business/product/service are defined on the page in an easily digestible way. 

This can be done by asking yourself the following questions:

• Does each section layout allow for the length of content needed to support the purpose of the page?
• How can different forms of content be used to provide an active experience for the user (ie. video, text, graphics, etc)
• Given the observations above,  ask yourself again is the page length appropriate or necessary?

After completing this exercise, don’t be discouraged if another revision is needed for the wireframe. In fact, be excited and know that the revisions and adjustments up front will make for a much smoother design process in the duration of your project.

Wireframing is collaborative and feedback is essential

Through the hundreds of websites we’ve designed and developed at IMPACT, one statement always holds true: Feedback is not optional. 

The best and most successful websites went through iterations and iterations based on feedback from others and yours should to. 

In order to provide thoughtful, constructive feedback, you must understand the wireframe you are evaluating.

The key to understanding is to ask questions as if you were the user. 

Even if the questions seem silly or too obvious, ask them. 

Often times the designer or strategist may have overlooked something due to its simplicity. Strategists and designers work on wireframes day in and day out which can cause them to fall back into assumptions. 

It is important for the wireframes to be evaluated and critiqued to stay in a user’s mindset.

When feedback is given with the four aspects described above, the design process becomes more fluid. 

With a deep understanding of the overall goal of the website between you, the designer, and strategist, the focus can be turned to how the structure of elements of the page best support the purpose. 

With that, the design process can continue...