Amy Lin
tile-image.jpg

Groove Omnibar

 

Groove Omnibar

WORK
Product Design

DATE
Jan 2018

Groove is a sales engagement software that drives efficiency at every stage of the sales process so that sales reps can spend more time selling. Groove provides productivity tools as well as actionable analytics on performance. Learn more about Groove here.

A Groove feature called the Omnibar is a sidebar in Gmail that unifies information from several sources about a rep’s contacts so they can better personalize their outreach. Hovering over or opening an email automatically brings in new contextual information about the contact into Omnibar. The Omnibar brings in custom Salesforce fields, activity history, Groove Flow and LinkedIn Profiles. The Omnibar got it’s name from it’s ability to be anywhere a rep needs - it can pop-out of Gmail and live in it’s own window while still relating to the webpage that is active on the screen.


Team: Head of Product, software engineers

Sketch      PRINCIPLE       INVISION       wireframing        UI/UX

 
Omnibar Gmail Record copy.png
 
 

WHY OMNIBAR?

The Groove Sidebar was a sticky feature for customers, they relied on it because it saved them loads of time searching for the right information in cluttered browser tabs. However, the more loyal customers were, the more they wanted out of the product.

 
 
 
 

IDENTIFYING THE PROBLEM

Groove was seeing a plethora of feature requests and complaints rolling in through customers to improve the sidebar. The old design was not flexible enough to support the addition of several new features so we took this as an opportunity to redesign the sidebar entirely. Themes began to surface as we analyzed the pain points of the old design: Navigation, hierarchy of information, and styling.

 
 
 
 

CHALLENGE

Customers rely on the Groove sidebar for their daily work routines. Through Customer Success calls and NPS Survey, we heard complaints about the unfriendly user experience and lack of necessary features.

How do we consolidate the inconsistent and disjointed experience of getting context about customers as a sales person and provide a clean interface to gather information?

 
 
 
 

MAIN TAKE-AWAYS FROM V1

Overwhelming Navigation: Incorporating expand and collapse in addition to tabs was overwhelming when we tested with users. When their job requires to them to work quickly, we want to make the information as easy to find as possible.

Too material? The sidebar can be configured to display any amount of information the customer needs. So while adding the icons on the left and stacking the label on top of the field followed Material Guidelines, the styling took up too much space and limited the amount of information on one screen.

 
 
 

 
 
 

USER TESTING

Developing a better direction after V1, I made an Invision Prototype of a new version to present to current customers and internal users. Through user testing, we were able to validate the new design in usability, intuitive affordances, and general direction of styling.

 
 
 
 

MAKING DECISIONS AND FINALIZING DESIGN

One of the main concepts that still performed poorly during user testing was navigation. To solve this, we stuck with our design but incorporated specific transition animations to enable the user to understand where they are and where they’ve come from. I built a Principle prototype in order to communicate the transition styles to engineers.

 
 
interactions.gif
omnibar-sketch.png
 
 

FINAL DESIGN IMPROVEMENTS

Tab Structure: With the space limitations, tabs were a simple solution that allowed each category of information to live in it's own space. This also created more flexibility because it dedicated the entire height of the Omnibar to each category.

Added Features: While the old sidebar only surfaced Salesforce fields, the Omnibar was designed to include that and everything else a sales person needs to personalize outreach in one place. The new features include an activity history, notes, LinkedIn Sales Navigator Integration, and a global search. These features added significant value to a user's experience day-to-day using Groove.

Consistency and Consolidation: Groove's activity history and notes already existed in separate areas in the Groove app, but one of the main goals of Omnibar was to consolidate several separate features within into one spot where the user can access them at the same time.

 
 
5tabs-omnibar.png
 
 

HIGH FIDELITY MOCKS

The final Omnibar design brought a consistent consolidation of Groove features, a clean and elegant hierarchy of information and an intuitive new structure for navigating new information.

 
 
gmail-gif.gif
 
 

MEASURING SUCCESS

Omnibar was launched in May 2018 and has yet to be surpassed as the month with our highest overall NPS score in the last year.

 
 
omnibar-nps.png
 
 

ATTENTION TO DETAIL

While the turnaround was quick for this project and sometimes details can be neglected in a start-up environment, we knew that empty states were a critical component for user education and would add a delightful experience within the product

 
 
Artboard.png
 

See a video on the full functionality of Omnibar here