Rock Gomes

Interactive Panels

Pipedrive · 2022 · integration platform

App panels show data from third-party apps inside Pipedrive. Before this project, users could only read the data. To act on it, they had to leave the panel. I redesigned the panels to put actions next to the data, with patterns every Marketplace partner can use.

role
Senior Product Designer. Interaction patterns, prototypes and design details during the build. Worked with product managers, engineers and other designers.
context
Pipedrive Marketplace. For end users of integrations, and for the partners who build them.
made
Interaction patterns for object, field and global actions, animated prototypes, design support during the build.
tools
Figma

Pipedrive docs for app panels

problem

Panels were read-only, and actions were hard to find or hidden. Only around 30 percent of users found the actions before release.

decision

Put actions next to the data, on three levels: actions for an object in its header, actions for a field next to it, and global actions under one main button.

result

Action discovery went from around 30 percent to around 50 percent in the first month. Integrations that used the new patterns saw action usage above 68 percent.

A panel after, with numbered parts: an Actions menu on each object, edit and open buttons next to fields, and an Add an order button with a dropdown at the bottom.
An app panel before and after. Before, all actions hid in one menu. After, the new parts (in green) put actions next to the data.

Two decisions I would defend

actions where users already look

decision 1 of 2

Actions sit next to the data they change

Users look at the data, so I put the actions there too. Each object has an Actions menu in its header. Each field has its own edit or open button. Each panel has one main action at the bottom. Now users can finish simple tasks without leaving the panel.

  • object actions
  • field actions
  • global actions
The animated Figma prototype: object, field and global actions in one panel.

decision 2 of 2

Show the main action and put the rest in a dropdown

Each panel has one main button. More actions are in its dropdown. When a panel has many objects, the extra objects are collapsed, but users still see their status and Actions menu. This keeps the panel short, and users can still reach every action.

  • progressive disclosure
The bottom of the new panel: two collapsed objects with status labels and Actions menus, the Add an order button with a dropdown, and the feedback bar. Numbers 10 to 13 explain the parts.
Collapsed objects keep their status and actions (10). One main action, more in the dropdown (11, 12).

How I got there

the process, short

research

Find out why actions were missed

We looked at how users used panels, which actions they expected, how easy the current actions were to find, and the limits of Marketplace apps and schemas. Only around 30 percent of users found the actions. This showed that the actions needed to be closer to the data.

  • usage data
  • expected actions
  • schema limits

patterns

Patterns that work for any app

Partners build many different apps. So I designed reusable patterns that work for any panel, app and type of data.

  • action close to data
  • progressive disclosure
  • consistency across apps
  • scalability
A wide Figma board titled brainstorming exercise: many panel variants side by side, some collapsed, some in a modal.
The brainstorming board: many panel variants, made before we chose the patterns.

prototype and build

Animated prototypes, then design support during the build

Many changes were small, so I made animated prototypes in Figma to show how they work. With the prototypes, design, product and engineering agreed on how things work, and we found unusual cases early. During the build, I changed details so they fit the app schema and the existing Pipedrive UI.

What changed

the outcome, and what I learned

outcome

  • Action discovery: from around 30 percent to around 50 percent in the first month
  • Integrations with the new patterns: action usage above 68 percent
  • Users now use app panels to act on data, as well as to read it

what I learned

  • Many of the changes were small. A still screen could not show how they work, so I used animated prototypes to explain them.
  • Partners build very different apps. Each pattern had to work for any app and any type of data, so I tried it on many panel variants first.
  • Next steps: patterns for more complex integrations, and clearer guidelines for partners.

next case study