nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
https://design-system.nhsapp.service.nhs.uk/
MIT License
6 stars 0 forks source link

Digital pass (Add to wallet) #100

Open Tosin-Balogun opened 4 months ago

Tosin-Balogun commented 4 months ago

What

The native & design system team is currently investigating creating a digital pass feature for the NHS app. This is built on the templates provided by Apple & Google wallet

A digital pass allows users to complete transactions with services with just a wireless tap on their phone. This is often used to:

Image Images courtesy of Zach Rigby

Goal

The aim is to learn as much in other to establish a re-usable template for other NHS services

Why

We have a series of user journeys on the NHS app which needs to work offline

Hypothesis

We think that providing users with a digital pass which they can use offline or in areas with poor network will help them complete healthcare transactions efficiently

Tosin-Balogun commented 4 months ago

Additional detail

This is currently being piloted by the native component team using the digital prescriptions transaction journey

Pain points

  1. Part of the digital prescriptions features a barcode which users can use to pick up their medicine at a non-nominated pharmacy. However, the barcode is nested deep and hidden which means users might miss it

  2. The current prescription barcode requires internet connection to access which means they might not be able to if they have low or no signal

  3. Screenshot 2024-07-09 at 08 52 49

Concept

The prescription journey would be the first (outside of covid pass) to pilot the use of a digital pass to allow users to complete transactions with healthcare services. This allows us to learn how to create a re-usable template for the design system

User flow Image

Tosin-Balogun commented 4 months ago

Insight

One of the user needs uncovered by one of the app teams that users wanted to track of their healthcare documents (both physical letters & electronic), so that they can feel empowered to have conversations around their health.

Source: Team compass

Tosin-Balogun commented 4 months ago

Insight

The native team also uncovered that people wanted reassurance they could access important information in any situation or in emergency

Digital train-line tickets are great. they are just easier. I got the kids and i've got a pram as well, so I put them (train ticket) into my apple wallet so you're not having to actually go into the app on the day... However, I generally screenshot them and send to the people i'm with. So if one of our phone dies, we've all got tickets" – Participant 8 (Round 1)

When asking users to complete a card sort prioritisation for things they might need to access offline. Users rated these in order:

  1. NHS Number
  2. View upcoming appointments
  3. View test results
  4. Messages
  5. Repeat prescriptions
  6. Referral information

as most important details to access offline (transit or emergency)

Source: Team native

Tosin-Balogun commented 4 months ago

This is what happens when the app is offline, the user cannot continue their transaction

Image

Tosin-Balogun commented 4 months ago

Updating digital passes

The combination of pass type identifier and serial number is used throughout PassKit to uniquely identify a pass. Two passes of the same type with the same serial number are understood to be the same pass, even if other information on them differs. For example, when a pass is updated, the new version has the same pass type identifier and serial number as the old version, so the new version replaces the old version

Source: Apple developer documentation

Tosin-Balogun commented 4 months ago

Making pass accessible

The description lets VoiceOver make your pass accessible to blind and low-vision users. The value for the description key in the pass specifies the description. The description should start with a high-level term such as “Membership card,” “Weekly coupon,” or “Bus ticket” followed by one or two small pieces of information, such as the coupon’s offer and the store where it’s valid. Don’t try to summarise the entire contents of the pass, but include enough detail to let users distinguish between passes of the same type.

Example

{
    "description" : "Boarding pass for October 4, San Francisco to London",
    "formatVersion" : 1,
    "passTypeIdentifier" : "[pass.com](http://pass.com/).example.boarding-pass",
    "serialNumber" : "123456",
    "boardingPass" : {
        <<field dictionaries>>
    }
}

Source: Apple developer documentation

Test

After I tested using this, I have observed that this description field shows up as the title when looking at the pass detail or when sharing it with others through the native share function, email or a text link

Image

Image

Tosin-Balogun commented 3 months ago

Screen reader

When the wallet is tested with VoiceOver screen reader, the following was observed

When on the wallet app landing, the screen reader latches onto the organisation name and header field as opposed to the 'logo text' which is visible on the pass.

Reading the titles

As the screen reader cycles through the different options on screen, it reads the organisation name and header field and moves onto the next pass on the list. This means that you can get options where it reads "Department of health and social care dash" as was the case with the NHS Covid pass

Reading dates

Image

anna-rigo commented 3 months ago

The prescription team has recently conducted 2 rounds of usability research with a coded prototype (July and Aug 2024) to test the entirety of the user journey in the prescriptions section of the NHS App, from requesting a prescription through to checking status of prescriptions within the App. In the first round of research, they spoke to participants who were neurodiverse and/or had visual needs that would affect their interaction with the App. The participant pool included a mix of non-users and users of the NHS App, and a mix of users with single and multiple prescriptions.

Key findings (prescription barcode & digital wallet):

Quotes: "Add to apple wallet - would mean a quick payment" "It goes on your Apple Wallet - that's really cool!" "Had to get the Dr to explain what the barcode was. I don’t really pay attention to the barcode."

Reflection: The digital wallet excites users as they have a pre-conceived ideas about it being helpful and a quick way to access information, and they already have experience with using it on other apps. However, since it's placed within the prescription barcode expander users struggle to locate it, and the prescription barcode was difficult for them to notice, which could also be due to the low awareness of what it is and how it works.

Screenshot
anna-rigo commented 3 months ago

In the second round of in-person user research done by the prescription team, which included participants who had visual impairments and registered blind people who used screen readers (3/5 participants used screen readers).

Key findings:

Quotes: "I do like that. There's an option that that you can add the bar code to your wallet. And although I personally have never used a barcode to get a prescription but it is a convenient way to store...because you don't have to unlock you to get access to whatever you need” "Basically confirming it's a genuine ticket...It basically tell the pharmacist either that you're the person that requested the prescriptions or it would basically tell the pharmacist what prescription that we need to be basically gathered to give to you"