Concept

Reviewing content 

We want to make things simple and clear, so people can find what they need and get things done easily.

We do this by using clear page titles, helpful headings, and putting important words near the top of the page. This helps people find what they are looking for quickly.

We tell people exactly what they can do or find on each page.

We try to write in a way that sounds active and friendly. This makes the information easier to understand.

If a page has lots of different things on it, we split it into sections. That way, each part is easier to explain and find.

We link to other pages instead of repeating the same information.

If we do not offer something, we don’t talk about it. That way, people can find the right organisation more easily when they search online.

Create and review content copy

The service is always the subject-matter expert. We can check your copy and make it suitable for the given audience. But we will need your help first.

The service should provide the basic information or "copy" they want on their site. Once received, our content designers can review the information, adapt the tone, improve the flow, and make sure it's in simple English. It's easiest if a folder of documents is created and shared with us so that changes can be kept up to date.

Information architecture

Information architecture (IA) is the organising and labelling of content to make the website usable and understandable. We classify content and arrange it into similar themes.

For microsites, this can look a little different to our core site as they are generally smaller in size and are already part of one 'theme'.

But the same principles apply:

• clear linking and signposting to related content
• logical placement of pages in menus
• a map of our services
• a logical site structure so that users who come into the site from their web browser or a direct link can find their way around

It's worth keeping in mind that the way a service may want the website arranged is not necessarily how a user would navigate. The majority of users find pages directly from search, rather than navigating the internals of the website.

We use a few methods for this, such as:

• card sort - using a kanban to sort into themes
• affinity diagramming - lay out everything and in a group, arrange into areas and sub-sections
• sticky sort - add each page as a sticky note and create levels of content and how they connect

Content is the core of the website. So we usually start here to enable us to create wireframes of the visuals.

Wireframes

Wireframes are basic, non-interactive sketches (digital or analogue) used early in a project to show how a website or app will be organised.

They help designers and others involved get a clear idea of the layout and features before moving on to detailed design or building. 

The functions of wireframes include:

• focus on layout - they prioritise the placement of elements and the overall structure rather than detailed visuals or animations
• cost-effective and quick - wireframes are inexpensive and can be created rapidly, allowing for quick iterations and adjustments
• communication tool - they help bridge the gap between designers, developers, and stakeholders by providing a clear visual reference

Wireframes are great because they are quick to create, can be iterated and easily based on initial feedback.

Once we have a good MVP (minimal viable product) wireframe, we can move on to prototyping.

Prototypes

Prototyping means making a rough version of a product to test and improve it before the final version is made.

It helps designers try out ideas, get feedback, and fix problems early in the process.

Low-fidelity prototyping

These prototypes are often paper-based, offering a quick, rough preview of the product. Low-fidelity prototypes are ideal for early brainstorming sessions and collaborative discussions, providing a basic skeleton of the design that is both fast and cost-effective to produce.

Medium-fidelity prototyping

Medium-fidelity prototypes are interactive and clickable, offering a more detailed and realistic representation than low-fidelity prototypes. They typically include limited functionality and are often built upon storyboards or user scenarios, providing a better sense of how the product will work in practice.

High-fidelity prototyping

High-fidelity prototypes are highly detailed, fully functional, and interactive. These prototypes closely resemble the final product, making them ideal for user testing and obtaining final design approvals before moving into development or testing. They provide a realistic experience, allowing stakeholders to see exactly how the product will look and function.

Benefits of prototyping

• saves times and money - you can spot and fix problems early, so you don't waste time or money later
• makes work easier - a prototype shows what the design looks like, helping everyone understand the plan
• keeps everyone on the same page - it helps teams share the same vision and work better together
• improves results - testing the design early helps make it more user-friendly, which can lead to better outcomes (like more people using or buying the product)
• finds problems early - you can catch bugs or confusing parts before the final version is built
• involves users - users can give feedback early, helping create something that works for them