Updated DWP design system site feedback

[HelenOsg]

After reviewing the DWP design system what comments and feedback do you have for the team?

Potential points to cover:
Any errors - broken links, missing words, spelling issues etc
Was it easy to navigate round the site?
Was there anything there you weren't expecting?
Was there anything missing you expected to be there?
Was it clear how to use the components and patterns?
Was it clear how to contribute?

All thoughts, feedback and comments are welcome. Please try to be constructive with feedback and give examples where relevant.

[poppy-davis]

Hi Helen,

Great to see the good work so far, just copying over the feedback from my email...

General

• There doesn’t seem to be any content covering how the DWP Design System works alongside the GOV.UK Design System. Does it supplement the GOV.UK one? Is the aim that some new/improved patterns will make it into the GOV.UK Design System?
• I’ve noticed a few references to ‘GDS Design System’ (for example on the Components page). It’s officially called the ‘GOV.UK Design System’ (although I use both!)

Homepage

• The ‘What’s new’ box looks a bit awkward, suggest moving elsewhere on the page (I like the approach the GOV.UK Design System uses)
• On the purple banner, it states ‘Use this design system to make your service consistent with DWP’. Should it be ‘consistent with other DWP services’?

Components

• In the ‘Retired’ bullet, suggest ‘Replace’ should read ‘Replaced’ (also applies to Patterns page)
• The ‘Discussion’ column doesn’t make it clear that when you click the link you’ll be taken to GitHub

What’s new

• 17 May 2021 update, probably worth linking to the GOV.UK Design System pattern here. Last sentence ‘…do not to update to the GOV.UK page and banner’ I think this should read ‘…do not need to update to the GOV.UK page and banner’

Backlog

• First line, ‘across the DWP’ should be ‘across DWP’

Contribute

• Under ‘How to contribute’, suggest breaking down the first para into bullets. Also, the last sentence in the section needs a full stop.
• Under ‘Design Research Library’, could do with a link to the library. ‘User’s needs’ reads a bit strangely to me – just ‘user needs’?

Roadmap

• First para, should it say ‘roadmap of the DWP Design System’?
• I think ‘overtime’ should be ‘over time’
• You refer to ‘Q3’. I always think referring to quarters is a bit business-speak and I have to stop and think, what date does it actually mean here? I’d find it much easier to understand if it said ‘July to September 2021’ (also the GDS style guide says we should avoid using quarters)
• The heading ‘Next’ lacks context, how about something along the lines of ‘Upcoming work’, ‘What we’re working on next’?

Thanks

[HelenOsg]

Thanks Poppy.

[David-content-designer-Evans]

Hi Helen.

General
Good page layout and easy to navigate. Use of plain simple English with clear headings and minimum use of colour. Overall I'd say you've reached your goal to make it 'relevant to what users want from the design system'.

From the 'What's new' section
The new site includes:

• updated guidance on how to contribute to the Design System - the 'Contribute' section. Nice and clear. Easy to follow instructions.
• links to resources for DWP designers - Not sure what these are. Were they going to be under the 'Manuals' section?
• the DWP Design System community backlog - This is good and I found it accessible and useful.
• the DWP Design System team contact details - Clear and easy to follow.

Observations/Questions

1. Has the site been tested with assistive technology?
2. There is no 'Home' (or similar) in the navigation bar. Do users know to access the index page they need to go through the DWP Design System heading?
3. I notice the 'What's new' box on the landing page has items from May. The challenge will be keeping the content of this component 'fresh'.
4. The Components and Patterns sections on the Index page. Will they always be three columns and one row? They could become unwieldy if they are just constantly added to. But I was also wondering how and when you would update what is shown here?
5. I was a bit confused by the 'Retired' page (specifically for 'Consent for cookies'). Is the page I'm looking at here the old pattern that has now been retired? If it is, I wonder what's the value in showing it? If it's so users can compare and contrast with the new pattern, I think it needs to be clearer what is the old 'Retired' pattern is.

As always, happy to discuss any of the above. But overall, great work!

[HelenOsg]

Thanks David. Really helpful and insightful.

We haven't had it tested yet but will be working with Craig to get this done asap.

There's a few pages like the what's new box (team updates, what's new) that will need tight governance on it to ensure it stays updated and relevant. That's definitely a challenge.

At the minute we will be showing the most recent three components and patterns on the homepage. When we get GA on the site we could update that to being the top 3 viewed. Again, governance is really important here to ensure it stays updated.

Thanks for comments on the retired page. We're learning about how we should retire and remove items from the design system (it doesn't happen often) so all feedback here is really helpful. We've kept it on as there are services that continue to use the pattern but we'll look at how we can make it clearer for users.

[contentpete]

Hi Helen,

As others have said, it's looking great - exciting times and great work!

A few observations (trying not to duplicate what others have said:

Components page - the sentence 'Components are reusable parts of the user interface that have been made to support a variety of applications.' feels passive? Is it worth thinking about replacing 'have been made' with something like 'user centred design colleagues across DWP have made'

Backlog page - are the 'in progress' and 'proposed' headers needed as well as the status flag? They maybe duplicate the flag and could also confuse slightly when you add the 'to do' flag under the proposed header?

Design research library - this feels a bit hidden as in my mind it's not part of the backlog? Would it be helpful to remove the section and replace it with an explanation above the backlog along the lines of 'The interaction design community have a design research library containing some flows and patterns that have not yet been added to the Design System backlog.' with a link to the design research library index?

Roadmap - the bulleted lists are all caps at the moment, and the lead-in lines for the lists in points 1, 3 and 4 of the Q3 goals don't quite work as lead-in lines.

Related resources - is there space and scope to add links to the GOV.UK and DWP style guides on there? :)

Thanks!

[HelenOsg]

Thanks Pete.

Re:Backlog - We were trying to highlight the work we have coming up/in progress but looks like we've missed the mark on it. We'll take a look and see how we can improve this. Maybe it needs to live somewhere else.

[HelenOsg]

From Jonathan Lorrimer

First impressions: Navigation, content and layout is consistent with the look and feel of the GOVUK design system.

There doesn’t seem to be enough usable content yet in terms of components and patterns. I think that might put me off using it on a regular basis if it was launched in its current state.

I’m not sure about using the “What’s new” tile on the home page. I think the problem for users is ‘how old is new?’ – if that makes sense? Maybe rename it as “Latest changes”, but either way it might be an idea to date stamp any links in there. (I realise they are when you click through to that page).

There is a similar issue with the tile for the roadmap under the contribute section: “See what the DWP Design System team is planning to work on over the next 12 months”. I wouldn’t know when that timeline started.

There feels like too much duplicate text on the “How to propose a component or pattern tile” (How and find out out how) It feels like forcing content into the design.

Find out how you can contribute ideas and get involved with the DWP Design System.

Find out how to get involved

Maybe change to:

Propose a component or pattern tile

Contribute ideas and get involved with the DWP Design System.

Find out how to get involved

You’ve used tiles for each element on the home page, but this won’t scale very well as and when components and patterns are added. I’d consider following the same pattern of the GOVUK design system, where each menu item is a tile that lets you click through to view all the corresponding elements of that section.

On the roadmap section I would change “this is the roadmap of DWP Design System”, to “this is the roadmap of the DWP Design System”,

I would add a line break just before the purple footer on this page and make sure other pages are consistent with this style.

On the same page it refers to “This component is used in Judicial user interface.” I’m not sure what that means, so maybe a link to some info?

On the roadmap page, the links under Next don’t work and the title “Next” is confusing.

Related section: Maybe include a link to the DWP Accessibility Manual

This might not be related, but are there any plans to include a DWP content style guide? It would be useful to have somewhere that shares the correct terminology for DWP related services. I’m thinking something that would complement the GOVUK style guide.

[danhowarthgov]

Hi Helen, great work on this so far. Massive kudos to you and the team.

Just a few bits to add, on top of what everyone else has already said.

General

Nice integration with GitHub. Maybe label the links with brackets like "(opens in GitHub)" to tell the user they're leaving the Design System site?

This maybe something you cannot do anything about, but the difference in UI and navigation between the Design System site and GitHub, and the Design System site and Confluence is quite jarring. Users have to go into a different reading and navigation mode. We've got a similar problem in 'the book'. I wonder what the effects of this might be, if any.

The feedback link in the phase banner is broken.

What's new

The 'team updates' / contact the team page seems to be in an odd place, here. Would it be better as a top tier item in the top nav menu?

The 'contact on Slack' links don't work. I'm getting a Slack error page in the browser, even though I'm logged in.

Email addresses – could you expose these as text, so users can copy them? As a Mac user, the trouble with embedding email addresses as links behind text is that when I click them, my Mac boots up the blasted Mac Mail as its default email client, which I can't change (or at least don't think I can).

The 'articles and presentations' link in the lef-hand menu is broken.

Backlog > Design research library

I didn't expect the design research library link to open in Confluence. Maybe add some text in brackets, e.g. "(opens in Confluence)". Also Confluence is a labyrinth and the user might lose where they were on the Design System site, if they end up in a rabbit tunnel and don't use the browser back button. Could you open the link in a new tab? e.g. "(opens in Confluence in new tab)"

In the list, is there any reason why "[Residency]" is in square brackets, while others are in round brackets?

The 'find a citizen record (National Insurance number)' link is broken

Roadmap

I'm sure you're aware of this already, but some of the links are empty, e.g. 'publish article announcing roadmap' and 'publish findings and DAC forms'.

Manuals

The link in the top nav menu is broken.

[HelenOsg]

Thanks Dan.

Your points on the design research library are interesting. We don't own it and still figuring out how the two will work together.

[lydiacowgill1]

Really exciting to see this! Lots of great work has clearly gone into it!

General

Really useful to have the backlog and to be able to see the progress of what is up and coming and has been proposed.

Content information/content styles – it may be useful to have for people that do not have content designers on their team / teams awaiting content resource to have basic guidelines to follow with DWP specific information – example on HMCTS design system

Navigation was easy – content was logical and expected in each section

Patterns

Links to GitHub are useful to avoid searching.

Contribute

Could something be added in here such as a link to ‘success stories’ or ‘the investigation behind the contribution’ or a blog that documents this (realise this would take external work to add in and for people to be willing!).
It can be a daunting prospect for some to add and contribute to the design system as it feels very formal and possibly exclusive for the more experienced, and I wonder if there can be something that would give people confidence to contribute.

Not sure I would know how to submit a contribution from the information that is provided.

This was written a couple of weeks ago, apologies for the delay or if it references anything that has already been changed.

[martinwake]

Comments from tree testing exercise in January 2022 as part of site structure review:

Question: Is there anything else you'd like to tell us? This could be a comment on the site structure, something you were expecting to find but couldn't, or any other thoughts on the organisation of the Design System website.

Respondent 4

I think I'd expect to be able to add a pattern in the patterns section as well as the community section. I think I made the wrong choice for the use a pattern question - I think I'd expect to be able to use it from the patterns section, under the specific pattern I was looking for, but something made me shy away from that because the question didn't mention a specific pattern!

Respondent 5

I was confused about the second task, (adding a pattern into my prototype). If expect to be able to go to the pattern first and find out how to add it to my prototype from there.

Respondent 6

The information at the start of each page, for example on components. The main reason i'm on that page is to find the component i'm looking for, I want to view that table. That initial wordy information at the top is only useful to me for the first time I visit, and it's wordy, I fly past it looking for what I want. Is there a better way for that information to be highlighted/presented outside of taking up the main 2/3rds of my vertical screen estate in the main body, when 98% of the time it's not my main purpose on the page.

Respondent 7

For the second task I would have expected a link on the page where I found the pattern to the. 'how to use this in your prototype' page.

Respondent 8

In the navigation, I usually expect the 'contribute' link to be last (just because it's like that in the GDS one, so am conditioned to look for it there!). It may be good to have the roadmap in between the latest updates and the backlog in the navigation. I like the purple, makes it easy to spot that I'm in the DWP design system as I have links to that and the GOV.UK one next to each other in my bookmarks :)

Respondent 11

I'd love more examples from a variety of real services.