Key details bar

[steven-borthwick]

Searchlight/CIS

Screenshot

Expanded

Collapsed

What problem does this design solve? The citizen's identity information is visible/available so DWP agents know and are reassured about which record they are viewing. Common info (Name, Date of Birth, NI number, status)

Which service are you researching this design on? Searchlight/CIS

Notes Has expanded and contracted states when user scrolls but is always visible. Has different colour background (blue = alive, grey = dead or superceded)

[srich-DWP]

What problem does this design solve? DWP agents can use the "Information banner" to verify the customer identity

Which service are you researching this design on? Access to Work - Access to Work Integrated Service (ATWIS)

Notes Further work needed on the content of this design, users research has shown users dont notice the information presented in the banner

18/04/18 further exploratory work has been done with user research sessions looking at what information is needed in the Identity details (blue banner) and when it would be used. A list of required information to present on the banner has been supplied by Subject Matter Experts, in priority order;

1. Customer name
2. Name of any 3rd party/Appointee OR a marker
3. National Insurance Number/Unique Reference Number (generated by the service)
4. Job title and employer
5. Date of Birth
6. Customers health condition
7. Communications preference E.G. telephone, textphone, email, etc
8. Status of case
9. Adviser (case owner)

There are 2 main user roles who would benefit from information showing in the banner, each having different needs. The needs which are common for both roles are;

1. identifying the customer using name, NINO/URN, date of birth
2. confirming if a 3rd party/appointee represents the customer
3. communication preferences

Based on the results from the last round of user research an iteration of the information banner will be tested with users int he next 2 weeks. We will also be testing whether the information banner is needed on all screen views, or just needed to confirm customer identity.

[chrisadesign]

Suggestion that we change the details header to light grey (mentioned in the navigation issue) as it was causing issue with the two current header nav styles

This has the potential benefit of keeping the link styles the same, as they're being changed to white at the moment which possibly blends in with other white text too much and means we don't have a visited state.

[abbott567]

I think this is a really good idea. It would be great if we could get some people researching this. The blue header as it stands will fail WCAG-AA standards, which is a bit of a blocker. So we either need to look at the design of the header itself or look at the link colour.

WCAG states:

...in order to be Level AA conformant, your page must have all of the following:

• A 4.5:1 contrast between the non-link text color and the background.
• A 4.5:1 contrast between the link text color and the background.
• A 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background color.

[srich-DWP]

I'm happy to do some testing with the revised colour for the banner. Our users have come to understand what they use the banner for and have looked for the information held in it. I don't think that changing the colour of it will have a significant effect on its value to them, but testing a new colour will confirm that assumption. One thing Ive not tried to use in the design of the banner are links, although in the example that's on here there is a link, but I want to remove that in future iterations. @RodMiley has an example of where the banner can be expanded and further detail revealed. This was something I am interested in adding to the Access to Work banner design. Users feel that more information on it would be useful to them so having that in a reveal could work. I don't want it to become overpopulated with information and lower its value to users

[abbott567]

Just a heads up. I've spoken to @joelanman about the colour contrast on the links. The documentation isn't that clear and I think I was wrong about it in my previous comment. As long as it's underlined it should be sufficient for AA.

[chrisadesign]

We've decided as a team over on Slack #design-examples that this will be referred to as "key details bar" for now.

[abbott567]

Example of this is now live: https://dwp-design-examples.herokuapp.com/example/key-details-bar

[gazjoy]

We are using this component on Apply for Jobseekers Allowance. So far it has tested well, we have tested with DWP agents in Job Centres, Contact Centres and Service Centres. When testing on smaller screens the bar gets pretty tall and takes up a lot of the screen. This was using the component straight out of the design-examples repo.

To fix this we have amended the CSS a little and our version now looks like this: This is testing well too.

This is how it looks on larger screens.

[srich-DWP]

Example from Apply online, new style ESA. The details presented to the user have yet to be defined. Started the MVP with basic name & National Insurance Number to identify the citizen.

There has also been a Terminal Illness/Special Rules cases marker added. This enables agent users to identify priority claims.

ESA service hasn't built in status markers, as yet this has not been identified as a need. Although testing the MVP in Private Beta will provide the insights for iterations of the Key Details Bar

[chrisadesign]

Hey DWP team 👋

Thinking of trying this out in a service over at MOJ. Wondered if anyone has tried and has insight into having a photo in this?

[HelenOsg]

New ticket created in community backlog