Reach Experience Design
Taiwan Tax Filing Mobile Website
UI/UX optimization
Nov-Dec, 2021
Overview
In this project, we conducted a 2-stage usability test within 1.5 months, put forward 40+ design suggestions, and collaborated with the developers of various functions in the project to ensure that the public's data editing process was smooth and unobstructed.
Finally, through workflow optimization, we not only improved the efficiency of meetings by 50% but nearly 96% of design proposals were accepted and implemented.
Background
Optimize the Tax Filing Mobile Website for better UX!
The tax e-filing mobile version of the Ministry of Finance of the Republic of China is a website launched in 2021, but it didn't provide the functions of revising information.
This time in 2022, it was decided to add functions for revising personal information, such as adding dependents and editing the amount of data, so that the public can do the tax-filing more conveniently on their mobile phone.
Project Goal
Allow users to complete the tax information modification process and pay fees smoothly.
The goal of this project is to ensure that users can smoothly use the new functions "Editing Dependent Relatives" and "Editing Deductions" added this year, and also complete tax payments smoothly.
Editing
Dependent Relatives
Editing Deductions
Payment
My Role
-
Project Management
-
Planning and conducting user research.
-
Provide related UI design suggestions.
Method & Tool
-
Usability Test
-
Prototype Testing
-
Figma
Research Method: Usability Test
Explore the Current Defect and Verify the optimization
To ensure that our final design suggestions are helpful, we conducted 2 stages of the usability tests:
1. Identify the problems of user experience.
2. Evaluate the effectiveness of the 1st proposed suggestion.
Timeline
Participants
Both the Novice and the Old-timer
To ensure that the results of this usability test can include feedback widely, and increase the research validity, we recruited the three major groups: (1)Tax filing novices, (2)Offline tax filing veterans, (3)Web tax filing veterans, hoping that both tax novice and tax veteran can use it smoothly.
Round 1
1. Tax filing novice
Zero-knowledge and experience of tax filing.
Round 2
2. Offline tax filing veteran
Familiar with offline tax filing,
but have no experience in online e-filing.
.png)
.png)
3. Web tax filing veteran
Have experience in both offline and e-online
tax filing.
.png)
The tasks of the usability test:
Research Findings
The problems in the tax-filing process
Based on the results of the usability tests, we identified more than 40 usability issues, which can be broadly categorized into four dimensions:
1. Lack of Consistent Design Principles
Some design elements are overly similar or inconsistent, causing users to have difficulty distinguishing between them and leading to confusion.
*For all kinds of users.
2. Unclear information layout.
The page layout made the information unclear or unintuitive, causing users to miss or misunderstand how to use the features.
*For all kinds of users.
3. Unclear or Difficult Text Descriptions
The wording used in titles or explanatory content made it difficult for users to understand the meaning.
*especially for the tax-filing novice.
4. Insufficient Operational instructions
The lack of clear instructions and steps led to confusion and difficulty during the operation.
*especially for both tax-filing novices and offline tax filing veteran.
"After the interview and test, we really saw a lot of problems that we hadn't thought about, which made us more aware of the status of the product"
An Undertaker of Ministry of Finance Information Center
Design Suggestions
In response to the problems in the usability test, we put forward more than 40 design suggestions, of which nearly 96% were successfully adopted.
Here are several successful example designs.
Establish clear design guidelines
for visual components
Title
Botton
Problem 1-1.
The titles and buttons lack unified design; sometimes they are even similar ellipses, leading to frequent mistaken clicks by users.
After Optimizing
We applied related design principles to distinguish the two visual elements: the title has right angles connected to the content area, and the button is a rounded rectangle.
The second round of testing confirmed the success of the design, that users no longer mistook the title for a button.
Title
Button
Establish clear design guidelines to differentiate between main and subpages.
Problem 1-2.
The design standards for subpages are not yet unified, sometimes even overlapping with the main page or obscuring important content on the main page (such as operational steps), resulting in users frequently getting lost during navigation.
After Optimizing
We integrated all subpages using pop-up windows on the bottom and scrim design, allowing users to clearly understand their current steps in the tax filing process.
Integrate Existing Reading Habits
Problem 2-1.
-
The calculation symbols were mistakenly recognized as clickable buttons (e.g., misunderstanding the plus sign as an add button).
-
The formula's arranging is differed from user habits, making it difficult for them to understand the meaning of calculation.
After Optimizing
We first narrowed and simplified the operation symbol to make it like a part of the text, and put the equal sign at the end of the formula to conform to public perception.
.png)
Distinguish between different states clearly to guide the action next
Problem 2-2.
-
The status design easily leads users to believe the data has already been entered, causing them to skip steps.
-
The similarity between the entered status and the buttons causes misunderstandings.
After Optimizing
-
Add a prominent prompt to describe the reason for the operation to reduce the chance of being ignored.
-
We separated the entered and unentered states in different UI designs, which clearly distinguished the regions that can be clicked.
-
To prevent users from skipping this step, we set a check box to ensure that people have viewed the page carefully.
Display the unentered state as button
Display the entered state as text
"Tick" to go to the next step
Apply UX writing techniques
to enhance context clarity
Problem 3.
The text arrangement is messy, and the message is complex, therefore it's difficult to read.
After Optimizing
To keep the obscure tax lore, we refer to the San Francisco design guidelines to adjust the presentation of the text: changing titles, emphasizing verbs, breaking up paragraphs, and making good use of bullet points to make the text more comprehensible.
Address users as "you" to understand who are referring to quickly.
Break up paragraphs with different actions to make it clearer how to do it.
Use bullet points instead of numerical labels to avoid misinterpretation as steps.
Provide necessary instructions
to assist with selection
Problem 4.
Only presenting the options results in confusion or consternation when users discover that the choice may not be right for them.
After Optimizing
We list the equipment and information required for each option to help users determine the appropriate method, along with validated method steps to increase the sense of control and security of the process.
"We have adjusted ourselves before, but after reading your design proposal, we found that...
Experts really are experts! "
Ministry of Finance Information Center
Challenge
Tight schedules make developers tend to block optimization proposals.
Therefore, to proceed smoothly, in the past, the owner could only make demands with a tough attitude, which led to a stalemate between the two parties and affected the project's progress.
The pain points in the previous project:
-
The change is too large to be finished in time
Optimization projects often have a short cycle but require a large number of corrections and cannot be completed within the construction period.
-
Inconsistent departmental opinions
Different departments have different opinions and are difficult to integrate, which often leads to situations with different needs, making the optimization with no end in sight.
-
Design contradicts the logic
The proposed design does not comply with coding logic or tax reporting rules, making it impossible to adjust.
Solution
Improve domain knowledge and
actively communicate with the team
In this project, we not only made professional UI suggestions based on user feedback and our optimization experience but also:
-
Studying the Tax Declaration knowledge with the owner
-
Confirmed the feasibility with the developers:
-
Whether the proposed design can be completed within the schedule.
-
If there are any contradictions with the programming logic.
-
Ensure that the design suggestions provided can be fully implemented, ease the atmosphere of cooperation between the teams, and thus promote the efficiency of the proposal meeting by 50% in the end.
Project
Outcome
-
Conducted 2-stage usability testing with a total of 6 people within 1.5 month.
Proposed more than 40 design suggestions and received wonderful feedback during user verification.
Adjust the project operation to make teamwork more harmonious and smooth, and increase meeting efficiency by more than 50%.
-
Successfully implemented nearly 96% of design suggestions.
Personal Reflection
Mutual understanding is the cornerstone of cross-departmental collaboration.
In this project, I completed two phases of usability testing within a short timeframe, which included time for developers to implement changes. This was also my first experience conducting such cross-departmental collaboration in practical work.
I had heard that similar projects in the past faced difficulties with "designs being hard to implement." Through discussions with the client and interactions with developers, I realized that the core issue was that the design did not account for government regulations, development logic, and engineering timelines. To address this, I delved into tax knowledge, confirmed regulations with the client, and discussed technical and time feasibility with developers. This approach allowed us to optimize the user experience while meeting the deadline, resulting in unprecedented success.
These communications also helped me understand the challenges faced by different departments and methods for effective collaboration.
However, there are still some regrets.
During the project, I noticed that the visual components of the website were highly inconsistent. Although we proposed some design guidelines that would impact the current workflow, I believe that with more time, we could refer to other design guidelines to establish visual consistency for this system and even for all tax-related systems, significantly enhancing the user experience.
