June 2019

Login flow for Payroll App - UX/UI


Product Design


iOS and Android


UX flow and UI
Login flow for Payroll App -  UX/UI


Hourly collects time, task and location data from employees in real-time so employers can get accurate data from their employees and run payroll in minutes.

Business Request:

Employees should be able to login to their native app on iOS or Android Devices.

User Research
& Challenges

Key Objectives:

  1. Improve User Experience: Design a login interface that is intuitive and easy to navigate, reducing friction for users attempting to access the payroll app.
  2. Enhance Security: Implement strong authentication mechanisms, such as multi-factor authentication (MFA).
  3. Ensure Compliance: Ensure that the login feature complies with relevant data protection laws and regulation.
  4. Optimize Support Efficiency: Minimize user confusion and reduce the need for customer support assistance related to login issues, ultimately saving time and resources.


Balancing usability and security considerations to create an optimal login experience.


Phone Number Login Option

When a user initiates the login process in the app, they are prompted to enter either their phone number or email address as their primary identifier. This flexibility allows users to choose the method they prefer for receiving authentication codes and notifications.

Email Login Option

Verification via Two-Factor Authentication (2FA)

After entering their phone number or email address, the app initiates the two-factor authentication process. A verification code is generated and sent to the user's provided contact information via SMS (for phone numbers) or email.

The user receives the verification code on their mobile device or in their email inbox. They then enter the code into the app's login screen within a specified timeframe.

Error Handling

If the code is incorrect or expires, the user may request a new code to retry the authentication process.

Final Thoughts:

Benefits of Using Phone Number or Email for Authentication:

  • User Preference: Users can choose the contact method they prefer or find most convenient, enhancing their overall experience with the app.
  • Accessibility: By supporting both phone numbers and email addresses, the app ensures accessibility for users who may not have one of the options or prefer one method over the other.
  • Security: Implementing two-factor authentication adds an extra layer of security to the login process, reducing the risk of unauthorized access even if login credentials are compromised.

Overall, this login approach combines user flexibility with enhanced security measures, ensuring a seamless and secure authentication experience for users accessing the app.