QA and release home page

[robertjmccarthy]

What

@helennickols and @murrlipp to QA the home page when the build (#1082) is completed. Once any QA points are completed (or agreed to not do), the home page can be launched. The home page should be launched without the community space section and CTA included as the community space will not be live. This will be added at a later point.

Why

To release the designed and built home page.

Who needs to be involved

• Interaction Designer (co-leading)
• • Developer (co-leading)
• Content Designer (supporting)
• Delivery Manager (supporting)

Done

When the home page is live on the MoJ DS website (without the community space and CTA).

[murrlipp]

@ehtabrizi you and I are down as co-leading this ticket. I assume there are dependencies with:

1. URLs for the new content
2. Integration of Google tag manager as per Track home page CTAs #1083

Is there anything we can do ahead of those being added?

[ehtabrizi]

@murrlipp Hi Murray. Indeed, both the URL's and the GTM tracking. The only other thing mentioned is heat maps, i presume that would come at a later iteration. Thanks.

[murrlipp]

I've now added URLs where feasible. Exceptions:

1. Page explaining statuses will need to be added after we've merged feat: 1126 build tier design #1139 into main and rebased docs: build home page #1160.
2. Link for community section - but we will be publishing the front page with this section hidden.

All of the content in the newly added pages is placeholder content, and I assume @helennickols will want to revise the home page content to reflect any changes to the content within those pages.

I won't be here when this ticket is closed next week but if there's anything I can do in the meantime please let me know.

[murrlipp]

I've added links to the home page, with the following exceptions:

1. The link to /design-system-statuses won't work until the status build branch is merged into main and the home page build branch is rebased.
2. There isn't a link target specified for the community section link yet, because it doesn't exist. We are not proposing to go live with this section in the front page though.

[murrlipp]

My QA notes

1. I'm not sure the higher resolution x2 images are being called at the mobile breakpoint @ehtabrizi. I'm seeing a lot of pixelation. Could you double check please? I think Github has compressed the following images slightly but in a browser the difference in clarity is quite stark.

   
   Pixelated image seen at 768px wide and lower

   
   benefits-of-using-moj-design-systemx2.png shown in the same tab

2. This link (GOV.UK Design System) is opening in a new tab. I believe best practice is only to open in a new tab if the user is in a form where the user might lose unsaved changes by navigating away. Can we change to open in the current tab?

   

3. There is no alt text on any of the images but I believe this is fine because they're decorative. Just wanted to raise in case a discussion needed to be had.

4. 20px spacing at the bottom of each 'card' means that visually there's more spacing above each <hr> than below it. Strangely this isn't the case on mobile.
   

5. Spacing between this H2 and the following H3 looks too little when compared between the space between the 'How to choose a prototyping tool' link text and the H3 below it.

   

6. Spacing between cards on mobile looks quite tight:

   

Suggestions

1. Investigate x2 images not being called at mobile breakpoint.
2. Ensure all links open in current tab.
3. Reduce margin above <hr> by 20px on desktop (or equivalent in GOV.UK spacing scale).
4. Override margins on H2 headings to add 20px (or equivalent) to introduce space between headings and cards below.
5. Remember to hide "Get involved and add your own work to the design system" section prior to launch!