Phone app sign-in concept for BankID, a digital identity service.
Phone app sign-in concept for BankID, a digital identity service.
Embedded Files
Who: BankID, a digital identity service.
What: Phone app sign-in screen.
Why: To make a more accessible interface for everyone, and to learn more about phone app design.
Role: Interface designer.
Tool: Figma.
When: February, 2023.
This design is a concept. Do you work for BankID? Feel free to steal and use this design.
Before and after comparison
Before and after comparison
Wide buttons, less noise
Wide buttons, less noise
I cut text and wrote what is expected of you to progress in the BankID app.
Every button has been stretched to full width. For easier touch.
Sign-in, quick, and easy
Sign-in, quick, and easy
Use your face or finger to sign straight into BankID without having to fill in your social security number and password. That's easier, and quicker. Every time.
Or you can sign-in as before. With your social security number and password.
Social security number
Social security number
What is a social security number in Norway? Is it the date that I'm born? It's easy to misunderstand, especially if you're new to the place.
Your social security number is your unique ID. The ID verifies that you're a Norwegian citizen. The ID is made up of 11 numbers. Your birth date that's 6 numbers (day day, month month, year year) and a personal number that's 5, sort of random, numbers.
So that became the helper text to the social security number field.
Speech to text
Speech to text
What if you could say the numbers of your social security number out loud and have that written into the field? Speech to text is nice to have. Added!
On it's own, your social security number isn't sensitive information.
Words are important
Words are important
Putting descriptive words on components in a user interfaces is a task that's often pushed to the end of development. Or it's skipped. That's dumb.
All of the words in all the tiny components like buttons is what tells me, your user, what's going to happen when I use that button in the user interface of your product. Words and visuals in a user interface help me understand how everything in your product work, and as importantly how and when they don't work.
What does it mean to go back in this case? Do I get taken back to the app home? Do I go back to the screen I came from previously? Do I go to a totally different screen? If I tap on the button and the whole process is cancelled and I'm brought back to the home screen, the button could say exactly that.
Perhaps I'll write a rant on whether an action that does something should be a button or link, and why, another time. One thing is certain, it depends.
Google Sites
Report abuse