Legacy Steel Production System with AI-enabled Solutions
Project Summary
Client
Domain
Role
​Users
Tools
: Leading Steel Manufacturing Company
: Enterprise Process Management & Manufacturing
: Senior Technical Lead – UX Design (Responsible for User Research, Usability and Prototyping)
: Internal Employees (Production Plant Engineers, Supervisors, Operators, QC Inspectors, Maintenance Personnel)
: Figma
Overview of this project
This project focuses on improving user workflows and system efficiency across three key stages of steel manufacturing at JSW:
-
Steel Melting Shop (SMS) - Where Steel Is Born, Employees manage raw material melting and initial steel formation, relying on timely updates and accurate batch tracking.
-
Hot Strip Mill (HSM) - Shaping Steel Strips, Employees monitor and control the rolling and shaping of steel strips, requiring precise data input and batch updates.
-
Cold Rolled Mill (CRM) - Precision Finishing: Employees handle fine finishing processes, ensuring quality compliance and accurate reporting for the final products.
Business Objective
Modernize the legacy system to streamline data-heavy workflows, cut unnecessary pop-ups and clicks, remove redundant steps, and boost production efficiency while enhancing employee satisfaction.
One of the core problem statement
The current User Management system is fragmented and confusing, making admins deal with high cognitive load, multiple pop-ups, and complex steps to assign roles, screens, permissions, work centres, and complexes—leading to errors, inconsistent access, and onboarding confusion.
Identified Personas
-
Production Plant Engineers – Optimising technical processes and Analysing system performance
-
Production Supervisors – Monitor real-time progress and manage production schedules.
-
Shift Operators – Input data, Track machinery status, and log production events.
-
Quality Control Inspectors – Review and validate steel quality parameters.
-
Admin & Super Admin – Admin manage users' access and workflows; Super Admin controls the entire system.
Admin Persona
User interview with admin (Rakesh) persona to uncover painpoints
We interviewed key Admin users to understand their workflows, mental models, and daily challenges. These sessions uncovered the root causes of their frustrations and highlighted critical gaps in the current system.
User Interiews Questions
-
Can you walk me through your typical day using the User Management system?
-
Which tasks take up the most time, and why?
-
Can you describe a recent situation where managing users or permissions frustrated you?
-
How do you currently assign roles, screens, or work centers, and what challenges do you face?
-
Are there any workflow steps that feel redundant or unnecessary?
-
How do you track users, roles, or permissions across multiple complexes or work centers?
-
Can you share an example when the system didn’t behave as expected?
-
How do pop-ups, alerts, or notifications impact your workflow?
-
What improvements would make managing users, permissions, or workflows easier?
-
How do you train new admins or onboard users, and what difficulties do you encounter?
User Journey of Rakesh Persona
Wireframe Process
Based on key insights from research methods, I created wireframes in Figma using core usability principles. My focus was on keeping pop-ups to a minimum, reducing unnecessary scrolling, improving visual hierarchy, making navigation easier, simplifying layouts, preventing user errors, removing repeated fields, and creating a smoother overall screen flow."
Global Feedback from user
-
Distinguish the CTA's--------------------------------------We redesigned the CTA to make them bolder and more prominent at a global level.
-
Remove vertical & horizontal scroll----------------Maximum eliminated scrolls in the new design approach.
-
Primary details of the user are missing----------User ID & User name are implemented across screens to eliminate cognitive load
-
Provide a Search bar---------------------------------------Provided a search bar in each stage, wherever applicable
-
Remove pop-up-based design-------------------------On this new design approach, we introduced the accumulator, an accordion design also made it a global design.
Existing Design
1.
Create New User
New Design
Basic details
Pain points for create new user screen
-
Need more information about users for audit purposes
-
No user type classification
-
Enable/Disable a user from the database
-
Good to have a new approach in design rather than a pop-up
-
Who created the existing user?
-
The screen title is confusing to new users
Solution
-
Need more information about users for audit purposes---------------Added (User type classification, Enable/Disable user, Assigned manager, Country code, Phone number, Extension number, Last login date, Created by, Created date, Modified by & Modified date) fields for user audit purposes.
-
No user type classification--------------------------------Provided a dropdown for selecting temporary or permanent user type.
-
Enable/Disable user from database-------------------Provided toggle button for enabling or disabling the user from the database.
-
Good to have a new approach in design rather than a pop-up--We split the process experience into 2 parts. The user first sees the employee list. When the user adds a new employee, the system guides them through a step-by-step process, like a stepper flow and We added a hyperlink in each stepper as well as in a global breadcrumb, so the users can clearly see where they are in the system. This helps them understand the whole structure and also lets them move back or undo actions without confusion.
-
Who created the existing user?------------------------Auto update the created user name and time, modified user name and time based on persona.
-
The screen title is confusing to new users------Renamed the screen title from Create a new user to Basic details.
2.
Add Page to Role
Assign Roles
Pain points for Add page to role screen
-
The role creation process is a distinct & global-level flow
-
Don't know how many roles are available and how many selected
-
Difficult to remember primary role details on the roles page
-
Select all roles or Reset all roles can't be done in the design
-
For any re-edit on the first stage process needs to close the pop-up
-
No search bar for larger role list
-
Change pop-up-based design​
-
The screen title is confusing to new users
Solution
-
The role creation process is a distinct & global-level flow--------------------------Implemented like a stepper flow, and each step will act as a breadcrumb to navigate and do edits.
-
Don't know how many roles are available and how many selected-----------Added total available roles count and selected roles count on the global level (next to title).
-
Difficult to remember primary role details on the roles page--------------------Implemented User ID and User name.
-
Select all roles or Reset all roles can't be done in the design---------------------Implemented in accumulator design.
-
For any re-edit on the first stage process needs to close the pop-up--In the new design approach eliminated this issue.
-
No search bar for larger role list--------------------Provided a search bar in available & selected roles.
-
​​Change pop-up-based design-------------------------On this new design approach, we introduced the accumulator design for a simple “add or remove user” design. This means users can easily add roles, remove them. It gives them more user control and makes the process smooth.​​
-
The screen title is confusing to new users ----------Renamed the screen title from Add page to role to Assign roles.
3.
Create New Role
Assign complexes & Work Centre
Pain points for add page to role screen
-
No search bar, it cuts the flow
-
No hierarchical flow (App → Complex → Work Center)
-
Don't know how many units selected/unselected for App → Complex → Work Center
-
Need to assign unit manually
-
Cannot assign one permission across all screens
-
Need to close the popup for any re-edits in previous stages
-
Screen title is confusing to new users
Solution
-
No search bar, it cuts the flow---------------------------------------Provided a search bar in Applications, Complexes and Workcenters for easy navigation.
-
No hierarchical flow (App → Complex → Work Center) in the layout------------On this new design approach, It helps when the user selects an application, the related complexes appear, and when they choose a complex, the matching work centres show up automatically.
-
Don't know how many units selected/unselected for App → Complex → Work Center----------Implemented Total available count & selected count.
-
Need to assign unit manually----------------------------------Created automate process once the user selects the role automatically, Applications, Complexes and Workcenters will be assigned based upon roles
-
Cannot assign one permission across all screens-----In the new design approach, users pick one permission and apply it to all screens for each module at once.
-
Need to close the popup for any re-edits in previous stages----------In the new design approach eliminated this issue
-
Screen title is confusing to new users------Renamed the screen title from Create New Role to Assign complexes & work centres.
4.
List of user & enable/Disable user functionality
Assign Screens & Permissions
Pain points for add page to role screen
-
Screens/permissions do not auto-update with the role
-
Need individual access, like create, save, and view, for each role will help
-
The screen title is confusing to new users
-
If screens & permissions are based on roles, if roles differ, then screens & permissions should also differ
-
No search bar, it's cutting the efficiency
Solution
-
Screens/permissions do not auto-update with the role------On this new design approach, when a user chooses a workcenter, the matching screens & permissions show up automatically.
-
Need individual access, like create, save, and view, for each role will help---------Adding checkboxes to turn unit access like Create, Delete, Download on or off for each screen based on its role. This removes the need for multiple pop-ups and lets users finish the task with fewer clicks.
-
The Screen title is confusing to new users-------Renamed the screen title from enable/disable user functionality to Assign screens and permissions.
-
If screens & permissions are based on roles, if roles differ, then screens & permissions should also differ-In the new design approach this issue fixed.​
-
No search bar, it's cutting the efficiency------------Globally Provided a search bar.
Accessibility Enhancements Based on WCAG 2.1 (Level A)
As a Senior Technical Lead, I recommend & integrated WCAG 2.1 Level A accessibility standards into the redesigned system, tailoring features to real-world usage scenarios:
-
Keyboard Navigation: Enabled full keyboard operability for users working in hands-busy industrial environments.
-
Adjustable Text Sizes: Designed flexible typography to accommodate ageing employees or those with visual strain.
-
Voice Input Support: Proposed audio input options for frequent data-entry fields to reduce manual workload.
-
High-Contrast Mode: Implemented a Black & White high-contrast theme to meet WCAG 2.1 colour contrast standards, enhancing text legibility for users with low vision, glare sensitivity, or challenging lighting conditions.
-
Motor Accessibility: Increased button sizes to support aged employees with motor impairments, reducing interaction errors.
This approach ensured the interface remained inclusive, context-aware, and aligned with the daily challenges of the steel plant workforce.
Implementing Automation with an AI-enabled Solution
To reduce manual effort and improve accuracy across repeated batch operations, I implemented an automated monitoring system powered by AI into the workflow. ​
How does it work?​
As each batch progresses through SMS, HSM, or CRM, the system continuously captures and tracks critical parameters—including batch ID, batch status, temperature, thickness, material composition, and process timing. This real-time stream gives operators complete visibility without switching screens or manually validating readings.​
If any deviation occurs in the process, like process timing, temperature, thickness, or material composition, the automation engine instantly triggers a real-time alert to the operator through dashboard warnings or colour-coded status indicators. Instead of relying on manual checks, the system highlights the root cause and the exact point of failure.
AI then analyses historical patterns, machine behaviour, and previous corrective actions to recommend the most effective resolution—such as adjusting machine settings, modifying speed, or recalibrating inputs. This reduces operator cognitive load and helps prevent downstream defects.
By combining automation and AI, the workflow becomes more proactive, consistent, and reliable—ensuring faster decisions, fewer errors, and higher throughput in every batch cycle.
Once the wireframes were finalised, I developed interactive high-fidelity prototypes in Figma for key workflows.
The prototypes were shared with IT and plant teams for walkthroughs, helping them visualise the final interface and validate improvements in clarity, navigation, and task efficiency.
Design System Creation (Atomic Design Approach)
To ensure the redesigned system delivered clarity, consistency, and long-term scalability, I built a modular design system grounded in Atomic Design principles. This allowed me to break down the interface into reusable building blocks—Atoms, Molecules, Organisms, Templates, and Pages—while aligning with the company’s existing brand guidelines.
I focused on standardised critical interface elements such as buttons, input fields, table structures, navigation patterns, spacing rules, typography scales, and colour tokens. These foundations ensured that users experienced predictable behaviour across screens, reducing cognitive load and improving task efficiency.
For developers, the shared component library significantly reduced ambiguity, accelerated implementation time, and improved cross-team collaboration.
Existing & New Design for your reference
Responsive Layout
Final Outcome
The redesign of the legacy manufacturing system resulted in measurable improvements in accuracy, usability, efficiency, and user satisfaction.​
-
Pilot users completed routine tasks (e.g., logging batch records) 20% faster than in the old system—validated through timed task simulations.
-
90% of pilot users rated the new interface as significantly more intuitive; pain points like repeated data entry and poor readability dropped sharply.
-
The improved interface is projected to save the company over 1,000+ hours (approximately) annually, reducing error rates and training time.
