Kill the Noise: How Prioritization on your Website Can Drive Action | npENGAGE

Kill the Noise: How Prioritization on Your Website Drives Action

By on Aug 21, 2012


Visual Website Hierarchy

Visual Website HierarchyYour website has a lot to say. If a person from each department of your organization stood in front of you and shouted information, chances are you wouldn’t decipher anything through the noise.

At the very least, you would be confused.

If you don’t prioritize your content to convert the noise into clear messages, your users will experience the same confusion.

This blog post explains how strategic web design can reduce the noise on your website and help your users accomplish the most important tasks to meet you nonprofit’s goals.

Prioritize Tasks to Reduce “Noise”

The first step in creating a web strategy is “knowing your audience” and defining user tasks (see Andrew Fort’s post: “The #1 Reason Nonprofit Websites Fail and How to Fix It Immediately”). From the Audience Analysis exercise you will have a long list of user tasks for each audience segment. It is critical to prioritize these tasks and decide which tasks are the most important to your users and organization.

For larger organizations this can be challenging, as different departments compete for the limited real estate on the homepage. However, if every element on the page is shouting out to the user to grab their attention, nothing will be heard. More significantly, the important messages will be drowned out which leads to fewer conversions from your site.

This is why prioritizing the tasks to meet your long and short term goals is critical for a successful online strategy.

Start reducing the noise on your website by asking:

  • What user task is the highest priority for your organization?
  • Are you giving that user task the loudest voice?
  • Are less important tasks competing with your critical tasks?

Establish a Visual Hierarchy with Wireframes

Let’s go back to the shouting match. A person from each department in your organizing is trying to get a message across to your audience.  You have the opportunity to decide who has the loudest voice by positioning them in the room. Your highest priority will be the person nearest the front door and they will be the first to grab the attention of the “user” entering the room. In essence, you are creating a hierarchy of importance with positioning.

Wireframes allow us to create this hierarchy in web design.

In graphic design, we use size, positioning, space, color and contrast as tools to establish a visual hierarchy for the elements in the design. Wireframes take the subjectivity out of the design by focusing on the positioning and size of the elements and how information is presented to the user.

Creating a wireframe will help you define a visual hierarchy for tasks in your design. The key is to make sure your most important tasks are at the top of the hierarchy and that no other elements are competing for the users’ attention.

Is your Website Strategically Designed?

Web design isn’t just about making a website look pretty. If you want your website to help you achieve your nonprofit’s goals you will need to look at the design from a strategic perspective. By prioritizing your user tasks, you can ensure that the design is giving adequate visual weight to the most important tasks.

Take a look at your homepage. Start evaluating the strategic value of the visual hierarchy by doing the following:

  • Look at the largest visual element on the page. Does that element help your user complete an important task with a clear call to action?
  • Look at the positioning of the most important “call to action”. Is it positioned near the top of the page? Is it always visible?
  • Look at the elements with the highest color contrast. Do these elements highlight content or actions that are critical to your organizational goals?


Join me next week as I co-host an in-depth look into strategic web design during our free GUIDE series – Register now!


BEN WONG (@bunmun) is the Creative Services Manager at Blackbaud and Co-Founder of Birthdays For All (, a nonprofit that provides birthday presents to foster children in the Charleston County area.

He started his career as an interactive designer where he designed and developed website solutions for hundreds of nonprofit organizations. He also worked as a director of UX at a boutique digital marketing agency, where he gained experience in the for-profit world. He has presented at NTC, DIG South, BBCON, Refresh Charleston and Good Business Summit, and written articles for npEngage and the npExperts. As a Charleston resident, he is also part of the Charleston Open Source initiative ( to attract tech talent to the region.

Ben comes from the UK where he had a short career in the British music industry before completing his degree in Computer Science with Business Management at Queen Mary University of London.

Keep up with with Ben presence on social media at

Leave a Reply

Your email address will not be published. Required fields are marked *