Groove Sidebar Design

All the data without the space.

Groove gives you all your important Salesforce data and features right inside of Gmail. You can quickly see your relationship with any person or company, send email templates, or see who is opening your emails. The problem was that there is so much information stored on Salesforce that gets displayed inline with the messages in Gmail, that following conversation threads became a pain.

The solution was to develop a sidebar version that supplied all the same functionality in a design ready for Google's new Material Design that was recently announced at I/O 2014.


DESIGN PROCESS

The team had ideas for how to recompose the data into the new sidebar format. A sketch and wire frame of the idea was shared to highlight some key ideas. This was a critical step in asking hard questions about which information was most important to show and how to layer that information intelligently without sacrificing value.

 

This process required tight and highly frequent feedback loops to work through this problem in parallel. While designs were being worked on, the lead developer began scaffolding the popover UI and populating it with Salesforce data.

Prototype.png

Applying the principles of Google's Material Design throughout the development of the interaction and visual design system.

 

The final design brought together attributes of Material Design, Salesforce data and Groove's brand into a new package that eliminated the original problem of too much data between every message in a thread. Customers found the design better suited for their needs and believe is a better reflection of Groove's position as a leader in the sales CRM space.

 

Final Design


Groove Sidebar in Gmail

DESIGN SPEC

 Specification of UI elements and interactions.

Specification of UI elements and interactions.

 Empty states to help customers understand when data is or is not present.

Empty states to help customers understand when data is or is not present.

 Drilling down layers of detail extracted from Salesforce.

Drilling down layers of detail extracted from Salesforce.

For more information, please visit Groove and install the Chrome Extension. Special thanks to my collaborators, Chris Rothstein and Austin Wang.