Web Tax Tools
UX/UI Design
Maximizing an opportunity to re-skin popular web tax tools to make incremental updates to the user experience and introduce new multi-use components to the Block Design System
Can a visual update of web-based tax tools also be an exercise in improving user experience?
In 2021, we sought to update the outdated and clunky user interfaces of several hrblock.com tax tools. Recognizing the need for a visual refresh and improved usability, we embarked on three projects to redesign the appearance and functionality of these tools to provide a more seamless experience for our users.
Tax calculator
One of our quickest wins on this journey would be our Tax Calculator Tool, used to help users estimate their refund or amount owed based on unauthenticated demographic and income information.
To begin, I carefully mapped the existing flow of the tax tool, ensuring that the underlying logic remained unchanged. My goal was to make the tool more user-friendly without altering the fundamental calculations it performed. To achieve this, I leveraged the relatively-new Block Design System (BDS) to convert as many existing components as possible on both Desktop and Mobile.
Updating the tool to BDS standards meant updating form fields, colors, fonts, typographic styles, icons, and layout.
One thing I did not see in the BDS was a progress indicator for tools. The current indicator used within the H&R Block DIY Filing project had not yet been updated to BDS styling, so I had the opportunity to develop an intuitive navigation that also clocked a user’s progression through the tool and process.
The tool included clearly different active, completed, and inactive states, as well as a circular, pie-chart progress indicator coupled with the estimated refund total on the right hand side. BDS icons help create quick associations with the categories, even without reading the titles.
Upon reaching the results page, the estimated refund moves out of the progress bar and into the page. If a user opts to edit previous entries once they see the results, the results page and all other tabs appear complete, with the tab being edited highlighted in the active state.
I also paid special attention to the results page. I wanted to improve the hierarchy and presentation to enhance user understanding and drive conversion through our filing products. By implementing a more intuitive and visually pleasing design, we anticipated that users would be more inclined to engage with the results and derive value from the tool.
Our final result was a visually updated tool with clear sectioning and a dynamic refund or amount owed estimator to indicate progress as a user entered their information into the calculator, and a results page with a clear estimate breakdown that could allow a user to re-enter the tool and modify their answers to view the affect on their refund or amount owed. The live tool can be viewed at https://www.hrblock.com/tax-calculator/.
Tax Prep Checklist
The Tax Prep Checklist followed similar suit. In addition to a BDS update, a key aspect of this redesign was the incorporation of appropriate icons. Icons can convey information quickly and intuitively, providing visual cues that enhance user comprehension. By carefully selecting and implementing icons, we aimed to improve the clarity and understanding of the checklist items, making it easier for users to navigate through the tool.
Updating the tool to BDS standards meant updating form fields, colors, fonts, typographic styles, icons, and layout.
The output of this redesign included a completely re-skinned Tax Prep Checklist Tool for both Desktop and Mobile, a revamped results page, and a printable version of the checklist. These artifacts reflected our commitment to delivering a seamless and user-centric experience. The final tool and checklist can be viewed at https://www.hrblock.com/tax-prep-checklist/.
Team
Haley Mitchell
Designer
Dave Richards
Copywriter
my contributions
Responsible for all visual UI design
Designed and worked with the BDS team to introduce the new progress navigation bar