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.

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.

Subskribe’s order form before

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.