Payroll Portal Login

Payroll Portal Login

Payroll Portal Login

Overview

Overview

Overview

A quick redesign initiative for LTI’s Payroll Login page. The goal was to modernize the experience for internal users, streamline login clarity, and improve mobile responsiveness.

The project was dropped midway due to internal restructuring and external geopolitical factors (Ukraine war), but this login redesign was presented and approved by the stakeholders.


Team: Myself (Designer), PM, Senior Developer, Business Stakeholders.

Problem

Problem

Problem

The SSC payroll portal faced significant usability and UI challenges, with an outdated design and technology that no longer met modern standards. This project required a complete redevelopment, including a new tech stack, refreshed design, and upgraded infrastructure to support the company's expanding needs.

My role

My role

My role

  • Redesigned the login page for clarity, hierarchy, and brand alignment

  • Proposed mobile-first responsive layout

  • Shared clickable prototype with team for internal review

  • Project paused after first sprint due to resource shifts

Have a look at the Figma Prototype

Have a look at the Figma Prototype

Have a look at the Figma Prototype

Prototype

Solution

Solution

Solution

Layout

Layout

The final version was designed keeping in mind the various user authentication methods used by companies under the L&T group as not all of them use the same authentication method. Single Sign On (SSO), 2FA using Microsoft Authenticator, Windows Authentication and OTP based authentication were used.

Visual Design

Visual Design

Many iterations and variations were tested and submitted for review. The stakeholders approved the design that had an enterprise aesthetic to it. The design uses bold brand color throughout the login page with a vibrant graphic image depicting the core services of the portal.


The login module has two tabs: Credential login and Office 365 login. A blue tab indicator highlights the active tab along with the respective input fields. The credential login contains additional elements like “Unlock account” and “Forgot password” to help the users with their account login.

Critical Decisions

Critical Decisions

Critical Decisions

Approach

After the briefing sessions from the stakeholders and manager, a short timeline of 2 weeks was given to come up with the first iterations of the login interface. The timeline was drawn up detailing the approach taken towards the first iteration and the project was started but it had delays and obstacles.

Constraints

  1. This effects lakhs and lakhs of employees all over the world from contract employee to the board of directors and retired employees. Any mistake could cost the company dearly.

  2. The UI must handle all possible edge cases and ensure there is no usability issue.

  3. The UI must be familiar and not something completely new.

  4. Stakeholders were quite tricky to handle as they tried to impose their version of the solution more instead of looking at the data and making an informed decisions.

  5. The UI along with its graphics should capture the branding essence of the business.

View more

Approach

After the briefing sessions from the stakeholders and manager, a short timeline of 2 weeks was given to come up with the first iterations of the login interface. The timeline was drawn up detailing the approach taken towards the first iteration and the project was started but it had delays and obstacles.

Constraints

  1. This effects lakhs and lakhs of employees all over the world from contract employee to the board of directors and retired employees. Any mistake could cost the company dearly.

  2. The UI must handle all possible edge cases and ensure there is no usability issue.

  3. The UI must be familiar and not something completely new.

  4. Stakeholders were quite tricky to handle as they tried to impose their version of the solution more instead of looking at the data and making an informed decisions.

  5. The UI along with its graphics should capture the branding essence of the business.

View more

Approach

After the briefing sessions from the stakeholders and manager, a short timeline of 2 weeks was given to come up with the first iterations of the login interface. The timeline was drawn up detailing the approach taken towards the first iteration and the project was started but it had delays and obstacles.

Constraints

  1. This effects lakhs and lakhs of employees all over the world from contract employee to the board of directors and retired employees. Any mistake could cost the company dearly.

  2. The UI must handle all possible edge cases and ensure there is no usability issue.

  3. The UI must be familiar and not something completely new.

  4. Stakeholders were quite tricky to handle as they tried to impose their version of the solution more instead of looking at the data and making an informed decisions.

  5. The UI along with its graphics should capture the branding essence of the business.

View more

Outcomes. Future scope of work.

Outcomes.
Future scope of work.

Outcomes. Future scope of work.

Internal review and testing was positive but only the Login page was approved for developer handoff as this itself took 2 months, many design variations, 20+ meetings and the stakeholders settled on one of the two designs submitted as final versions.


But unfortunately, within a week, we were informed that all new projects were put on hold/shelved due to the developments of the Ukraine war in addition to the ongoing merger between LTI and Mindtree.


This project has been my first venture into the world of product design and my learnings have been quite impactful in the subsequent projects I undertook.

Artifacts. The complete list of deliverables.

Artifacts.
The complete list of deliverables.

Artifacts. The complete list of deliverables.

Quick win, fast turnaround — even if short-lived.

Let’s talk if you want better first impressions (on login or beyond).

@2024 Vishal's Portfolio. All rights reserved.

Brainstormed in Figma & designed in Framer

Brainstormed in Figma & designed in Framer

Quick win, fast turnaround — even if short-lived.

Let’s fix it — without the fluff.