Main Image

Content First - Part Three - Information Architecture and Wireframing

Taking a content-first approach to building websites ensures you are keeping something very important in mind at all times - your clients! Welcome to the third part of our Content First series, where we will discuss information architecture, and how a website should be structured for maximum benefit to your clients. We will also go through the wireframing techniques we use during our content-first development process.

Missed Parts One and Two? Check out Why Content First and Our Approach. Part 4 is The Challenges.

Content First

Information Architecture

When you are defining the layout of content within a website your primary objective is to align the access (navigation), grouping, and display of content in a way that supports the customer journey. At this stage, there is sometimes pushback from organisations that want to present content based on their internal view of content priority and/or their internal structure.

A classic example of this is the positioning of the ‘About Us’ content. Organisations often think that it is important to establish credibility through About Us content, where customers more often look for credibility through formal reviews (e.g research or field trials by third parties) or social proof (e.g testimonials or reviews).


Content First

In the above example, the first three primary navigation items are about the organisation - an ‘about us’ section, our products, and news about the organisation. There is little in this navigation that supports the customer journey - even if they are a current customer and know exactly what they want.


Content First

In this second example, we understand that prospective and current customers assess agrichemical needs based on their crop, a pest they need to treat, or a product that they know/have heard of. These navigation items help the customer in their journey from assessing options to product application.

In addition, moving the Contact option from the primary to the secondary navigation, confirms that customers are here to find information, and they prefer to discuss queries with their merchant rep in the first instance.

Information architecture must also extend to the structure of information components that you will use and re-use throughout a website. By information component, we mean things like contact forms, product information, and case studies. We have already defined the draft content components when we created the content requirements. At this stage, we need to make sure that everything hangs together to create a total experience for the customer.

When you are validating content components, you will notice that you need to create additional components to ‘join’ draft components together. For example, you may have a case study - detail content component but you now realise that you also need a case study - summary component for in-page navigation to the case study - detail component.


This will show the hierarchy and relationships of all web pages - usually visually.

Navigation Design
This defines how customers will access public and private content through primary, secondary and in-page navigation.

Content Component Library
This provides a list of all content components that you will use across the website. You can filter this list to view the components on each page and to identify the pages that use a specific component. This is very useful when creating wireframes.

Content First


Up to this point in a web project, everything has been largely theoretical and abstract. Viewing wireframes is the first time things start solidifying and becoming real for everyone in the project.

For us, there are three key inputs to laying out a web page in a wireframe - the content component library, content requirements, and customer journey information. With these in hand your job becomes much easier as you know the pages and information components you need to layout, the content required for each component, and where they are in their journey and importantly the next step in their journey. In this way, layout becomes customer and usability focused.

The critical point is that you are using content that is based on actual customer motivations and needs. This makes your wireframes much more realistic, which gives clients a clear understanding of how they will meet customer needs and the business requirements for meeting the content expectations. These are additional benefits to the standard understanding you get from wireframes around design direction and usability.



This illustrates the layout for all page types in your website. From this wireframe, you will be able to complete each journey for all of your personas, to ensure that you are meeting the in-scope customer motivations and needs.

We are hoping at this point, everything seems reasonably logical and achievable for you to use within your web projects. In summary,

1. We started with content requirements that we captured directly from your customers.
2. We then used these requirements to define how we structure content to support the customer journey in the information architecture step.
3. Then we used this information to create wireframes with example content that is tied directly to customer motivations and needs.

At this point, as a client you have a clear understanding of your customer motivations and needs, how you will address these through your website, and a feel for the work required to deliver this content.


This example was based on the following:

• Content library
• Content requirements (specifically, the information component detail)
• Customer journey information

Content First

Was this helpful? Stay tuned for the next part of our Content First series, where we discuss some of the challenges experienced when building a content first website. You can also download our whitepaper on the subject here