Compliance forms

We needed a scalable system that enabled non-developers to quickly create compliance forms while maintaining a simple, intuitive, and consistent user experience. Our solution was to develop an engine capable of rendering forms based on governing body specifications.

My role

A visual designer and I collaborated to create a scalable generic form structure adaptable to a variety of complex forms. We conducted research to understand each form's requirements and assess whether our existing design system, Feelix, could support them.

The approach

Early on, we opted to build, test, and learn directly in the product rather than simulate the form-filling experience through prototyping. This approach was low risk, as any new components needed would be simple and easily adjustable.

Discovery

We began by reviewing 10 compliance forms of varying complexity. The inconsistencies across the forms led us to discard existing layouts and strip the content to its essentials, grouping common content types for a more unified approach.

Screen Shot 2019-09-28 at 12.51.20 pm.png

Screen Shot 2019-09-28 at 1.18.42 pm.png

Finding patterns

We identified 8 new components to build from the grouped content and, with input from an industry expert, established a consistant structure and prioritised each component. We then validated by reviewing additional forms to ensure the design scaled across the wider range of form types.

Designing new components

How might we:

Effectively display related data in a way that minimises vertical space while maintaining clear visual relationships between fields, ensuring the forms remain easy to navigate and understand?

Solution: Field Sets

Field sets let users input multiple rows of grouped data, easily adding new rows or dismissing content if mistakes were made or data was unnecessary.

Screen Shot 2019-10-19 at 1.09.59 pm.png

How might we:

How might we design a component that maintains the relationship between value fields and their associated ATO codes, minimises space usage, and integrates seamlessly within a field set?

Solution: Split control

A split control component that enables users to input a value and select an associated code from a predefined dropdown, all within a single, cohesive interface.

Testing

As part of our strategy, we conducted in-product testing during a “LABS” day. We invited clients to perform various tasks across the product, using dummy data. This hands-on session allowed us to observe the form-filling experience in real-time.

Users were primarily focused on validating the data sets and rarely encountered issues with the interface. While multiple insights emerged, the two key takeaways were:

Insight 1: Navigation

“I want the ability to jump between sections of the CTR form like in the desktop.”

The form's lack of navigation made it difficult for users to manage lengthy sections. This led us to explore adding in-form navigation and keyboard shortcuts for easier section access.

Insight 2: Data density

Accountants wanted more data visible on-screen, prompting us to reduce our vertical grid from 12px to 8px, significantly increasing data display.

The Design

By developing a scalable engine and generic form design, we solved the problem and created consistent, complex tax forms. The team also built a script to enable the engine to render forms from governing body configuration files, allowing complex forms to be created in a day.