Summary
- Designed and developed HTML/CSS for an all-new event ticket editing flow with live preview and inventory management on ActBlue in close collaboration with an engineer
- Established a new pattern for "editing within editing" for inline form editor
- Replaced disjointed experience of bouncing between legacy form editor and new editor
Goals
- A seamless ticket editing experience within the new form editor with live preview
- Drag and drop reordering of ticket types
- Archive or hide ticket types
- Set ticket inventory for a given type
- Easier discovery of the ability to offer a post-donation question
Background & problem
The initial release of the then new live-preview inline form editor, which I also designed in collaboration with two engineers, did not include ticket editing.
As a result, the experience of editing an event required jumping back and forth in a disjointed and disorienting way from the new editing interface to the legacy interface.
This project was part of a multi-step initiative to bring legacy functionality into the inline form editor in order to reduce technical debt, and reduce friction in the ticket editing experience.
Solution
Video walkthrough
I paired closely with an engineer on this project, writing most of the HTML and CSS within the React application that drives our form editing experience.
This interaction was important to get right because it introduced the pattern of “editing within editing” for the new form editor. This was foundational to later migrating our merchandise editing experience. Small copy decisions like using the word “Done” rather than “Save” helped maintain coherence with the global “Publish” paradigm that was already in place.
Because changes were previewed live, an emphasis was placed on a lightweight interface that hinted at direct manipulation with cursor changes for drag-and-drop and icons with tooltips. While mobile users couldn't edit and preview at the same time, care was taken to make the drag-and-drop experience feel as natural as possible. Instead of using a heavyweight JavaScript library for drag-and-drop, I worked with the engineer to use the browser's built-in drag-and-drop API, resulting in less code and a better and more accessible experience on whatever device was being used.
Outcomes & reflections
Moving ticket editing into the new form editor dramatically simplified the experience of editing tickets while introducing commonly-requested features, particularly setting inventories on ticket types and being able to reorder them. Our customer service team got lots of positive feedback about the change from event form users.