Barnini
Internship
Glidex is a modern and dynamic template for video producers and filmmakers, featuring a stylish bento layout that organizes your portfolio into sleek, manageable sections. With its perfect 100 score on PageSpeed Insights, Glidex ensures lightning-fast performance and a seamless user experience, making it the ideal choice for showcasing your creative work with impact and efficiency.
Organisation:
Hindustan Petroleum Corporation Limited
Role:
UI/UX Design Intern
Duration:
2 months
Project Scope:
Redesigning four legacy digital portals
Primary Focus:
Additional platforms:
MyHPCL, Vendors Portal, Jobs Portal
Primary users:
Retired employees current employees vendors job applicants
Responsibilities:
UX audit, user interviews, information architecture, interface redesign, accessibility considerations, and visual consistency
key Constraints:
Legacy systems, elderly-user needs, dense content, stakeholder preferences, HPCL branding, and confidentiality requirements
Tools Used:
Figma framer photoshop illustrator vs code
This project was completed in an enterprise environment, so selected internal workflows, research details, and interface content have been omitted, blurred, or recreated with representative content. The case study focuses on my design approach, selected screens, and the usability improvements explored during the internship.
Legacy Portal Screens Before Redesign
Key UX Issues Identified
UX area
Finding / impact
Information density
Multiple links, forms, tables, and notices appeared together, making the pages harder to scan.
Visual hierarchy
Important actions and secondary content often had similar visual weight, so key tasks were not immediately clear.
Navigation clarity
Links and categories were not strongly grouped, which made it harder for users to know where to start.
Readability
Small text, tight spacing, and dense tables reduced reading comfort, especially for older users.
Form usability
Search fields, filters, dropdowns, and buttons felt scattered instead of being part of a guided flow.
Content grouping
Related information was not always organized into clear sections, making the interface feel more like a database view.
Action visibility
Buttons and next-step actions were not always prominent, increasing the chance that users could miss them.
Consistency
Different portals used different layouts and spacing patterns, making the overall ecosystem feel fragmented.
Accessibility
Dense text, small controls, and long pages could overwhelm users with lower digital confidence.
Cognitive load
Too many choices were shown at once, forcing users to mentally filter the page before completing simple tasks.
Navigating Different User and Stakeholder Preferences
Accessibility Considerations
Accessibility consideration
Design response
Some users may not recognize hidden navigation patterns like hamburger menus.
Used visible navigation labels where possible.
Icons alone may not clearly communicate meaning.
Paired icons with text labels for better clarity.
Important information can be missed if it appears too far below the first screen.
Prioritized key actions and updates above the fold.
Too many cards can make every section feel equally important.
Created stronger hierarchy between primary and secondary content.
Thin fonts and small text can reduce readability.
Used clearer type weights and comfortable font sizes.
Low-contrast text can be difficult to read, especially on older screens.
Improved contrast between text, backgrounds, and action elements.
Overly modern layouts can feel unfamiliar or less trustworthy to some users.
Balanced modern styling with traditional, predictable structures.
Dense forms can feel intimidating and difficult to complete.
Simplified form sections and improved spacing.
Long paragraphs are difficult to scan
Broke content into shorter sections, cards, and headings.
Support information should be easy to find.
Kept contact, help, or support access visible.
Working Within HPCL’s Brand Constraints
Reorganizing Information Architecture and Interface Patterns
Design Tensions
Design tension
Design response
Modern interface vs familiar experience
Kept the layout cleaner while preserving familiar navigation patterns for older users.
More information vs better readability
Prioritized key information and grouped related content into clearer sections.
Colorful appearance vs visual clarity
Used colors selectively as accents instead of applying them everywhere.
HPCL branding vs accessibility
Balanced HPCL colors with neutral backgrounds, spacing, and readable contrast.
Visible features vs reduced clutter
Surfaced primary actions first and moved secondary content into clearer sections.
English-first design vs bilingual familiarity
Used language and labels carefully to support clarity without overcrowding the layout.
Consistency vs portal-specific needs
Created shared interface patterns while adapting each portal to its own users.
Desktop completeness vs limited scrolling
Placed priority content higher on the page and reduced unnecessary page length.
Confidentiality, Outcomes, and Reflection
Barnini
Internship
Barnini
Internship
Glidex is a modern and dynamic template for video producers and filmmakers, featuring a stylish bento layout that organizes your portfolio into sleek, manageable sections. With its perfect 100 score on PageSpeed Insights, Glidex ensures lightning-fast performance and a seamless user experience, making it the ideal choice for showcasing your creative work with impact and efficiency.
Organisation:
Hindustan Petroleum Corporation Limited
Role:
UI/UX Design Intern
Duration:
2 months
Project Scope:
Redesigning four legacy digital portals
Primary Focus:
Additional platforms:
MyHPCL, Vendors Portal, Jobs Portal
Primary users:
Retired employees current employees vendors job applicants
Retired employees current employees vendors job applicants
Responsibilities:
UX audit, user interviews, information architecture, interface redesign, accessibility considerations, and visual consistency
UX audit, user interviews, information architecture, interface redesign, accessibility considerations, and visual consistency
key Constraints:
Legacy systems, elderly-user needs, dense content, stakeholder preferences, HPCL branding, and confidentiality requirements
Legacy systems, elderly-user needs, dense content, stakeholder preferences, HPCL branding, and confidentiality requirements
Tools Used:
Figma framer photoshop illustrator vs code
Figma framer photoshop illustrator vs code
This project was completed in an enterprise environment, so selected internal workflows, research details, and interface content have been omitted, blurred, or recreated with representative content. The case study focuses on my design approach, selected screens, and the usability improvements explored during the internship.
Legacy Portal Screens Before Redesign
Legacy Portal Screens Before Redesign
Key UX Issues Identified
Key UX Issues Identified
UX area
Finding / impact
Information density
Multiple links, forms, tables, and notices appeared together, making the pages harder to scan.
Multiple links, forms, tables, and notices appeared together, making the pages harder to scan.
Visual hierarchy
Important actions and secondary content often had similar visual weight, so key tasks were not immediately clear.
Important actions and secondary content often had similar visual weight, so key tasks were not immediately clear.
Navigation clarity
Links and categories were not strongly grouped, which made it harder for users to know where to start.
Links and categories were not strongly grouped, which made it harder for users to know where to start.
Readability
Small text, tight spacing, and dense tables reduced reading comfort, especially for older users.
Small text, tight spacing, and dense tables reduced reading comfort, especially for older users.
Form usability
Search fields, filters, dropdowns, and buttons felt scattered instead of being part of a guided flow.
Search fields, filters, dropdowns, and buttons felt scattered instead of being part of a guided flow.
Content grouping
Related information was not always organized into clear sections, making the interface feel more like a database view.
Related information was not always organized into clear sections, making the interface feel more like a database view.
Action visibility
Buttons and next-step actions were not always prominent, increasing the chance that users could miss them.
Buttons and next-step actions were not always prominent, increasing the chance that users could miss them.
Consistency
Different portals used different layouts and spacing patterns, making the overall ecosystem feel fragmented.
Different portals used different layouts and spacing patterns, making the overall ecosystem feel fragmented.
Accessibility
Dense text, small controls, and long pages could overwhelm users with lower digital confidence.
Dense text, small controls, and long pages could overwhelm users with lower digital confidence.
Cognitive load
Too many choices were shown at once, forcing users to mentally filter the page before completing simple tasks.
Too many choices were shown at once, forcing users to mentally filter the page before completing simple tasks.
Retired employees as users
Navigating Different User and Stakeholder Preferences
Accessibility Considerations
Accessibility Considerations
Accessibility consideration
Design response
Some users may not recognize hidden navigation patterns like hamburger menus.
Used visible navigation labels where possible.
Used visible navigation labels where possible.
Icons alone may not clearly communicate meaning.
Paired icons with text labels for better clarity.
Paired icons with text labels for better clarity.
Important information can be missed if it appears too far below the first screen.
Prioritized key actions and updates above the fold.
Prioritized key actions and updates above the fold.
Too many cards can make every section feel equally important.
Created stronger hierarchy between primary and secondary content.
Created stronger hierarchy between primary and secondary content.
Thin fonts and small text can reduce readability.
Used clearer type weights and comfortable font sizes.
Used clearer type weights and comfortable font sizes.
Low-contrast text can be difficult to read, especially on older screens.
Improved contrast between text, backgrounds, and action elements.
Improved contrast between text, backgrounds, and action elements.
Overly modern layouts can feel unfamiliar or less trustworthy to some users.
Balanced modern styling with traditional, predictable structures.
Balanced modern styling with traditional, predictable structures.
Dense forms can feel intimidating and difficult to complete.
Simplified form sections and improved spacing.
Simplified form sections and improved spacing.
Long paragraphs are difficult to scan
Broke content into shorter sections, cards, and headings.
Broke content into shorter sections, cards, and headings.
Support information should be easy to find.
Kept contact, help, or support access visible.
Kept contact, help, or support access visible.
Working Within HPCL’s Brand Constraints
Reorganizing Information Architecture and Interface Patterns
Design Tensions
Design tension
Design response
Modern interface vs familiar experience
Kept the layout cleaner while preserving familiar navigation patterns for older users.
Kept the layout cleaner while preserving familiar navigation patterns for older users.
More information vs better readability
Prioritized key information and grouped related content into clearer sections.
Prioritized key information and grouped related content into clearer sections.
Colorful appearance vs visual clarity
Used colors selectively as accents instead of applying them everywhere.
Used colors selectively as accents instead of applying them everywhere.
HPCL branding vs accessibility
Balanced HPCL colors with neutral backgrounds, spacing, and readable contrast.
Balanced HPCL colors with neutral backgrounds, spacing, and readable contrast.
Visible features vs reduced clutter
Surfaced primary actions first and moved secondary content into clearer sections.
Surfaced primary actions first and moved secondary content into clearer sections.
English-first design vs bilingual familiarity
Used language and labels carefully to support clarity without overcrowding the layout.
Used language and labels carefully to support clarity without overcrowding the layout.
Consistency vs portal-specific needs
Created shared interface patterns while adapting each portal to its own users.
Created shared interface patterns while adapting each portal to its own users.
Desktop completeness vs limited scrolling
Placed priority content higher on the page and reduced unnecessary page length.
Placed priority content higher on the page and reduced unnecessary page length.
Confidentiality, Outcomes, and Reflection