top of page
.png)
UX Audit
EPFO Website - Landing Screen Flow
Why this Case Study?
The aim of this self paced auditing exercise is dual: primarily, to identify and resolve existing usability issues, enhancing user efficiency for the crores of users who rely on this vital government platform. For a website serving such massive user base, where the UX is as crucial as the functionality of every feature, ensuring clarity and ease of use is very important.
​
This also serves as a Personal Development exercise to significantly refine my User Experience design capabilities.
This practical hands-on analysis of a live interface allows me to actively pinpoint UX shortcomings, practice systematic problem identification, and hone my ability to propose impactful improvements, marking a crucial step in my ongoing learning journey!
Audit Timeline
March 2025 (4 Weeks)
Week 1
Week 3
Week 2
Week 4
Understanding the Product and its Business Objectives.
Understanding existing targeted users, their reviews/feedbacks about Product.
Conducting Heuristic Usability /Accessibility
Evaluation of Landing Screen
Recommend Improvements/ Re-imagine the design.
Documentation
Overview - EPFO Portal
The EPFO (Employees’ Provident Fund Organisation) Portal is an official online Platform managed by India’s Empoloyees’ Provident Fund Organisation. 
It Provides various Digital Services related to Provident Fund(PF), Pension, and Insurance for employees and employers.
Some Key features of the Portal includes :
-
Check EPF balance using UAN(Universal Account Number).
-
Check Pension Status.
-
View/Download Passbook and PF Statements.
-
Check EPF registration for Companies.
-
PF Contribution filing and Statements.
-
Withdraw of Transfer PF Online.
-
Employee UAN Activation and Linking.
-
Update KYC Details (Aadhar, PAN, Bank Details etc).
The Users
As of 2023-24 research and reports provided, the Employees' Provident Fund Organisation (EPFO) has :
The User Statistics are approximate and subject to change on Official EPFO reports.
User Feedbacks/Reviews
Existing user reviews and feedbacks given on sites like Reddit etc, were gathered to study and understand the user frustrations and concerns regarding the portal.
The Evaluation:
The EPFO Portal has several critical screens and user journeys, and I have initiated the UX Audit, starting with the Landing Screen.
The Landing Screen is the user’s first interaction with portal, setting the tone for the entire User Experience. 

A well structured and intuitive landing page can - Enhance First Impressions, Guide users Effectively, Reduce Cognitive Load, Improve Engagement and Efficiency. 
So by optimizing the landing screen we lay a strong foundatuon for refining the Entire UX Journey within the EPFO Portal
I have split the Landing screen into 3 individual sections for better study and evaluation purposes.
Heuristics and Accessibility
1. Visibility of System Status:
The design should always keep users informed about what is going on, through appropriate feedback.
Issues
Recommendations
5
The visibility of the current language used in the screen is missing. High chances for users to miss this piece of information and not to know about how/if they can switch the language.
​The Langugae option should be designed better as a drop down selection where the user gets to see/select their preferred language.
10
The Navigation menu items is not indicating proper differences between hovered/focussed/pressed states.
​Users should receive immediate feedback when they interact with a menu item. Defining each states helps them to understand that their action is recogonised by the system.
11
The Navigation menu items is not indicating proper differences between hovered/focussed/pressed states.
Users should receive immediate feedback when they interact with a menu item. Defining each states helps them to understand that their action is recogonised by the system.
18
Other menu items in the screen is also not indicating proper differences between hovered/focussed/pressed states.
Users should receive immediate feedback when they interact with a menu item. Defining each states helps them to understand that their action is recogonised by the system.
2. Match between System & Real World:
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.
Issues
Recommendations
10
The home icon used in the Navigation bar is not a common one. This can make the users feel confused about what it is and why should they interact with it.
A common conventional home icon can be used here.
13
The icon is not making it any better for the user to understand the piece of information presented there.
Better icons can be used which would align better with the data that is being presented
14
The icon is not making it any better for the user to understand the piece of information presented there.
Better icons can be used which would align better with the data that is being presented
3. User Control and Freedom
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted state.
Issues
Recommendations
16
The users are not able to choose between if they want to see this piece of information or not. This may not offering a pleasant experience to them.
Users should be able to undo/dismiss these sticky elements that they dont need/or which is not even relevant to what they intend to do with the website.
17
The users are not able to choose between if they want to see this piece of information or not. This may not offering a pleasant experience to them.
Users should be able to undo/dismiss these sticky elements that they dont need/or which is not even relevant to what they intend to do with the website.
4. Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Issues
Recommendations
2
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
The Design must be iterated in a way where the user is able to access relevant informations/CTA’s without much external efforts.
3
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recogonise them, which contradicts the principle that interface should make elements easily distinguishable
The Design must be iterated in a way where the user is able to access relevant informations/CTA’s without much external efforts.
4
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recogonise them, which contradicts the principle that interface should make elements easily distinguishable
The Design must be iterated in a way where the user is able to access relevant informations/CTA’s without much external efforts.
5
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
The Design must be iterated in a way where the user is able to access relevant informations/CTA’s without much external efforts.
5
Standard Accessibility Guidelines(such as WCAG Contrast Ratio exist to ensure redability and usability). The design fails in maintaining this standards.
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
10
Users are not provided with the appropriate feedback for their action, forcing them to guess or rememeber their previous action.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
11
Disoragnised menu here is forcing users to rememeber where items are instead of recogonising them intutively.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
18
Navigation Menus should follow common UI patterns and here they are disorganised, creating inconsistency and making it harder for users to find what they need.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
19
Link buttons are not communicating to the users about their function. Also across the screen they are styled in different ways which will confuse the users, deviating from consistency and standards.
Link buttons should be designed properly and consistently across the website to avoid confusing the users about which elements are interactive and which one leads to external sites.
20
Standard Accessibility Guidelines(such as WCAG Contrast Ratio exist to ensure redability and usability). The design fails in maintaining this standards.
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
5. Error Prevenetion
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions,
or check for them and present users with a confirmation option before they commit to the action.
Issues
Recommendations
16
The users are not able to choose between if they want to see this piece of information or not. This may not offering a pleasant experience to them.
Users should be able to undo/dismiss these sticky elements that they dont need/or which is not even relevant to what they intend to do with the website.
17
The users are not able to choose between if they want to see this piece of information or not. This may not offering a pleasant experience to them.
Users should be able to undo/dismiss these sticky elements that they dont need/or which is not even relevant to what they intend to do with the website.
6. Recognition Rather than Recall
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of
the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Issues
Recommendations
1
Standard Accessibility Guidelines(such as WCAG Contrast Ratio exist to ensure redability and usability). The design fails in maintaining this standards.
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
2
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
Screen Reader Access button should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
3
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
Skip to main content should be designed as a proper CTA and also in a way where it meets usability and accessibility following the guidelines and best practices.
4
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
5
If users struggle to identify buttons/text due to poor color contrast, they are forced to exert extra efforts to recognize them, which contradicts the principle that interface should make elements easily distinguishable
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
10
Navigation Menus should follow common UI patterns and here they are disorganised, creating inconsistency and making it harder for users to find what they need.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
11
Navigation Menus should follow common UI patterns and here they are disorganised, creating inconsistency and making it harder for users to find what they need.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
18
Navigation Menus should follow common UI patterns and here they are disorganised, creating inconsistency and making it harder for users to find what they need.
The Navigation Menus should be properly organised and grouped based on their function and designed in a way where it meets usability and accessibility following the guidelines and best practices.
19
Link buttons are not communicating to the users about their function. Also across the screen they are styled in different ways which will confuse the users, deviating from consistency and standards.
Link buttons should be designed properly and consistently across the website to avoid confusing the users about which elements are interactive and which one leads to external sites.
20
Standard Accessibility Guidelines(such as WCAG Contrast Ratio exist to ensure redability and usability). The design fails in maintaining this standards.
This piece of content should be designed in a way where it meets usability and accessibility following the guidelines and best practices.
6. Flexibility and Efficiency of Use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Issues
Recommendations
13
Expand/Collapse options is not made available to the users, this affects them efficiently customising their experience also overwhelming with the huge chunks of data.
The design must offer the Users control over their interface. Expand Collapse option should me made available for users in need.
14
Expand/Collapse options is not made available to the users, this affects them efficiently customising their experience also overwhelming with the huge chunks of data.
The design must offer the Users control over their interface. Expand Collapse option should me made available for users in need.
15
Expand/Collapse options is not made available to the users, this affects them efficiently customising their experience also overwhelming with the huge chunks of data.
The design must offer the Users control over their interface. Expand Collapse option should me made available for users in need.
16
The stickies cannot be collapsed/closed, limiting users the ability to customise their experience and focus on whats important.
The design must offer the Users control over their interface.
8. Aesthetic and Minimalist Design
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Issues
Recommendations
-
Almost every element of the screen is not properly aligned to the Aesthetic and Minimalist Design Standards
The design can be iterated in a way where the Accessibility and Usability is met along with Aesthetics and Minimal Designs.
Design Iterations!
Some of the notable iterations that I have recommended and implemented in the design is given below:
Buttons (Call-To-Action's)
Effectively defined the CTAs, enhancing their accessibility and usability.
The default and hover states of the buttons are now clearly distinguished, for better user clarity.
Default State
Hover State
On mouse hovering
.png){kind=small}
On mouse hovering
.png)
Re-imagined the colors of buttons and other important Call-To-Action's along with providing more definition for text sizes and use of appropriate icons that supports the text/actions intended.
Organized all the logos (images) into a cohesive and visually appealing layout.
*Existing EPFO Portal Screen
Enhanced the color contrast and overall accessibility of the marquee text, which is essential for displaying site updates and news items to visitors.
Effectively defined the main navigation menu, re-imagined the colors and the default and hover states of the buttons are now clearly distinguished, for better user clarity.
Global Search and Visual Images
Implemented a global search input field to enhance user experience, allowing users to easily locate items throughout the site.
Quick Links
Consolidated all helpful quick links into a dedicated section for easy access and improved user navigation. Effectively defined each link's default and hover states providing clarity and intuitive visual feedback.
Social Engagement - Floating Button
To minimize cognitive load and maintain a clean interface implemented a floating button that consolidates all social media handles. This approach helped to clear the visual clutter.
Clear & Visible Helpline Numbers
Prominently displayed at the bottom of the screen making it easy for users to quickly find support when they need it without having to search for it
.jpg)
Going Forward!
This Case Study will be expanded to include the analysis and audit of other critical flows and screens from the EPFO Portal.
The study will include potential areas of improvement, and to assess their overall efficiency and user experience.
Going forward all the findings will be documented and updated.
bottom of page