I redesigned the phone app sign-in for BankID, a digital identity service.
Who: BankID, a digital identity service.
What: Phone app sign-in view.
Why: To make a more accessible interface, and to learn more about phone app design.
Role: User 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 on the left and after on the right
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
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
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
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
Writing in user interfaces is a task that's often pushed to the end of development, or not really put any effort into at all.
That's dumb. Because the words in tiny components like buttons is what tells me, your user, what's going to happen when I use that button. Words and visuals in a user interface help me understand how everything in your product work, and don't work.
What does Go back mean? Does it mean go back to the home of the app? Does it mean go back to the screen that I just came from? Does it mean go back to a different screen? If I tap on the button and the whole process is cancelled and I'm brought back to the home screen, write cancel.
I'll write about whether an action that takes you back should be a button or link, and why, some other time. Hint: It depends.