Workday High Density Form
Role: Product Designer
Time: June 2020 - July 2020
Team: 2 other designers, 2 product managers, 1 engineer
The Product
Form is an user interface element that sends information to a server. Many users use forms to enter, process, and review data for their work. I helped deliver a form layout design that improves the user experiences and makes using forms more efficiently.
The Problem
Workday Design System (DS) places column labels on top of the form, which is called “top-label form layout”.
However, the professional users have been pushing back for adopting the top-label form layout at Workday. The common complains for top-label form layout are:
Extra scrolling to get to the bottom of the page
The layout increases page length, means more time spent on scanning the data
Difficult to locate specific data due to lack of information hierarchy
Goals
I like to align UX goal with users’ and business’ goal before exploring the design.
Design Explorations
After talking with different product managers from professional product areas, we identified financial users processing supplier and customer invoices as the main use case because they use forms most to do their work.
I began to explore different solutions for a more efficient and user friend form layout. I’m showing some of the examples that I explored and tested:
To help users find information they needed more quickly on forms, I created a guided experience for users to process data.
However, it didn’t significantly reduce the page length.
I got feedback that users need to see as much data as possible on one screen.
I added more more column to the existing layout as well as making the forms more compact by reducing the spaces between labels and input fields.
The feedback for this design:
Compact forms make scanning and comparing data very easy, which also allowed more data to show on one screen.
The design requires coding effort that we don’t have. It also challenges the website responsiveness.
Final deliverables
The delivered design is to place labels on the side of the input fields instead of on the top. This design allows tighter spacing to display more information, which significantly reduces page length and scrolling.
Results
The final design solution significantly improved efficiency and ease of use compared to top label form design based on task completion observation.
Comparison
Side-label compact form view significantly shortens the page length and fits more data and action comparing to the top-label compact form design.
What’s Next
The new form layout is built for professional users. User feedbacks from my design explorations revealed the need for customer configuration of displaying the order of input fields on forms. Development had taken steps to enable configurability.