Projects - Form Patterns

Forms - 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.

Research Cont.

To address these issues, I found comparable forms from different sources to see how it worked on for other sites. Below are sources that I used to justify the changes I made to the form pattern. https://www.nngroup.com/articles/web-form-design/ https://blog.hubspot.com/marketing/form-design https://www.lukew.com/ff/entry.asp?571 https://www.nngroup.com/articles/errors-forms-design-guidelines/ https://www.nngroup.com/articles/closeness-of-actions-and-objects-gui/

Early Exploration

I made multiple iterations of what I thought might be interesting to look at, based on what other companies were doing for their forms. I took a lot of inspiration from ecommerce forms, thinking about what helps guide a user to finish a form instead of leaving a form incomplete.

Guidance

Based on the information I had gathered, these are the guidance I created. You can view the full file and guidance on my Figma portfolio.