How to deliver Page refreshes and New webpages

A Page refresh is a request for adding a new section(-s) or changing a layout on an existing webpage. This usually involves a design input and therefore is not considered a copy update.

Both types of requests (Page refresh and New webpage) are represented by an epic with 3 tasks inside: UX, visual and development.
Make sure you start the development phase after both UX and visual parts are marked as Done (or Rejected).
Important! The date until which the request should be finished and deployed to production is indicated in the Due date field on the epic.

The steps you should take to deliver requests for page refreshes and new webpages:

  1. Find the repository
    The repo name should match the domain name, i.e. for ubuntu.com it will be github.com/canonical/ubuntu.com
  2. Fork the repo, clone your fork
  3. Identify what needs to change/be added from the copy document (shortly “copy doc”).
    A copy doc can be found in the Jira epic inside the “Attached forms” section → “Add Copydoc link” field.
    • The changes for page refresh will be described as suggestions inside a copy doc. If you are still not sure about what needs to change, reach out to the reporter of the Jira task.
    • For a new webpage request since it’s a new webpage, the whole document content needs to be implemented.
  4. In all of the new webpage requests and in most of the page refresh requests you will also find a link to a Figma design either in the epic’s or visual task’s description. Clicking on that link will open Figma with the design of how the change/webpage should look like. Please reach out to a designer assigned to a corresponding task of the epic if you have any questions regarding the design.
  5. Implement the change.
    Create a new branch forked from the “main” branch and add changes to the codebase.
  6. Test the changes.
    Locally you can run dotrun to test the changes.
  7. Make sure you have djLint installed on your machine as that’s the linter/formatter we use for our Jinja templates. This topic about linting and formatting includes steps how you can install and use it.
  8. Create a PR:
  • fill in the description by specifying what changed
  • add link to the copy doc in the description
  • add link to the Figma design in the description if available
  • provide a link to a webpage(-s) in the demo instance for peers to have a quick access to a changed webpage(-s)
  • add “UX needed” label and select a UX designer from the epic’s UX task as a reviewer
  • in case the Visual task is marked as Done (not Rejected) add “Design needed” label and select a Visual designer from the epic’s visual task as a reviewer
  • add “Code needed” and “QA needed” labels
  1. Request a review from designers who you assigned as reviewers in the previous step.
  2. After you got an approval and “UX +1” and “Design +1” labels from the design reviewers, request a review from peer developers, i.e. in the “Web code review” Mattermost channel.
  3. Once the changes are merged and deployed, for page refresh requests open the copy doc file and accept the suggestions that you have implemented.

Last updated a month ago.

Help improve this document in the forum.