nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
MIT License
4 stars 0 forks source link

Digital pass (Add to wallet) #100

Open Tosin-Balogun opened 1 week ago

Tosin-Balogun commented 1 week 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 1 week 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 1 week 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 1 week 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 1 week ago

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

Image

Tosin-Balogun commented 1 week 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 1 week 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