Web development projects can get tricky as each team member may come into it with their own motivations and unconscious biases (or not and then you are very lucky to have your team on the same page). At Nonlinear we use a series of techniques to help break down these blockers and get your team on the same page. One of those techniques is content analysis which gets to the core messages and content priorities.

“Messages” are bits of information that you want the user to know. Your website is a collection of messages organized in a way that is appealing, usable and valuable to your users.

“Messaging” is a little harder to define. To some messaging may be about the specific words/phrases/images that can be used when discussing your business. Others may define it as “voice and tone”.  For the purpose of this article, we define messaging as the grouping of information and ideas you want to give (and get from) your users.

Once you have a clear picture of the messaging for a web page/site you must validate it against your business goals and user needs to confirm it worth investing effort in the development and maintenance.

This resulting prioritization can then be used as a roadmap when you move into the development of wireframes.

Using your message hierarchy to model your page layout

1) Primary message

  • This is the single most important thing you want the users to take away from viewing your content.
  • It is applicable to all audiences
  • An example of a primary message, could be your site navigation. This is the core of “who you are”.

2) Secondary messages

  • This is a group of key messages that support your primary message and provide context. Highlight the primary message, provide context, and draw attention to the competitive advantage
  • Examples include Page titles, Headers and Images

3) Details

  • These are all the proof points to your primary and secondary message. 
  • The details validate the users’ initial impression and entice them to further their interaction with your organization. 
  • This is where you have the biggest opportunity for personalization. You can use the users’ interaction with the site to create custom messages specifically targeted at them. This should increase conversions on your site. 

In the example included here, the Primary message is highlighted in red. It highlights the high-level information about the product. This information is targeted to all users. Non-technical visitors will be able to understand the highlights and typical application of the product. This might be enough for some users to initiate an interaction with the manufacturer’s team.

The Secondary message is highlighted in orange. The information about the products specifications, benefits, and client testimonials help highlight the competitive advantage of this product. These messages are targeted towards a more technically advanced user.

Finally, in green, you see the details. This includes promotion of related products and a strong call-to-action to reach out to the organization for a quote.

What message do you want your website visitors to remember and act on? Building website message hierarchy into your page layouts

If alone, the primary message would serve most users’ goal of finding out if this manufacturer has a product that meets their basic requirements. But the support from the secondary message and details provides that extra level of transparency that contributes to the user’s level of trust and interest going up. 

You might notice that message hierarchy does not necessarily end up mapping to an exact hierarchy in the design. When balancing the messaging, we also keep in mind the business goals of the organization. In this case, we needed a way to better promote and highlight the “request a quote”. We did this by anchoring it at the top of the site along with the primary message. That way if the user is ready to take action based on the primary message they don’t need to search the page to do that.

Please reach out if you would like to learn more about how we would work with your team to uncover the message hierarchy and subsequent page layout and template.

comments powered by Disqus