Prototyping

Create and iterate on prototypes to explore options and test your assumptions.

Contents

1. Sketching or whiteboard (low fidelity)
2. Figma (high fidelity)
3. HTML (high fidelity)

There are a few options for prototyping new services or features which range in fidelity.

Sketching or whiteboard (low fidelity)

Sketching is typically done with a pen and paper and is sometimes called paper prototyping. You can also use a collaborative tool such as Miro or Microsoft Whiteboard.

Sketching is used to test designs early in the process.

Advantages

• Quick and cheap.
• Builds a design foundation.
• Enables you to create, iterate and throw away ideas without getting invested.
• You can focus on the flow and key concepts, not details.

Disadvantages

• Paper prototyping is harder to share (and collaborate on) remotely.
• Can be challenging to test with participants remotely.

Figma (high fidelity)

In the early stages, Figma can be used as a prototyping tool to building user flows and making simple, clickable prototypes to show navigation.

Create a copy of the National Archives base Figma document to start designing your pages.

Advantages

• Fairly quick and easy.
• No coding knowledge needed.
• Enables the whole team to work together, including making and viewing comments.

Disadvantages

• Interactions are quite limited.
• Harder to present realistic data.
• Cannot handle specific user testing, for example with assistive technology.
• Cannot respond to data input in testing.
• Not always easy to make responsive.

HTML (high fidelity)

HTML prototypes allow user testing with real data and interactions, plus keyboard navigation and other assistive technologies.

Advantages

• The team and stakeholders get a better sense of how a product will behave.
• Responds to different devices and screen sizes.
• Easier handover from design to development (and for working out if a design is feasible).

Disadvantages

• Takes more time to build.
• You need coding skills.
• Harder to collect comments and feedback from the whole team.

Prototyping with the GOV.UK Prototype Kit

Use the GOV.UK Prototype Kit to create rich, interactive and responsive prototypes.

TNA Frontend includes support for the GOV.UK Prototype Kit. You can use the supplied components and styles with the prototype kit to make prototypes that look like National Archives services.

1. Create an empty directory mkdir my-prototype
2. Enter the new directory cd my-prototype
3. Use npx govuk-prototype-kit create to create a new prototype project
4. Install the frontend styles with npm install @nationalarchives/frontend
5. Run npm run dev to start up the prototype kit
6. Visit localhost:3000 in your browser to see the prototype

Adding custom styles

1. Create a new SCSS file in app/assets/sass called custom.scss
2. Create a new layout in app/views/layouts called base.html, extending the base National Archives prototype kit layout
3. Link your custom CSS file in the base layout in the stylesheets block
4. Create new pages that extend your new base layout

* {
  outline: 2px #f0a solid !important;
}

{% extends "nationalarchives/templates/prototype-kit/_base.njk" %}

{% block stylesheets %}
  {{ super() }}
  <link href="/public/stylesheets/custom.css" rel="stylesheet" type="text/css" />
{% endblock stylesheets %}

{% extends "layouts/base.html" %}

{% set pageTitle = 'My new page' %}
{% set theme = 'system' %}
{% set themeAccent = 'green' %}

{% block content %}
<p>Hello, world!</p>
{% endblock content %}

Using the components in your prototype

The National Archives components can be included in your prototype using the templating language Nunjucks.

Examples are given in the components section. Each component example shows all the Nunjucks options available to that component.

{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Button",
  href: "#"
}) }}

Custom HTML prototype

Install and use TNA Frontend to make a rich, HTML prototype using the framework of your choice.

Read more about how to install and use TNA Frontend.