Heuristic Analysis of EPFO
Overview:
We apply the 10 principles of heuristics on the official website of Employees’ Provident Fund Organisation (EPFO), a retirement savings scheme for salaried employees run by Ministry of Labour and Employment, Government of India.
About Heuristics
Heuristics are a set of 10 principles that can be applied on any product to identify its flaws in different aspects of its design and rate its usability. Based on these drawbacks it allows the designer to break down the problems and come up with better design solutions that appeal to the aesthetics and functionality. Doing so would eventually result in an improved user satisfaction.
Let’s evaluate the official EPFO website by applying the 10 principals as stated in the above snippet.
1. Visibility of System Status:
Once you land on the EPFO site and explore around by clicking buttons or links one can observe that there is no loader when the user switches from one page to another. Keeping the user informed of the change in state within a reasonable amount of time is important.
Hence I have designed a loader using the logo of the EPFO organisation with Figma Prototype as shown in the below gif that can be used.
Another issue is with respect to website is the lack of usage of Breadcrumbs navigation which is essential for users to identify where exactly in the page they are currently. Although some pages of the website used breadcrumb for navigation most of them do not. Even the places where it is used it is not clearly visible due to overlapping of text.
A breadcrumb that is simple to operate and easy for users to understand is shown below.
Overall Severity Rating: 4/5
2. Match between System and Real World
Near the header of the site there is a blue horizontal navigation bar that has multiple options like Services, Dashboards, Downloads etc do not have a logo next to it. Even the home logo is cut off with a blue background (check the below snippet marked in Red).
It is important to understand that the users unlike the designers, developers may not understand complex words or jargons. Hence they require icons or images that can be related to the real world. Attaching icons to each of those options in the navigation bar is useful.
I have redesigned the navbar into sidebar and have added icons to each of them in the below image.
Overall Severity Rating: 2/5
3. User Control and Freedom
As we explore further the Provident fund website we feel a lack of flexibility to operate. Like when we might click on a link by mistake it does not allow us to go one page back.
If you see the ‘IMAGE 4’ above there are no undo or back button for the user to correct its mistake. This takes away the user control and the freedom.
Overall Severity Rating: 3/5
4. Consistency and Standards
As I go through the site I feel that I must contact the EPFO directly to get some information. So when I try to find a way to reach out to them I get confused. I see the contact options at 4 different places! (Marked in Red below)
Following and sticking to a specific industry conventions becomes important here otherwise users get confused whether these different options for contact are the same thing or not. As a result they get frustrated and leave.
Having a single button or link of Contact us can solve the problem. We can place it in the header as part of the navbar. Hovering over it can give us the options to contact via designated number, toll free number, or through emails and social media.
Overall Severity Rating: 3.5/5
5. Error Prevention
More than preparing for error message designs on the site, it is more important to prevent them if possible. High cost error can save us a lot in the organisations.
The 2 types of errors are slips and mistakes. Slip occur unconsciously but Mistakes happen consciously by the user.
This conscious error of mistake is most likely to happen due to bad design as there is a mismatch with the user’s mental model. This can be seen with the overlapping of elements in the below image.
For example the hyperlinks at the footer on the right get hidden due to the ‘Know your balance’ modal that appears over it at the bottom.
Overall Severity Rating: 4/5
6. Recognition rather than Recall
A lot of the visitors of this site on average belong to the middle aged group who may be nearing retirement.
Most of them will not be familiar or up to date with the latest tech or the widely used apps around the world. For example the renaming of Twitter to X.
IMAGE 12 shows that the site has listed their social media contacts. We only see the logo and not their names. Hence it is important to add labels to them.
Humans have short term memory and we must minimise the memory load of the users, especially if they are from the middle aged category as mentioned.
Overall Severity Rating: 1.5/5
7. Flexibility and Efficiency of Use
This principle in simple terms refers to providing shortcuts to experienced users who perform frequent actions and hiding them from the first time users to prevent confusion.
For a website like EPFO there aren’t much visitors except for the EPFO employees who have a dedicated portal as shown below and marked in yellow.
Instead of placing the employee portal inside the navbar why not use a shortcut or just put the Employee Portal option inside a card element (refer below IMAGE 14) and display it at the home page as soon as the user lands on the EPFO site. This will make the website more efficient.
Overall Severity Level: 1/5
8. Aesthetic and Minimalist Design
We see that the website is highly cluttered with irrelevant and abundant text which no one reads to be honest. Keeping them takes away the visibility of the most important information that matters to the users.
We can remove the irrelevant text and structure it properly & put them in a sidebar as shown in IMAGE 7.
The broad horizontal navbar in dark blue can be removed and be simplified into minimalistic navbar and place it at the header as shown in IMAGE 10.
We can have ‘Contact Us’ option instead of scattering it all across the page as shown in IMAGE 9.
Overall Severity Impact: 4/5
9. Help Users Recognise, Diagnose, and Recover from Errors
If at all the users make mistake we must ensure that there is a smooth transition towards recovery. This requires us to use error messages in plain language and visuals like red color or bold text with shortcuts to recovery.
We can see that in the Feedback page of EPFO, if we make an error in any of the fields a pop up appears asking us to rectify it. The pop up error message uses red fonts with a proper message for user to recover from it.
We can make the feedback form even better by removing the red color from every first letter of the title ‘Feedback Form’.
The user can be prevented from making mistakes as discussed in Point 5 (Error Prevention) by showing them real time updates which was also discussed in Point 1 (Visibility of System Status). Refer IMAGE 17 below.
We add cross and tick symbol with custom error message for every field entered. Also notice in the Feedback box at the bottom right we track the character count.
The ‘Submit’ button too is disabled as the cursor is hovering over it in the above image.
Overall Severity Rating: 0/5
10. Help and Documentation
If at any point the users get stuck and need assistance, it needs to have a well defined and concise Help documentation.
We see that our website has provided a link to Help at the footer of the page.
However we can make it even better using the ‘?’ icon instead and placing it a the bottom right corner at all times for better aesthetics. Refer IMAGE 19 below.
Overall Severity Rating: 0/5
Redesigned Home and Feedback Page
Heuristics approach helped me to design the Homepage and Feedback page of the EPFO website. Below are the redesigned images of both pages.
CONCLUSION
We see that this approach helps us to break down the problems or flaws in any design and come up with better solutions. Thus, it is important to follow the steps in a proper sequence and work upon them to get products of better usability.
