The Thai Revenue Department had recently redesigned their E-filing website for filing taxes online. With plans to launch to the public at the end of March 2022, the Thai RD wanted to make sure that their new website would be easy to use for the 10 million of people who file their Personal Income Tax Return online every year.
The Thai RD approached us to help them conduct a usability test on the UAT version of their new website and provide Professional Computer Co. (PCC), the company who had done the design and development of the new website, with UI changes that would address any issues we discovered.
To kickoff the project our team evaluated the E-Filing UAT website based on Jakob's Nielsen's 10 Usability Heuristics for User Interface Design. The goal here was to identify potential areas where people might have trouble using the new website as well as discuss with the RD and PCC team what the legal or technical limitations might be in trying to solve them.
Based on taking the average severity rating from our 4 evaluations, the table below shows a high level overview of where the usability issues were concentrated. The most concerning issues dealt with #1 visibility of system status, #2 match between system and the real world, #4 consistency and standards, and #10 help and documentation.
Walkthrough of Usability Concerns
Before going over the major usability concerns, I want to give a quick walkthrough of the UAT E-filing website to make it easier to follow along as well as show the elements and overall design that we evaluated. View Usability Walkthrough
Heuristic #1: Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
During the evaluation, there were many instances where not enough feedback was provided so it was hard to tell what was happening. For example, when filling out the business income, if the business expense inventory cost for the year did not add up the system would not allow the user to proceed. However, it did this without displaying any validation, so we were left wondering why we couldn't save that item. In some cases where there was a error message it was almost a paragraph in size and appeared only a few seconds before disappearing so quickly that most people won't be likely to read it in time.
Heuristic #2: Match between system and the real world
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon
Good copywriting is essential in communicating with the user. However, in almost all the screens we evaluated there was a lot of bureaucratic jargon that was difficult to understand. The most problematic seemed to be this popup at the Review Tax Calculation stage telling the users that they have not filled out the name/website of their business and to "cancel" to proceed without filling it or "accept" to edit. A more user friendly way would be to word this confirmation modal so that users accept to proceed without filling out the website/name of their business. However, this is only a band-aid fix. A better solution would be to question why the field to input the name of business has to appear at the review tax calculation page. Shouldn't it be mapped to when the user has selected their income type in step 2?
Heuristic #4: Consistency and Standard
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Throughout the E-filing website there were many components and elements that did not follow website conventions such as a tooltip that users had to click instead of hover or a disabled field that displays information when the user click the green text ghost button that says "input information" .
Heuristic #10: Help and Documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
The content in the tooltips are very lengthy legal descriptions that don't seem to offer much guidance. For example in Step 2: Input Income there are many income types to choose from. People new to the workforce and filing their taxes might not know which one to choose so the tool tip should help them make an informed decision on which item to select. If possible providing examples would be especially helpful for cases where selecting the correct income type is not as obvious like selling stuff online (it is under "income from business" and the sub category of "others").
The next step was to test the UAT website with actual people. It was important to get the RD and PCC team involved so they could observe for themselves how users were using their product and what problems they were having. We interviewed 12 people with a mixture of marital status (Single and Married) and experience level (have filed their taxes online for 2 years or less vs 3 or more years).
The one-on-one interview was conducted via Zoom and lasted for about 1 hour. Users shared their screen on Zoom and we sent them the link to the E-Filing website. Since filing taxes require sensitive personal data we also provided them with a test account and made-up information that included personal details and supporting pdf documents such as their pay slip or mutual fund slip.
For the income portion, users were asked to file their taxes based on receiving:
As for the deductible portion, user were told they had:
Although there were plenty of slowers such as the interaction with the disabled fields mentioned earlier, most of the people were able to complete Task #1 to 3 without any stoppers. However, Task #4 & 5 were most concerning with the lowest completion rate of 37%. After that Tasks #6 - 9 went by quite well with most users able to input their deductibles easily, review their taxes, and submit their tax filings.
Task #4 Input Income from business activity
Users had the most difficulty selecting the correct tax type for selling clothes on Shopee. This could be attributed to the lack of organization, the ambiguous name of the tax type itself, and the lack of helpful explanation. Firstly, the 16 tax types were listed all together, which made it difficult for users to look through. Secondly, the name of the tax type itself was not the most obvious, roughly translated it says "income from business, transportation, agriculture, manufacturing, deliveries, and others". Many users who weren't sure tried to use the tooltip but after reading it still choose the incorrect one.
Furthermore, when users did make it to the correct tax type, many were unable to select the correct sub-type for their income. This was most likely due to the dropdown selector having 48 choices without any meaningful organization. Another reason was due to the contrasting wordings. For example all the choices are very specific such as "dry cleaning and dyeing" or "making balloons, glassware, or plastic", which gave them the impression they had to find a sub-category that said something like "fashion or clothing". However, the choice they were actually suppose to select is "selling other stuff which is not listed here and the owner did not produce themselves". Another problem many users had was inputing the correct amount of taxes that had already been paid. In the case of Shopee the company does not do any deductions so the users are supposed to input 0 but many misunderstood and multiplied their earnings by the tax rate and wrote down that number. Finally, many users weren't sure whether or not to check box option that said "I wish to deduct using my actual cost".
Task #5 Input Income from Mutual Fund Dividend
Similarly, many users did not choose the correct tax type to fill out. They clicked on "Interest, dividend from overseas business, offerings, and corporate action", whereas the correct one they were suppose to select was "dividend and share of profits from stock and mutual fund". Here users also had trouble filling out the field that asked for the total amount of money they received. This is because when people receive a slip from Thai mutual funds it will show the full amount as well as the amount after deductions. Many people weren't sure which number they were suppose to use to fill in.
Although many of the problems users encountered echoed our concerns from our heuristic analysis, there were a few interesting usability issues that we hadn't expected.
The new login flow did not match with users current mental model
We were surprised to find a majority of the users have trouble logging into the system. What happened was when users arrived at the home page they appeared to be trying to search for something. When they couldn't find it they eventually clicked the button that said "File taxes online", which took them to the login screen (which was what they were supposed to do). However, many users clicked back out and resumed trying to find something else, acting as if the login screen was not what they were looking for. This was really intriguing and upon further discussion, it turns out that many were trying to find a way to select Tax Type and choose the form they wanted to fill out then login.
To understand how something so simple like logging in became a huge slower, we have to examine the previous e-filing website that many of these users have grown accustomed to using for many years. In the old version, when users landed on the home page they would navigate to a tab that says "File taxes online" then select from a list the form type they wanted to file, which then takes them to the login screen.
In the redesigned version of E-Filing website it was a universal login, which meant that each tax type form did not have its own account. Users were expected to login first then select which tax type they want to file. However, in the users mind they were still familiar with the one tax type one account, so many were confused when they couldn't find a place to select the form. In one extreme case, one lady who also filed taxes for her business failed to login in because when she got to the login page chrome had autofilled her business tax username into the field, so she had incorrectly assumed that this was the login page for the business tax type and couldn't figure out where to go to select the individual personal income.
Clicking back on the browser erased everything
Irrespective of where the user were on the form, if users click back on their browser they are taken back to the dashboard without any confirmation popup and lost all progress on their form if they haven't saved. In this system the saving is not done automatically and users have to manually click the save button on the bottom, which during our tests almost none of our users did till they got pass inputing deductibles. Another reason many users had to use the back button on the browser in the first place was because when they navigated to an inside page there was no back button on the UI only a submit button.
A key insight from our user test was that people had a hard time selecting the right choices when items were listed all together and arranged in no particular order.
Source of Income
With over 16 types of income to choose from in Step 2 Input Income this made for quite a difficult browsing experience, especially when users weren't familiar with the sources of income and had to read back and forth to decide which one to select.
To solve for this we had a co-working session with PCC and the RD Team where we group these income items into categories. Based on this collaboration, the income types could be organized into 5 main categories: Salary, Freelance, Investment, Personal Business, and Others.
Income from Business, subtype dropdown
When users selected the "income from business, transportation, agriculture, manufacturing, deliveries, and others" type they then have to fill out additional details about their source of income. One field in the detail page is a dropdown for business category that had over 48 choices. Again these were organized in no discernible order and many users struggled trying to find the right one for selling stuff online which is a popular side income for many Thai citizens.
Working together, we grouped those 48 choices into 10 main categories. The example below shows the subcategories of the "Buying & Selling" main category. However, it is important to note that this is only a bandaid fix using UX. As you can see below the wording itself for the subcategories are rather confusing and a long term user friendly experience would require the Thai RD to work with their legal compliance team to come up with more clear choices. For example, people who receive side income from selling stuff online through e-commerce platforms like Lazada or Shopee are expected to select the "Other stuff which is not listed here..." subcategory shown below. But based on our usability tests this is not an obvious choice because all the other subcategories are very specific such as "Jewelry" or "Ships" so most users are trying to find something that describes the stuff that they are selling. For example if they bought and sold electronics from Alibaba they are expecting to find a subcategory relating to electronics.
Based on the new sitemap and user test insights we created wireframes for the pages where we had the most uncertainty. This allowed us to ideate and explore how the design and layout should be. Since we already had a UI design system in place from our past project back when we redesigned the main Thai RD website, we skipped wireframing the other screens with plans to create the rest as a UI. View wireframe screens
Select Tax Type
Tax filers can now easily view and select which tax type they want to file. Unlike the old version which just displayed the tax code the new design also provides a description to help new tax filers. Mass popup announcements were substituted for a compact banner placed near the relevant tax types.
Login or Signup
This page did not undergo much change besides reskin-ing the UI to match the new design system. One minor difference was changing the wording in the label from "Username" to "Thai Tax ID number" since during our tests quite a few users tried to input their email (having forgotten what their username was since they use it once a year)
Step 1: Personal Detail
In this new redesigned page users input their personal details like before but now have the option to input their business detail if applicable. This allowed us to move the business info detail from the Step 4 review page, which had caused much confusion, to a more relevant page. The additional details for married marital status was also reorganized and structured to be more intuitive.
Step 2: Input Income
Tax filers can now easily scan for their income type based on the 4 main categories. The disabled fields were removed and the interaction after the user had input their income modified. In the old version after the user inputs their income detail the system would hide all the other items and showed only the income the user had recently input. With this new structure the items don't need to be hidden anymore.
Input Income > Online Store
Instead of choosing from a 48 choice long list, tax filers select from a main category dropdown with 10 choices then select from a subcategory dropdown. A tooltip was also added to explain what Cost Calculation method was. The text in the bullet point beneath the radio choices show the calculated amount of their taxable amount, so users can figure out which method they should select.
Step 3: Input Deductible
This page did not undergo much change since there was minimal usability issues. A more compact announcement banner was used instead of a popup that told the user to input the actual amount of their deductible since the system will automatically use the highest amount their are eligible for.
Step 4: Review
Unlike the old version which listed every single item mixed together, tax filers can more easily follow the calculations which start with their income working its way down to amount after deductions and down to the total amount they have to pay or get refunded. A see calculation text link was added to help users understand how their taxes were calculated based on the progressive step method.
Step 5: Confirm submission
The major difference in this new version is we went from having 6 steps to 5 steps. In the old version, users reviewed their tax filing and have to review the tax amount again, which mislead some users into thinking that they already successfully completed their filing when they got to this page.
Tax Filing Complete
Tax filers see that their taxes have been successfully filed and the status of their refund is currently being under review. They can upload additional documents ahead of time such as with insurance slips. The satisfaction survey was moved to be a section within this page instead of the old version's popup which prevented users from seeing the success page unless they submitted an answer (which was pretty dark UX).
E-filing Logged in Dashboard > File Tax
If users happen to log back into the system their portal is arranged into distinct tabs for easy visibility of E-Filing core services. The first tab is the file tax tab. Tax filers can choose to file other types such as pay their duty stamp.
E-filing Logged in Dashboard > Check Status
If tax filers navigate to the second check status tab they can see their filing details on the table.
Select Tax Type
Tax filers can now easily view and select which tax type they want to file. Unlike the old version which just displayed the tax code the new design also provides a description to help new tax filers. Mass popup announcements were substituted for a compact banner placed near the relevant tax types.
Login or Signup
This page did not undergo much change besides reskin-ing the UI to match the new design system. One minor difference was changing the wording in the label from "Username" to "Thai Tax ID number" since during our tests quite a few users tried to input their email (having forgotten what their username was since they use it once a year)
Step 1: Personal Detail
In this new redesigned page users input their personal details like before but now have the option to input their business detail if applicable. This allowed us to move the business info detail from the Step 4 review page, which had caused much confusion, to a more relevant page. The additional details for married marital status was also reorganized and structured to be more intuitive.
Step 2: Input Income
Tax filers can now easily scan for their income type based on the 4 main categories. The disabled fields were removed and the interaction after the user had input their income modified. In the old version after the user inputs their income detail the system would hide all the other items and showed only the income the user had recently input. With this new structure the items don't need to be hidden anymore.
Input Income > Online Store
Instead of choosing from a 48 choice long list, tax filers select from a main category dropdown with 10 choices then select from a subcategory dropdown. A tooltip was also added to explain what Cost Calculation method was. The text in the bullet point beneath the radio choices show the calculated amount of their taxable amount, so users can figure out which method they should select.
Step 3: Input Deductible
This page did not undergo much change since there was minimal usability issues. A more compact announcement banner was used instead of a popup that told the user to input the actual amount of their deductible since the system will automatically use the highest amount their are eligible for.
Step 4: Review
Unlike the old version which listed every single item mixed together, tax filers can more easily follow the calculations which start with their income working its way down to amount after deductions and down to the total amount they have to pay or get refunded. A see calculation text link was added to help users understand how their taxes were calculated based on the progressive step method.
Step 5: Confirm submission
The major difference in this new version is we went from having 6 steps to 5 steps. In the old version, users reviewed their tax filing and have to review the tax amount again, which mislead some users into thinking that they already successfully completed their filing when they got to this page.
Tax Filing Complete
Tax filers see that their taxes have been successfully filed and the status of their refund is currently being under review. They can upload additional documents ahead of time such as with insurance slips. The satisfaction survey was moved to be a section within this page instead of the old version's popup which prevented users from seeing the success page unless they submitted an answer (which was pretty dark UX).
E-filing Logged in Dashboard > File Tax
If users happen to log back into the system their portal is arranged into distinct tabs for easy visibility of E-Filing core services. The first tab is the file tax tab. Tax filers can choose to file other types such as pay their duty stamp.
E-filing Logged in Dashboard > Check Status
If tax filers navigate to the check status tab they can see their filing details on the table.
A clickable version of the redesigned UI screens can be viewed here: View Single Filing UI Prototype
The way the Thai RD filing process works for marital status is that users who are married can choose to either do single filing or joint filing with their spouse, and by selecting the joint flow users are inputing income and deductibles for both them and their spouse. The UI screens can be viewed here: View Joint Filing UI Prototype
Through Ahancer I have been fortunate to be able to work with the Thai Revenue department on three separate occasions. The first was helping to design their pension fund website, the second was the e-Service website for collecting VAT from foreign electronic service providers, and this E-filing project. Based on these engagements I believe a lot of the usability issues I observed stemmed from vendors directly converting the paper form that tax officials use into a UI screen. The fact is that the general public aren't as familiar with the forms like the tax officials. Furthermore, unlike a piece of paper that has a limited space and have to be able to handle a variety of tax cases, digital screens aren't bounded by the same rules. By trying to fit everything in one screen this made it even harder to use.
For this project I really enjoyed working with Khun Oat the Systems Analyst, Noona the BA from the PCC team and Khun Yo the PM from the Thai RD team. I believe our working team was able to leverage each others strengths and worked together to arrive at a solution that not only made for a more pleasant experience for the users but also one that the PCC development team would be able roll out in time in March 2022.
Up until this project most of the apps or websites I have worked on with Ahancer were rather niche like a stock trading app or e-book app, so no one in my family has gotten to play around with the stuff I help designed before. However, this is one product I know for sure my mum will have to use and coincidentally my sister as well who just started working in Thailand this year! I hope I didn't let them down.
