Pipedrive - interactive Panels
Not your typical freelancer
Problem statement
We currently have app panels that show data from external apps. It improves the visibility of apps data, but the information on its own is static - there’s no easy or visible way to act on the individual objects (e.g., to add comments to specific linked cards) nor on the more global level (e.g., to create new cards).
This has been brought out by our Trello app user research and also requested by our 3rd party app vendors. Also the discovery of app actions from the panel is currently around 30%, which can be improved.
Objective
Allow users to perform an action on 3rd party app or on a specific piece of data straight from where it is displayed in Pipedrive.
Key Results
Usage of new actions (for apps that have implemented them) is above 68%.
Discovery of actions increases from 30% to 50% of users 1 month after release.
Not your typical freelancer
Brainstorm
Since we already had user research, one of the exercises performed was a brainstorming session with designers from other teams. The problem was presented, together with some initial ideas to generate discussion. Designers created their own versions, proposed solutions, asked questions and shared their concerns.All the feedback were then brought back to our team and discussed with PM and Engineer team, and used to adjust our scope of the project.
Refining and locking the scope
After the exercise, we took a look at our scope and refined our goals based on new questions and ideas that came up during the brainstorming session. From that, a direction was made clear and we were able to move forward with the design.
Brainstorm
Since we already had user research, one of the exercises performed was a brainstorming session with designers from other teams. The problem was presented, together with some initial ideas to generate discussion. Designers created their own versions, proposed solutions, asked questions and shared their concerns.All the feedback were then brought back to our team and discussed with PM and Engineer team, and used to adjust our scope of the project.
Refining and locking the scope
After the exercise, we took a look at our scope and refined our goals based on new questions and ideas that came up during the brainstorming session. From that, a direction was made clear and we were able to move forward with the design.
Not your typical freelancer
Requirements
2 new action types are added:
- To invoke actions on individual object fields
- To invoke actions on individual objects
Existing app action buttons are made visible on the panel itself
Updates to Marketplace Manager and app actions JSON schemas to make adding those buttons possible
The solution
Object action buttons were placed in the object title row and Field actions also placed in the fields’ row. Statuses labels were set to be visible when object is collapsed. Added a main button with dropdown menu to allow for multiple global actions.
Animation
Requirements
2 new action types are added:
- To invoke actions on individual object fields
- To invoke actions on individual objects
Existing app action buttons are made visible on the panel itself
Updates to Marketplace Manager and app actions JSON schemas to make adding those buttons possible
The solution
Object action buttons were placed in the object title row and Field actions also placed in the fields’ row. Statuses labels were set to be visible when object is collapsed. Added a main button with dropdown menu to allow for multiple global actions.
Animation