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.
My Role
Staff Product Designer
Teammates
Designer, PM, Front End Developer
Challenges
Small design team
Limited design library
Limited front end development resources
Small customer pool
Methods
Ideation
Figma Prototyping
Advanced Variables
The problem and how it was solved.
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.
Proposed
After conducting an extensive audit of similar interface patterns (dynamic order forms, financial portfolio management, 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 +/- 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.