<img height="1" width="1" src="https://www.facebook.com/tr?id=1269148126497016&amp;ev=PageView &amp;noscript=1">

Website Best Practice, Part 6: Architecture and Design

15 February 2017

By Ethan Morgan


Share story

Back to insights

Information architecture is all about two things: your business, and the user.

Good architecture marries the best possible user experience, and also achieves the business outcomes that you're looking for. That's likely to be higher conversion rates, higher average order values, and increased customer interaction and engagement.

Ideally, information architecture benefits the end user, but it also helps keep everyone in the business in the loop. It helps you think about your audience at every stage.

volo designs

Website Organisation

Organising a website is much like organising a library. It's about organising a lot of information so that people can get access to what they want as quickly and easily as possible.


There are a number of different techniques employed by website designers to get an understanding of how users would prefer to use a site. These include card sorting, interviews and the use of user personas. This information is then analysed and the information architecture can begin to be organised within two general fields:

· The first is a library-like organisation, dividing categories into sub-categories, spreading out like a flow chart.

· The second is adapting the information according to what we know about how the brain works

Specifically, it's how we know the user’s brain works. Cognitive psychology in website design is all about understanding the brain’s capacity to hold and process information, the assumptions that users already have in their heads, and the processes needed to make a decision.


Presenting the information that you have collectively found is an important part of designing the layout of a website. By doing this, you can work together to adapt and fine tune the details to create a really effective website. There are two major ways of presenting information architecture with documentation – site diagrams and wire framing.

Site Maps

By designing site diagrams, you have an excellent opportunity to show the rules which you are using organise information and site pieces. It also shows the hierarchy of your site information.

In addition to helping you to organise the information which is in your head, site diagrams are great for communicating your ideas to other people. You can use them to show the development process over time, through to when you have a finished blueprint for your overall website.

The best way to go about creating a good site map is by starting simple and then gradually adding in detail, particularly the information that you have found in your user research and business goals.

Your site diagram should include:

  • Content organisation and structure
  • How many ‘clicks’ are required to reach any given page
  • Page type (e.g. menu page, internal page, major section entry point)
  • Internal and external link relationships to the site
  • Website directory and file structure
  • Levels of user access – log ins or prohibited areas

The whole idea of information architecture is to keep everything as general as possible, gradually adding more detail, but it can be very tempting to start thinking about how you are going to present the information on your website. Due to the fact that designers are usually visual people, they can begin to get caught up with the design on the actual web pages.


Wireframes give you a chance to put your general ideas down (without talking about colours, fonts or other details) which can then be expanded on and discussed with the graphic design team.

A wireframe is a two-dimensional document which blocks off on the page a general layout of where you want specific elements to be placed. You will need to think about creating a wireframe for each type of page that you have – for example, the home page, content pages and product pages.

Consider including:

  • Logo
  • Titles
  • Page titles or headlines
  • Breadcrumb trail navigation
  • Search bar
  • Links to other organizations
  • Local content navigation
  • Global site navigation links
  • Contact details – email and mailing address
  • Primary page content
  • Copyright statements

For most businesses, the only specific information which is on the wireframe is the organization logo, but even this isn’t absolutely necessary. Try to keep the rest as generic as possible, with no special fonts or colours.

Information architecture is about keeping things as general as possible, going down into more detail with time. It is important that the research is properly carried out, and that the process is properly documented to be able to create your website in the right way – so that it matches your website and business goals.

With the correct implementation of site maps and wireframing, you can ensure that you get the right amount of detail at the right stage of the process. If you get it right, you’ll find it easier to keep focused whilst allowing your creativity to flow and maintaining excellent communication between you and the design team(s).

By Mark Withers


Feel free to drop us a comment with your own experience or tips for site architecture. We'd love to hear from you! If you're looking for more expert ecommerce advice, get in touch!

Get in touch

Say hello

Whether you want to find out more about us, our product or our job opportunities, we’re happy to talk.

Get Free Widget