Language selection

Wireframing

Wireframing provides a draft for a webpage or group of webpages, with rough ideas for page structure, content, and navigation displayed. A wireframe helps the team work through ideas, gather feedback from stakeholders, and potentially test the layout and content with end users. Wireframing focuses on how the content is outlined on the page, or multiple pages. In this activity you’ll produce rough content ideas and early wireframes, demonstrate how users will move through the content, consider running usability testing, if needed, to validate design ideas.

On this page

When to use

Page design outline happens after the discover phase and content location and structure activity. Once you have ideas, research, and deliverables from previous activities, wireframing helps you form them into design choices. Use a wireframe when you need to organize and structure the pieces on a page, before you have detailed content.Depending on the type of project and what kind of content and design changes need to be made (i.e. only one paragraph on a webpage needs editing), it’s possible to skip this activity and move straight to the detailed content prototyping.

Who is involved

Lead
Content designer, information architect, interaction designer, UX researcher.
Others who may help

The person leading the assessment may also seek input from other disciplines, including data and usability analytics, partner services, UX researchers, program areas subject matter experts, and the system design team.

How to do it

There are 4 steps in this activity.

  1. Requirements gathering

    The primary goal is to understand what content needs to go on the page, or group of pages.

    Before starting your wireframe, review your deliverables from the discovery and earlier design activities. You should have many research artifacts from the discovery phase to draw from. The content location and structure activity will give you a starting point in terms of which content to prioritize and where the content will live on the website. Depending on the type of request, your requirements gathering and research review may look different:

    The primary goal is to understand what content needs to go on the page, or group of pages.

    For brand new content:

    • Review legislation, briefing documents, etc.
    • Determine key information and what content we need on this page

    For existing content:

    • Review current page or section of content
    • Understand what needs to change on the current page, or where the content gaps are

  2. Draft page outline

    Create your wireframe. You can start by doing an environmental scan and look for how similar pages have been structured. For the CRA, there are a number of standard design patterns that should be used depending on the types of content. Visit the design systems to review the available components, templates, and design basics. If your content fits under a certain category that has a pattern designed for it, you should follow that pattern.

    You can use a design tool like Figma, Miro, or similar, however, that is not required. Something as simple as a Word Document is enough to create your page outline.

    Based on the goal of the content and your requirements gathering, apply weight and importance to pieces of content. Don’t worry about actually writing the content but instead break up the information into sections and use headings to map out the page structure and content hierarchy.

    You may consult with subject matter experts, or documentation about the subject matter, to help validate weight and priority of content.

    Once you have a page outline, it’s important to get feedback.

  3. Feedback and testing of page outline

    Collect feedback on your wireframe. You can check against the requirements, data, and research you reviewed in step one. Ask other members of your team to review the page to gather a variety of comments and perspectives.

    You may want to consult again with subject matter experts to help refine the weight and priority of content.

    Ideally, time and budget depending, this is also when you could create an interactive prototype to conduct usability testing (such as first click testing or A/B testing) with end users.

  4. Iterate and refine, as many times as needed

    Work between step two and three as many times are needed to create a design outline that works well for both end user and business needs.

    When you feel you have enough clarity you can move on to the next activity.

Next steps

Once you have a wireframe, you can move on to detailed content prototypes.

Deliverables and artifacts

When you’re done, you should have:

  • A wireframe

Tools and templates

Tools vary based on practitioner and department, there is no one right tool to create a page design outline, but some tools you may use include:

  • Word Document
  • Figma
  • Miro

Reference material

This activity is part of the:

Go to all the phases of the user-centred design process.

Date modified: