Enhancing sales enablement with Headsup Display feature

🗓️ duration
Ongoing from late 2022 to present
🔮️ tools
Figma, Whimsical, Chrome Extension
User Research, Interaction Design, Prototyping, Usability Testing, Cross-Functional Collaboration
the brief
In its simplest form, HeadsUp revolutionizes sales strategies by utilizing AI-driven data analysis to identify essential signals for upsell, expansion, and churn. With its unique scoring system, users can optimize sales workflows by automating targeted prospecting, fostering more efficient conversions and precise sales efforts.
As a seller, the challenges of managing daily sales tasks and engagements while avoiding constant tool-switching and maximizing time and effort utilization are prevalent. Additionally, interpreting intricate product usage data to make informed decisions and create effective engagement strategies for successful interactions can be a challenging task. These concerns highlight the need for a streamlined solution that seamlessly integrates into sellers' workflows, simplifying their tasks and enhancing their capabilities.
My task was to design a solution that would bridge the gap between the powerful insights provided by HeadsUp and the daily operations of sellers. The goal was to ensure that sellers could efficiently access and leverage the valuable information from HeadsUp without disrupting their existing workflow.

Check out my process below ⬇️

While HeadsUp caters to three distinct target personas, this case study and feature specifically delve into the needs and solutions of the seller persona.

Click on the persona to view in full.

In exploring solutions to address the challenges faced by sellers, we embarked on a comprehensive research journey that encompassed user interviews, behavior analysis, and an examination of the existing tools and workflows commonly employed by sellers.
During user interviews, we engaged with sellers to grasp their pain points, needs, and preferences. These conversations shed light on the challenges they encounter while navigating sales tasks and interactions. Analyzing user behaviors provided us with a deep understanding of how sellers currently interact with data and tools. Observing their day-to-day workflow helped identify inefficiencies and areas for improvement.
Furthermore, examining existing tools and processes used by sellers allowed me to identify the gaps and limitations they faced. This holistic assessment was crucial in shaping the scope of potential solutions. It also enabled me to consider multiple avenues of interface types to ensure a well-rounded exploration of possibilities.

A Peek Behind the Scenes:  This snapshot provides a glimpse into our extensive research and analysis process.

During the research phase, I proactively identified foundational design principles that I believe will significantly impact the direction of the project. These guiding principles were developed in alignment with crucial UX fundamentals, including the need for intuitive information presentation and streamlined workflows.
defining the problem
Here's a simplified narrative that captures the essence of the core problem and how we effectively communicated it to our engineering team:
Imagine a scenario where sellers are engrossed in their daily tasks. Suddenly, a ping on Slack grabs their attention – it's a notification from HeadsUp, indicating that it's time to connect with potential leads. These leads have been carefully identified using HeadsUp's AI scoring and segmentation -  a feature skillfully set up and utilized by our admin users, the sales managers and rev ops personas. Now, here's the catch – sellers need to effortlessly access the most relevant HeadsUp insights for each individual lead right within their workflow. This integration needs to be seamless, allowing them to make informed decisions and engage effectively.
As a seller,
  1. How can I efficiently manage my daily sales tasks and engagements, eliminating the need for constant tool-switching and optimizing time and effort utilization?
  2. How can I effectively interpret product usage data to simplify my decision-making process and optimize my engagement strategies, leading to more successful interactions?
At HeadsUp, being the sole designer in a fully remote startup, my discovery process reflects our agile and collaborative environment. To kickstart the process, I gather inspiration and craft wireframes that explore various ideas, concepts, and solutions. These wireframes then become the foundation for sharing and feedback sessions with the product manager and stakeholders.
These collaborative sessions play a pivotal role in context building and alignment. By sharing our visions early on, we ensure everyone is on the same page. This not only facilitates a more meaningful feedback loop but also fosters a sense of shared ownership over the design direction.
Throughout this iterative journey, user testing also played a significant role. When hypotheses needed validation or certain product decisions required data-backed insights, we conducted user testing. This iterative approach helped us refine our ideas and solutions based on real user feedback.
Working within a globally distributed team spanning different time zones highlighted the importance of efficient communication. I leveraged tools like Loom to record video updates to efficiently communicate progress and clarify concepts to the rest of the team.
As an early-stage startup, we are mindful of resource limitations and the need for agility. To navigate these challenges, we have adapted our discovery process to suit our dynamic and fast-paced environment, ensuring its effectiveness. We derived 3 key decisions and principles to guide our final design direction:
  • A browser extension was found to be the best choice, as users were able to access the feature while simultaneously engaging with other tasks or tools.
  • Designed to resonate with various types of sellers and sales teams.
  • Enjoyable and empowering experience for our users.
visual designs & solution
Introducing "HeadsUp Display" – a nod to the aviation HUD. Just as pilots stay informed without looking away from the sky, our feature keeps users in the loop without disrupting their workflow. It's all about delivering key insights while they're heads-up and hands-on, making tasks smoother and decisions smarter.
Seamless Tool Integration
This solution eliminated the need for toggling between various applications, providing users with quick access to essential functions. Sellers can effortlessly add leads to an outreach sequence or update a Salesforce task, all without disrupting their workflow.
Usage Activity Timeline
When we initially introduced the usage activity timeline, it followed a chronological order. However, after our users had a chance to experience the chrome extension, their feedback prompted us to rethink the timeline's approach. Grouping similar events together emerged as a more insightful view for our users.As a result, we introduced an alternative view option that allows users to quickly identify the most commonly performed usage events.
Data Visualization
Responding to PoC's feedback, we decided to enhance the way data is visualized. Users expressed their need to grasp value changes over time and spot trends easily. Addressing this, the inclusion of charts not only enhanced the visual appeal but also offered context and narrative, enriching the understanding of data.
Enhanced Data Relationships
Users can seamlessly delve into broader contexts by accessing associated records like active users, power users, and related objects within the account, such as organizations and workspaces. This expanded view enables users to effortlessly navigate through various data points, allowing them to filter, sort, and access relevant records.
Designing within Space Constraints
One of the primary challenges encountered during the design of the Headsup Display feature was the limited space available. The extension needed to efficiently convey a significant amount of data and insights while ensuring that users could easily comprehend and navigate through the content.
Adding complexity to this challenge was the need to work with a single version of the extension due to time and resource constraints. Unlike having the flexibility to develop separate expanded and regular-sized versions, we needed to creatively manage the available space to offer users access to critical information without overwhelming them.
APPROACH & strategies


Visual Hierarchy

Employing a clear visual hierarchy, I structured the content to emphasize critical information without overwhelming users. By categorizing data and using distinct visual cues, I facilitated quick recognition of essential insights.


Interactive Elements

Incorporating interactive elements such as expandable sections and tooltips, I allowed users to access additional details when desired, without crowding the main interface.


Flexible Content Presentation

Understanding that different customers may prioritize different metrics,  I designed the extension to enable rev ops users (admin users) to tailor the displayed information according to their workflow. This empowers users to prioritize relevant insights while maintaining a clear and cohesive view.  By providing this level of customization, my goal was to optimize the extension's usefulness and address a wider range of user needs.


Iterative Design

My design process involved multiple iterations and feedback loops. I collaborated closely with the team to refine the interface, ensuring that each piece of information added genuine value and maintained clarity.

Playbook Feature Integration
The incorporation of our new feature playbooks presented a unique design challenge. Our approach revolved around finding an optimal placement for the "playbooks" functionality within the Side Panel and Chrome Extension. After careful consideration, we evaluated three options:

Click on any of the following to view in full.

Performance and Load Times
Incorporating a multitude of data points and interactive elements within the extension had the potential to impact performance and load times. The challenge was to ensure that users experienced smooth navigation and quick loading, even when interacting with large volumes of data.
To address this challenge, I focused on optimizing the user experience by employing several strategic design choices:
APPROACH & strategies


Efficient Data Loading

I utilized techniques such as lazy loading, including a pagination approach, and data caching, minimizing the initial load time and enhancing the overall user experience.


Skeleton Loading Screen and Progress Indicators

To enhance user experience during loading times of 2 to 10 seconds, I integrated informative progress indicators, including skeleton loading screens with progress bars. This was particularly significant for the relations tab. Placed strategically, these indicators diverted attention from loading, keeping users engaged and informed. This approach effectively improved the overall user experience, alleviating perceived wait times.

success & results
The chrome extension feature made a meaningful impact on both user engagement and the startup's success. The impressive adoption rates, increased ARR, improved user experience, and enhanced sales metrics together confirm the importance of prioritizing user-centered design and innovative solutions.
We thought, why not take our HeadsUp Display feature up a notch?  So, we decided to roll it out as a side panel in our web app's list view, specifically for our admin users.