User experience design

Information architecture and prototyping

Information architecture

During the information architecture (IA) phase of your project we categorise your information and define your information hierarchy – evolving how your website or digital service behaves in response to a user travelling through it.

Everything we do is centred around your users, so a well-considered IA will mean your audience will be able to find what they are looking for easily and quickly. They will understand the navigation structure and the labelling you use. They will appreciate the signposting placed at strategic points in your information architecture, helping deliver to them the content they need.

Planning

Depending on the scope of your project, and if it’s a new build or the improvement of an existing service, we’ll approach the information architecture phase in different ways. A user centred design approach means we’ll always refer back to our user research, the distinct user journey mapping and optimal routes that would have evolved from that piece of work.

We may utilise various tools to solve particularly tricky taxonomy problems including card sorting exercises. This helps us define the terminology, labelling, categorisation and grouping of content that our users understand - using a predictable vocabulary rather than your organisations ‘internal’ language.

IA workshops

Then we get the Post-it notes out. We start to rapidly build the site structure on a wall, in a workshop environment. This develops into the ‘first pass’ IA.

As a group, we check this against the user research – does it meet users needs? Is the information structuring logical? Are the user’s touch points consistent with the user journeys? Is the signposting obvious?

Then we check the IA against your organisation's objectives and ask a very similar set of questions, interrogating every section of the navigation scheme until user journeys flow easily and obviously.

Information Architecture outputs

We analyse the first pass site structure and content groupings, and we then further align with the user research user. If your service or site is being redeveloped, this may include a content audit, inventory and content map, helping with your migration strategy.

At this stage we may suggest user testing the first pass of the regrouping of information and also test key terminology questions.

We then produce a detailed IA diagram, explaining the design of the website or service structure – it’s a very thorough architecture that will be a vital tool to assist with content strategy.

Once we’ve understood the content and functionality your users need, the pages they expect to find to hold this content (using information architecture design), we now need to look at the individual page designs.

 

Wireframe prototyping

Wireframes are the first stage of the design process and help us understand the key user journeys, information structuring, modes of interaction and functionality.

Wireframe prototypes or ‘page schematic’ are a basic outline or skeleton of your key website pages, drawn to show the elements of a page, their relationships, position, and their relative importance. They indicate the information types present, navigation, signposting, branding and content areas. They are black and white schematics presented either in PowerPoint or as a clickable web prototype.

Why develop wireframes?

There are many good reasons why low-fidelity web prototyping and wireframing is used in a user centred design process.

Through user research, we have detailed insights into what your users need. Through the IA work we have looked at grouping of content, labelling and terminology to meet the user’s needs. We now need to make sure we position content, messaging and functionality optimally to give an obvious hierarchy of information and ease them through each page, with clear and relevant call to actions and next steps.

Wireframes are also the perfect point in a project to test page designs with real users - user-testing is our proof-of concept. User testing can be formal, in a laboratory using eye-tracking technology, or more informal using agile and lean paper prototyping tools. This wireframe user testing is a rapid and iterative process and can very quickly hone a page layout ensuring it works hard for you and your audiences capturing and reducing usability issues.

And last but not least, it's a lot more efficient and cost effective to make changes at the wireframe stage than later in the design process or the technical build phase.

Your Beta plan

Once we’ve developed and tested your key page layouts, we then start work on the remaining page wireframes and processes, navigation and links – this is a very detailed Beta plan, highly annotated including functional and technical specification, site accessibility and usability requirements, including any key data flows.

Over the years, we’ve seen some horrible traditional functional specification documents – pages and pages of dry text that never gets read – that will inevitably mean project scope problems later down the line.

To combat scope creep, S8080’s prototypes are highly visual documents that simply but accurately explain the technical specification of your project. Every aspect is visually documented and annotated so you know exactly how something will work and our developers know exactly what to build for you.


Related content

User research
Our aims are simple; to tightly align your objectives and your audience needs. This ensures that whatever we build is optimised for your users and will perform as you expected. Everything we do is centred around your users and based on the user research guidance in the GOV.UK Service Manual.
Read more about User research
User research
Expert review
An expert review is a fast, cost effective way to improve user experience. It’s all about 'quick wins' while you plan a more thorough overhaul. We’ll evaluate many aspects including user journeys, ease of use, learnability, persuasiveness, terminology and navigation.
Read more about Expert review
Expert Reviews
Read enough? Get in touch

If you'd like a chat about how S8080 could help you with your project, contact us or email [email protected].

Steamy cup