Form UX Pattern - Design System Guidance
A sample of my work at UKG. I was assigned to help begin the creation of a new form pattern for the UKG design system. There were downfalls and failures of the previous form pattern that needed to be addressed. To fix these issues, I conducted research and created guidelines to be implemented in the new design system.User Interview/Issues to Address
I defined the user of this component to be both designers at UKG and users of the end product. To further my understanding of frustrations I conducted interviews with designers in the team as well as salesman for the UKG products who work closely with the clients. The understanding of the product from both these groups helped shape my research, written guidance and design decisions for the new pattern.
Results of UX Designer & Sales Interviews:
- How should fields be grouped?
- Differing grouping options allowed based on use cases?
- Provide logical steps between each step of the form. (ex. name, address, phone number subheadings)
- Standardized wrapping and sizing for mobile.
- Field size limits based on length of input?
- Width of input fields are not customizable. Should we have standard sizes or flexible sizes? (Use case specific)
- There is no standardized button placement for mobile.
Results of UX Designer & Sales Interviews:
- How should fields be grouped?
- Differing grouping options allowed based on use cases?
- Provide logical steps between each step of the form. (ex. name, address, phone number subheadings)
- Standardized wrapping and sizing for mobile.
- Field size limits based on length of input?
- Width of input fields are not customizable. Should we have standard sizes or flexible sizes? (Use case specific)
- There is no standardized button placement for mobile.
Progression/Rejects
Further exploration was needed to confirm my designs. I created new guidance and designs to experiment with which would work well with our current design language. Furthermore, in progressing with my designs, I realized I had solved many of the issues I set out to fix however introduced new friction that I did not feel comfortable establishing as normal. For example, the pop up window to delete a form added an unnecessary pop up. I had more exploration done to ensure that this new form guidance would solve the issues while keeping low friction.
Completed Guidance
Based on the information I had researched, I came up with this guidance. With justification of these guidances based on successful form designs from other business.
