Home > Design

Simple identity, simpler sign-in with BankID

I redesigned the sign-in phone view for BankID. To expand my knowledge for user interface design for a phone app.

Who: BankID. An identifier service.

What: Sign-in view on the BankID phone app.

Why: To be a better user interface designer. And improve a service I use and enjoy.

Role: UI designer.

Tool: Figma.

When: February, 2023.

This is a concept. Do you work for BankID? Feel free to steal this.

Before (a) and after (b)

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 focused on at all.

That's dumb.

Because those words in the small elements, like buttons, is what tells me, your user, what's going to happen. Those words helps me understand how everything works in your product.

What does Go back mean? Does it mean go back to start, go back to the view that I came from, go back to a different process? If a tap on the button cancels my process and takes me back to start. Write cancel.

As we say in Norway, call a shovel a shovel.

I'll write about whether an action that takes you back should be a button or link, and why, another time.