Amy Lin
Omnibar home copy.png

Groove Flow

 

Groove FLOW

WORK
UI/UX Design

DATE
Aug 2017- Nov 2017

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 gives them productivity tools actionable analytics on their performance. Learn more about Groove here.

Groove Flow is a feature that enables sales reps to build multi-step campaigns for emailing, calling, and other tasks. It includes features such as automation, sharing, and integration with Salesforce. This project was a redesign challenge; as we added more features to Flow, the user experience became more and more confusing. Customers reported many discoverability issues for critical actions - this was a chance to improve those along with designing a more flexible interface for adding features in the future.

Team: Head of Product, software engineers

Sketch   |     INVISION   |   wireframing   |   UI/UX

 
 
 

ANALYSIS OF OLD DESIGN

Groove was seeing a plethora of feature requests and complaints rolling in through customers to improve the sidebar. Themes began to surface as we analyzed the pain points of the old design: Categories and organization of information, hierarchy, and styling.

 
 
detractors.png
 
flow-issues.png
 
 

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?

 
 
Prototype.png
 
 

PROCESS

Ideation: Ideas were quickly mocked up in Sketch 

UX Design: With Invision prototypes, we were able to test the usability, affordances, and navigation design with current customers and internal users.

User Testing:  
Key Questions and Answers from user testing:

  1. Q: Is the Icon tab structure intuitive and easy to understand?
    A: Yes, we do not need labels for the tabs.
  2. Q: What should be the behavior of the activity history when a user clicks to expand an email thread?
    A: It should expand within the sidebar instead of as a popup so it doesn't cover anything else on the screen.
  3. Q: Is the "More Records" button discoverable?
    A: Not really, but this can be aided with user education and transition animations.

UI Design: Hi-fidelity mocks were passed onto engineering with improvements based on feedback from research.

 
 
omnibar-sketch.png
 
interactions.gif

REDESIGN 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.

I built a Principle prototype in order to communicate the transition styles to engineers.

Omnibar Gmail Record copy.png
 
 

FINAL DESIGN

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.

 
 
Omnibar-set.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 a friendly guidance within Omnibar.

 
 
Artboard.png