A systems project creating a quick and consistent editing experience
The product
The MVP of Poggio was looking to improve on its early traction
Poggio had begun to see an influx of users, but struggled with conversion and product usage
CRMs are built on top of data. Without a sufficient amount of data commits, the value of automations, reporting, and insights diminishes.
Inaccurate data can quickly lead to distrust in a product, which is extremely hard to re-earn.
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.
Product + Design 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
Committing accurate customer data is essential in a CRM, to increase trust of the underlying platform
(+) Guardrail against accidental commits. A save button protects data integrity by reducing accidental edits.
(–) Space intensive. Labeled CTAs must be included with every piece of editable data.
(+) Quicker editing. A save button is an added guardrail that slows down the editing experience.
(–) No guardrail against accidental commits. Without a save button, it increases the likelihood that users make accidental edits to important data.
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
Success metrics
The reusable editing experience contributed an increase product velocity
Due to the quicker editing workflows, Poggio immediately saw more data commits from all users.