Summary
Designed a low-fidelity QR-code login flow as part of a new QR-code design pattern for e-Sam. The solution was evaluated through an accessibility test conducted by Skatteverket’s expert user group.
Designed a low-fidelity QR-code login flow as part of a new QR-code design pattern for e-Sam. The solution was evaluated through an accessibility test conducted by Skatteverket’s expert user group.
Result
The shorter login flow was strongly preferred, receiving 8 points vs. 2 points on a 10-point scale from Skatteverket’s accessibility user expert group.
The shorter login flow was strongly preferred, receiving 8 points vs. 2 points on a 10-point scale from Skatteverket’s accessibility user expert group.
Insights
Accessibility cannot rely solely on prior research and checklists—direct user testing and discussions are essential. What works for one user may not be accessible to another, reinforcing the need for continuous validation.
Accessibility cannot rely solely on prior research and checklists—direct user testing and discussions are essential. What works for one user may not be accessible to another, reinforcing the need for continuous validation.
Background
eSam, a cooperative program of 36 public sector organizations, is driving Sweden’s digital transformation.
As of May 1, 2024, eSam mandates a shift from social security number login to QR code authentication. This requires the development of a universal QR code login pattern for all Swedish authorities, ensuring consistency and accessibility across platforms.
Problem statement
eSam lacked a standardized QR code login design pattern and required a well-founded proposal based on research 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 conducted in-depth research, focusing on:
Benchmarking & Analysis: Studied QR code login implementations across government websites, banks, and private sector services to identify best practices, challenges, and differentiating factors.
Best Practices: Explored how QR code login interacts with accessibility standards.
Stakeholder Meetings: Engaged with eSam to understand requirements and expectations.
Expert Interviews: Consulted internal Skatteverket designers and an external accessibility specialist.
Since QR code login is still a relatively new area, existing research was limited. This highlighted the necessity of testing with users who have diverse functional needs to ensure accessibility and usability.
DEFINE
Incorporating our research and analysis of QR code accessibility issues, we identified these needs to be integrated into our design.
Help all users scan a QR code by ensuring the following:
- The QR code can be enlarged 400 percent without being hidden.
- The QR code remains ("sticky") if the user minimizes the browser window.
- The QR code is always visible in it's entirety.
- The QR code also works in high contrast mode with inverted colors, a white frame around the code pattern.
- There is enough time, at least 3 minutes, before the time-out.
- Instructions are clear and work for those using screen readers.
- The QR code remains ("sticky") if the user minimizes the browser window.
- The QR code is always visible in it's entirety.
- The QR code also works in high contrast mode with inverted colors, a white frame around the code pattern.
- There is enough time, at least 3 minutes, before the time-out.
- Instructions are clear and work for those using screen readers.
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
I designed low-fi prototype flows, one long and one short version, the for QR code login in Figma. This approach facilitates QR code pattern evaluation within context.
The longer version included an instructional step on QR code usage before displaying the pattern, and the shorter one without this step. This test aimed to determine necessity, as per accessibility research emphasizing the importance of preparing users for upcoming steps.
The longer version included an instructional step on QR code usage before displaying the pattern, and the shorter one without 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 users 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.
""Mobile bankID” or “BankID" on this device, feels unclear with the choices, if you use your mobile phone and want to log in that way."
"If I click on 'cancel', the QR code may disappear. Why not a button?"
"WCAG says not to have time limits...time may not be enough for others."
"I think I will enter to the right place after I scanned the QR code."
"Don't understand the order of the instructions, should I do everything at once?"
"The name of the authority and it’s logo helps me to know which authority that I am about to log in to."
"I think the QR code will be displayed on a blank page, I don't think any information will be there as it is written on the page before."
"Why don't we go directly to a QR code? Why all this information before?"
"Like this step better with the QR code. Now I want info, not on the previous page."
"It looks clean and not too much distracting information when the QR code shows."
"This usually happens automatically, reflexively."
"If I click on 'cancel', the QR code may disappear.
Why not a button?"
Why not a button?"
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.
Based on the feedback and Skatteverket's new UI, I designed this 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.
Looking forward for future collaborations or just want to say hello? Let us connect!
susannejonsson.ux@gmail.com
