Online order forms have to perform double duty; the order needs to be both readable and editable. These requirements are often at odds with each other and great care needs to be taken to optimize for both use cases. Beyond the lack of alignment, the order form design previously lacked affordances for line item details and options.
Subskribe SaaS Order Experience
Prototyping the next generation of the order form.
Enterprise software comes in every conceivable shape and size. This prototype proposed the vision for the next generation of the order form. Figma does not yet support inputting data into forms to calculate totals, so I used advanced variables with increment controls to simulate the form.
The problem and how it was solved
Proposed
After conducting an extensive audit of similar interface patterns, dynamic order forms, financial portfolio management, and travel booking, we settled on a method that used progressive disclosure that introduced edit controls on hover. As Figma does not allow form input, I’ve added plus/minus controls to simulate the change in quantities.
Impact
Recently cited as best in class usability by G2, the largest and most trusted B2B software marketplace.