A systems project creating a quick and consistent editing experience
Problem
The MVP of Poggio routed all edits into a drawer, listing all customer input fields
Loss of Context. Redirecting users to a separate drawer resulted in a loss of context of their current view, items, and details. Users were surprised and disoriented by this interaction.
Non-targeted editing. Editing values was only available through a long form of input fields. This increased cognitive burden, making it difficult to quickly locate and edit a singular value.
Goals
Users edit a lot of data in Poggio. Ensuring speed while maintaining context will enhance the user experience drastically.
Editing is a primary workflow within Poggio. Data gets edited daily. Making sure editing is discoverable will reinforce this workflow.
Editing is a core action. Reusable, scalable components will increase consistency and reduce future engineering effort.
Design Challenge
To design a consistent experience, it was necessary to audit what component would best support an editing experience in all workflows
Popover / From Table
Popover / From Header
Popover / From Header
Modal / From Table
Modal / From Header
Modal / From Card
Dropdown / From Table
Dropdown / From Header
Dropdown / From Card
(+) Flexible Use. Popover menus fit smoothly with many workflows and screens.
(+) Maintains context. Appears in-line, taking minimal space. Maintains context and details.
(+) Quicker Editing. Popovers appear in-line, offering a quick editing experience.
(+) Flexible Use. Works for data editing within any workflow, screen, or component.
(–) Loss of Context. Modals are focused, and can block contextual data.
(–) Slower editing. Modals remove the user from their workflow, slowing down the editing experience.
(–) Inflexible pattern. Must be paired with input fields; are suboptimal within headers and cards.
(+) Maintains context. Appears in-line, taking minimal space. Maintains context and details.
(+) Quicker editing. Dropdowns appear in-line, offering a quick editing experience.
Decision
Design Challenge
To design a consistent experience, it was necessary to audit what component would best support an editing experience in all workflows
(+) Scalable. Labeled CTAs can support several features: navigation, commenting, etc.
(+) Discoverable. Labeling CTAs increases prominence and reinforces discoverability
(–) Space intensive. Labeled CTAs must be included with every piece of editable data.
(–) Less scalable. Clicking in line doesn't support future actions like history, navigation, or commenting.
(–) Less discoverable. Editing is high priority feature. Clicking in line significantly reduces the prominence of editing
(+) Saves space. Clicking in line removes the CTA, saving space and preventing redundancy.
Decision
Closing the Project
