Legacy Steel Production System with AI-enabled Solutions
Project Summary
Client: Leading Steel Manufacturing Company
Domain: Enterprise Process Management & Manufacturing
Role: Senior Technical Lead – UX Design (Responsible for User Research, Usability and Prototyping)
​Users: Internal Employees (Production Plant Engineers, Supervisors, Operators, QC Inspectors, Maintenance Personnel)
Tools: Figma
Overview of this project
This project focuses on improving workflows and system efficiency across three key stages of steel manufacturing at JSW:​
Stage 1 - Steel Melting Shop (SMS)
Where Steel Is Born from raw materials.
Stage 2 - Hot Strip Mill (HSM)
Shaping Steel Strips, from raw steel.
Stage 3 - Cold Rolled Mill (CRM)
Finished product from steel strips
Business Objective
Modernize the legacy system to streamline data-heavy workflows, cut unnecessary pop-ups and clicks, remove redundant steps, and boost overall production efficiency.
One of the core problem statement
The current User Management system has multiple pop-ups, inconsistent access, onboarding issues, and complex steps to assign applications, complexes, work centres, roles, screens and permissions.
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 Employee' 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 screens or permissions frustrated you?
-
How do you currently assign Applications, complexes, work centres, roles, screens & permissions and what challenges do you face?
-
Are there any workflow steps that feel redundant or unnecessary?
-
How do you track employees, roles, screens or permissions across multiple complexes or work centres?
-
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 screens, permissions, or workflows easier?
-
How do you train new admins or onboard employees, and what difficulties do you encounter?
User Journey of Rakesh Persona
Wireframe Process
Based on key insights from research, using heuristic principles, I created 2 different layout variations of wireframes in Figma and sent for client approval.
Variant A
Variant B
Client has chosen Variant A
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, the system guides them through a step-by-step process, like a stepper flow. We added a hyperlink in each stepper as well as in a global breadcrumb, so the admin user can clearly see where they are in the system.
Existing Design
1. Create New User
New Design
Basic details
Pain points for create new user screen
-
Need more information about employees 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 admin users
Solutions for corresponding pain point
-
Added (Employee 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.
-
Provided a dropdown for selecting temporary, permanent or contract employee type.
-
Provided a toggle button for enabling or disabling the user from the database.
-
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 admin user 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.
-
Auto update the created user name and time, modified user name and time based on persona.
-
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 admin users
Solutions for corresponding pain point
-
Implemented like a stepper flow, and each step will act as a breadcrumb to navigate and do edits.
-
Added total available roles count and selected roles count on the global level (next to title).
-
Implemented User ID and User name.
-
Implemented in the accumulator design.
-
In the new design approach, this issue.
-
Provided a search bar in available & selected roles.
-
On this new design approach, we introduced the accumulator design for a simple “add or remove user” design. This means the user (admin) can easily add roles and remove them. It gives them more user control and makes the process smooth.​​
-
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 Centre
-
Need to assign the units manually
-
Cannot assign one permission across all screens
-
Need to close the pop-up for any re-edits in previous stages
-
The screen title is confusing to new admin users
Solutions for corresponding pain point
-
Provided a search bar in Applications, Complexes and Workcenters for easy navigation.
-
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.
-
Implemented the total available count & selected count.
-
Created automate process once the user selects the role, automatically, Applications, Complexes and Workcenters will be assigned based upon roles
-
In the new design approach, the user (admin) picks one permission and applies it to all screens for each module at once.
-
In the new design approach, this issue
-
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 admin 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
Solutions for corresponding pain point
-
On this new design approach, when a user chooses a workcenter, the matching screens & permissions show up automatically.
-
Adding checkboxes to turn unit access, like Create, Delete, and Download, on or off for each screen based on its role. This removes the need for multiple pop-ups and lets the user (admin) finish the task with fewer clicks.
-
Renamed the screen title from enable/disable user functionality to Assign screens and permissions.
-
In the new design approach, this issue is fixed.​
-
Globally Provided a search bar.
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 (employees) 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.
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 (employees) 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 (employees) with low vision, glare sensitivity, or challenging lighting conditions.
-
Motor Accessibility: Increased button sizes to support aged employees with motor impairments, reducing interaction errors.
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.
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.
