Testing early in the development process using wireframes will save you time and money.

Why do it?

Many websites, apps and digital platforms don’t have the content users need in the right locations. Often screen elements (e.g. navigation bars, content panes, search boxes, etc.) are not placed in the best place from a user’s perspective. Instead the layout of pages is based on what an organisation wants to ‘tell’ users rather than on user’s goals. The best way to ensure your website works for your user is to develop and test wireframes early in the development process.

Wireframes are stripped back, 2D mock-ups of a website or app which include minimal content, no design, colour or images and focus on the layout and functionality of a site. They range from paper drawings through to clickable digital pages.

For new web pages (or existing ones with issues) wireframes are a great way to visualise ideas and get user feedback early, before any expensive design or development work has taken place.

Wireframes can be used to test:

Main navigation
Navigation pages
Homepage design and layout
Mobile layouts and functionality
Site functionality
Anything else really!

How we do it

We always build our wireframes on a foundation of user evidence. This might be from a previous research project or user research we have conducted as part of a broader piece of work.

With a clear understanding of users’ goals and journeys, we will work with the project manager to develop initial wireframes. These will then be tested with real users, ideally in a number of iterative rounds, developing and improving as we go along.

We have worked with clients to develop wireframes for a full site resign or simply to improve small sections or functionality.

Depending on what you are testing, there are a number of ways to get the insights you need, including:

Agile testing: ‘work-in-progress’ sessions to test developments of, and identify improvements to, specific elements or functionality of a site. Iterations are rapid, working within 2-4 week sprints. This approach often suits larger, complex sites and teams already working within an agile environment.

Full site testing: testing of the whole wireframe in 2 iterations; the first round of testing typically follows the development of the first wireframe, and the second is conducted at the final wireframe development stage. This approach tends to suit smaller sites where a whole site perspective can be adopted.

For either agile or full testing, each project would follow this rough structure:

Each research session is typically conducted in a research lab, either at our premises, the client’s office or in a dedicated research venue.
The session takes place over one day and is attended by up to 8 client personnel
The research is split into two parts: user testing in the morning and consideration of the results in the afternoon to refine the wireframes
Prior to the test day, Web Usability agrees a set of user goals with the client to be used in the research
Web Usability recruits the testers – profiles of which are agreed with the client
Web Usability prepares a simple HTML representation of the wireframe
Each tester tests the prototype for c. 50 minutes individually.
The testers are asked ‘Where would you click?’ to achieve each goal, through as many levels as there are in the wireframe. They are asked to ‘think aloud’ so we can understand any issues about the usability of the wireframes.
On the same day, following the user testing, Web Usability facilitates and contributes to a discussion to produce a revised wireframe for the next round of testing
A report is produced summarising the research, analysis and detailing the revised wireframes.

Wireframing

Why do it?

How we do it

Subscribe to our newsletter