Skatteverket:
Accessibility QR-code Design pattern

Summary: Low-fi design of a QR-code login flow, for a new QR-code design pattern to e-Sam. Evaluated by Skatteverket's accessibility user expert group via a evaluation test.

Result: The shorter flow version was preferred over the longer version with 8 points vs. 2 points on a 0-10 point scale, rated by the accessibility user expert group.

Tools used: Figjam | Skype for Business | Figma |

Insights: I found that it's not advisable to assume what is accessible based on previous research and checklists alone; one must always engage in conversations and conduct testing with users. Something that feels accessible to one user may not be so for another.

Background

eSam is a cooperative program with 36 public sector member organizations, aiming to digitize society.

Starting from May 1, 2024, eSam mandates a shift from social security number to QR code login. Thus, a universal design pattern for QR code login across all Swedish authorities needs development.

Problem statement

eSam required assistance in creating a QR login design pattern as they hadn't developed one yet. They sought a proposal based on knowledge and user testing.

Solution

We designed and tested two low-fi QR code login flows to validate our pattern. Skatteverket's accessibility user expert group evaluated it, and we compiled our work and their feedback into a report.

Research

My team and I did a deep research of:

Benchmaring and analyzed on websites of other authorities with QR code login: what differentiates them, what works and what problems may arise. Also compared websites of banks and private actors.
Best practice" QR code login linked with accessibility.
Meetings with eSam.
Interviews with internal designers at Skatteverket and external designer with accessibility knowledge.

However the findings were limited, as it's still a relative new area.
Therefore it's a must to test with people who have different functional variations.

Define

Incorporating our research and analysis of QR code accessibility issues, we identified these needs to be integrated into our design.

Ideate

Sketched low-fi prototype solutions and discussed which parts of our sketches should be included in the design, based on our research and defindings.

Created a component list of what would go into the design.

Prototype

Try out the long version

Try out the short version

Designed two low-fi prototype flows for QR code login in Figma. This approach facilitates QR code pattern evaluation within context.
We designed a lengthy and a concise flow: one includes an instructional step on QR code usage before displaying the pattern, and the other skips this step. This test aimed to determine necessity, as per accessibility research emphasizing the importance of preparing users for upcoming steps.

Test

We wanted to evaluate:

what the test users thought of each step of the flow.
the QR code pattern.
what they expected to be able to do.
what they thought would happen after each click.

The evaluators in the expert accessibility group consist of participants with different kinds of functional variations of neurodevelopmental disorders, such as ADHD, ADD, autism spectrum disorder, autism and Aspergs syndrom.
A total of 8 user participants.

The 8 evaluators responded that they preferred the shorter flow version over the longer version with 8 points vs. 2 points on a 0-10 point scale. This because:

they expected to see a QR code pattern, right after choosing a login method.
was more confusing to get information before the QR code step.
they thought the time already had started and felt stressed, they mentioned according to WCAG that should be no timelimits.
overall our QR code pattern design was what the user said they were used to and expect it to look like:

We compiled our work, the results and feedback of the evaluation test in to a report to eSam and Skatteverket's UX team. As well with our thoughts for future iterations for the QR code pattern and QR code login flow.