Mobile log-in: how to divide two types of user logins and two methods of logging in?

Question

So I'm designing a modile/table log in page. There are two types of users who can log in because the functionalities of the application depend on what type of user they are. Employees and managers.

Also, there are two methods a user can log-in. They can login with the classic user name and password and also login with JUST their phone number (no password required).

What is the most seamless way to organize this for mobile? The simpler the better, since the user persona is one who is not tech-savvy.

Answer 1

Well, the simplest solution to this would be to have two different login portals, I suppose. However, if that is not an option, you could look in to the following options:

1. Which type of user uses the page the most? If user type A requires it more than type B, you could keep the user A login page as default with a link/button that redirects to type B.

2. You could also go for something like this

with an option to switch between the employee and employer login.

Answer 2

Do the users use and have access to both parts? Can I be both an employee and a manager with the same login and I have to choose which experience I am looking for? Or can the system tell based on my login which role I am assigned and direct me auto-magically (through backend tech) to the right one based on my login input?

I have found that defaulting the user type is hard when the use is split pretty evenly and identifying and correcting the user type (tab, graphic) can be overlooked easily since they go straight for the user name box. Perhaps if it has to be a choice, that is the only thing they see (User A or User B? at equal visual weight) before the input prompts are presented (perhaps with a header confirming the choice - i.e. Manager login)