Jacob Rush
Design, Product
San Francisco, California

Designing an editing experience

A systems project creating a quick and consistent editing experience

Problem

Inefficient editing experience

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

Design a system-wide editing experience

Quickly and contextually edit individual data points

Users edit a lot of data in Poggio. Ensuring speed while maintaining  context will enhance the user experience drastically.

Editing is a high priority action

Editing is a primary workflow within Poggio. Data gets edited daily. Making sure editing is discoverable will reinforce this workflow.

Design flexible, scalable editing components and workflows

Editing is a core action. Reusable, scalable components will increase consistency and reduce future engineering effort.

Design Challenge

What component is the best for editing?

To design a consistent experience, it was necessary to audit what component would best support an editing experience in all workflows

Popover Menu

Popover / From Table

Popover / From Header

Popover / From Header

Modal

Modal / From Table

Modal / From Header

Modal / From Card

Dropdown Menu

Dropdown / From Table

Dropdown / From Header

Dropdown / From Card

Weighing flexibility, scalability and speed

Popover Menu

(+) 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.

Modal

(+) 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.

Dropdown Menu

(–) 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

Popover Menus

Popover menus offered the most well rounded solution to the project goals. They offered cross application flexibility, while supporting a quick, contextual editing experience.

Design Challenge

How should edits be triggered?

To design a consistent experience, it was necessary to audit what component would best support an editing experience in all workflows

Labeled CTAs

(+) 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.

Clicking in line

(–) 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

Labeled CTAs

Labeled CTAs closely aligned with the project goals of creating a scalable, highly prominent editing experience.

Closing the Project

A reusable, scalable, targeted editing experience