Language selection

Detailed content prototypes

A detailed content prototype is a mockup of the actual content and design proposed for the live product and/or service. This activity is where content is created, the page and/or product is filled with complete design elements, and the prototype is used for stakeholder feedback, testing, and approvals. The prototype is used to give people an idea of what the content and design will look like once it is published on the web, and is a key step to ensuring everyone knows what will be published on the web. In this activity you will create content templates and start writing the content with your team and stakeholders, and using design components to mockup a section, page, or group of pages.

On this page

When to use

The detailed content prototypes use the feedback gathered from wireframing. Once you have more finalized content and page structure, you can mock up what the page will look like. A prototype can be useful to test functionality internally, and with end users. These prototypes help gain final stakeholder feedback and approval to move on to the next section of the design phase.

Who is involved

Lead

This activity is often a collaborative exercise for the team. Typically these team members will take leadership over roles within this activity:

  • UX interaction designer creates the prototype
  • Content designer creates the content
  • Product manager of the team will help gather the people and pieces together
Others who may help

There are a number of people who may be involved in providing content, reviewing the prototype, and technical support. Those groups may include:

  • Program area
  • LPRAB
  • Communications advisor
  • Other government departments
  • WebDev

How to do it

There are 4 steps in this activity.

  1. Start filling in the page design outline

    Using your page design outline for the previous activity as a guide, start to fill in the wireframe with real content, colour and design elements. Follow the rules for writing on Canada.ca.

    For the content, it can be helpful to use a co-design or pair writing session with team members, stakeholders and/or subject matter experts, to gather their input as you are creating the content. We encourage you to try a pair writing session to get your team and stakeholders involved early in content creation as it is a great opportunity for collaboration and real-time feedback.

    While writing the content, following good search engine optimization practices by using keywords that people search for in the page title and in headings, as well as in the content.

    Sometimes a good content design in one language can be awkward, too long or grammatically incorrect in the other language. Bilingual English/French pair writing sessions can also help uncover any potential problems and identify a content design approach that is equally usable in both languages.

    For the prototype, you can use a design tool like Figma, or similar, however, that is not required. If you don't have access or the training to use those tools, getting your detailed content into a Word Document to send to the Digital Design and Production Directorate works as well.

    If you have a few ideas for the page design, it is a good idea to make more than one prototype to showcase the content and design in different ways. This can help you determine the best approach.

    Your goal at the end of this step is to have something that looks like it could be a live page on the website.

  2. Review the prototype internally

    Once you've filled in your prototype, you first need to check it over yourself and with your immediate team.

    Items to review:

    • Has all the sample text been removed and replaced with proposed content?
    • Have all the design elements and components been incorporated?
    • Has all the feedback from the page design outline been incorporated?

  3. Feedback, testing and refinement of prototype

    Once you have all the content and design elements in place, it's time to share your prototype. You'll want to share your prototype with all the stakeholder group(s) involved, as well as end users, for feedback. The content and design does not need to be perfect at this stage, but you should have enough in place so you can have a conversation with your stakeholder group(s).

    With your stakeholder group(s), you want to check the content is factually correct and accurately reflects their goals. This can also be where you ask questions about the use of certain terms, or choice of design elements you might not have been sure about while you were drafting.

    Ideally, the content that goes out to users is something the program area has approved, and the program area is open to changes based on what the testing finds. In certain cases, after getting feedback from stakeholders on the static mockup, a designer could create a clickable prototype for testing with users. Not all projects will require this, but it may be helpful if there is complex functionality to work through.

    Having feedback from stakeholders and feedback from users happening at the same time allows you to create a stronger page. Understanding what the users are looking for allows us to provide content that meets their needs right at publication, without having to wait weeks or months for data on page usage.

  4. Prototype consensus and approvals

    Depending on the groups involved, there may be multiple levels of approval for the prototype. Once the project team and stakeholders have come to a consensus on the prototype, you may need to gain managerial and/or stakeholder approval(s) before moving to the next activity.

    Approvals will often be iterative as testing and feedback may go through multiple rounds before a prototype is finished. It's important to factor in the number of approvals that may be needed, to ensure there is enough time scheduled for this step.

Next steps

Once you have a detailed content prototype, you can move onto the functional prototype.

Deliverables and artifacts

When you're done, you should have:

  • Approved detailed content prototype

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: