Advice on Designing a Tax Form in Material Design [on hold]

FULL DISCLOSURE

While a large portion of inspiration for this tax form came from Material Design, we have deviated largely from some of the core aspects of Material Design to cater for our own corporate design as well as to fit the amount of data in as little space as possible.

BACKGROUND INFORMATION

I am currently employed by a company that leads the South African market in CRM and Tax software.

Our software enables us to maintain the lead in our industry due to our development orientation towards functionality, sometimes at the cost of decent user experience/ user interface.

As part of our effort to innovate and provide the best user experience we can, we've started designing a new Income Tax Return form for our users.

I've included screenshots to demonstrate the difference between our government's tax form, our current tax form as well as the new design we are working on.

Government's Tax Form enter image description here

Our current form enter image description here

Our new design enter image description here

This is a very new concept for us, as we have never concentrated on the user interface as much as now.

I have faced many challenges during this design period, especially when it comes to properly implementing a Material Design structure to the form. The form is huge, and material 'components', while well designed, require a lot of space.

Because of the way our government handles tax, we are subject to changes in the form on a yearly basis, sometimes without prior notice. Because we allow clients to complete their tax returns through our software, we need to ensure that the have the most up-to-date questions and forms.

Thus, we have opted to design the new form using Vue.js as our front-end framework. The questions are all stored as json strings, letting each of our client sites fetch the latest questions without us having to ensure manually that they are up to date.

We've presented this new design to a select group of pilot (early-access) clients and have received only positive feedback.

Historically, we've used a tabular structure for most of our GUI. You can observe this in the screenshot for our current tax form. Instead of deviating from this practice, I've attempted to maintain the tabular structure when designing the new form.

Our new tax form is using a templating system, so re-use controls throughout the form.

ADVICE NEEDED

I'm posting on the exchange to get some advice on some specific challenges for me in designing this form:

  1. The form requires you to fill out a preferences page, with YES/NO checkboxes. There are three states to this control, being YES, NO and unchecked. Currently we are experimenting with different colored YES/NO boxes to indicate which one is selected. Is there a better way for us to implement these checkboxes?

enter image description here

  1. Form validation plays a big role in this form, and we are currently unsure how to approach a consistent validation system throughout the form. Currently, we are experimenting with an inline error template to display the error message within each row/question. Is there a better way we could be displaying validation messages?

enter image description here enter image description here

  1. General Feedback / Resources to learn

If you have any constructive feedback or advice to share that can help me during this design period, I welcome it with open arms. Alternatively, if you can point me to any resources that might touch on a the relative subject, that would also be appreciated.

My goal here is to provide the best user experience I can, as our clients often spend a significant portion of their day filling out tax returns.

Tags: