BuyerAssist Relationship-Map

Challenges

1. Lack of a Design System: Inconsistencies in UI components, typography, and color usage led to a fragmented experience.
2. Limited Interactions: Users struggled to map relationships effectively due to static and rigid interface elements.
3. Inefficient Search Functionality: Finding stakeholders within large organizations was cumbersome.
4. Absence of a Help Section: Users lacked guidance on how to use the Relationship Map effectively.

Goals

1. Establish Consistency – Create a single source of truth for design and development to ensure a uniform look and feel across all products.
2. Improve Efficiency – Reduce design and development time by standardizing reusable components and patterns.
3. Enhance Collaboration – Bridge the gap between designers and developers with a shared system that promotes seamless communication.
4. Scalability & Flexibility – Ensure the system adapts to future product needs without causing rework or inconsistencies.
5. Accessibility & Usability – Implement best practices to make the product more inclusive and user-friendly.
6. Increase Engagement - Working on necessary feature that are collaboratively brainstormed, design and implemented with current users and stakeholders to boost engagement and experience to meet the end goals.

‍

Step 1: Research (Understanding User Needs & Business Goals)

1.1 User Research

• Conducted user interviews on with sales professionals to understand how they use the Relationship Map.
• Collected pain points from existing users, including:
  • Confusing interface with inconsistent UI elements.
  • Limited interactions restricting flexibility in mapping relationships.
  • Inefficient search functionality making stakeholder identification difficult.
  • Lack of help documentation, leaving new users lost.

1.2 Competitive Analysis

• Analyzed competitor tools (e.g., LinkedIn Sales Navigator, Gong.io, and Salesforce).
• Identified best practices in interactive mapping, AI-powered search, and onboarding experiences.

1.3 Business Objectives & Constraints

• Business goal: Improve sales pipeline efficiency by enhancing usability and engagement.
• Design constraint: Must align with BuyerAssist’s existing design system and integrate seamlessly into the product.

Step 2: Analysis (Defining Problems & Goals)

2.1 Defining the Key Problems

After analyzing research findings, the following key challenges emerged:

• Lack of a Consistent Design System → Resulting in visual inconsistencies and usability issues.
• Limited User Interactions → Users couldn’t easily edit relationships, drag-and-drop elements, or highlight key stakeholders.
• Poor Search & Filtering → Finding relevant stakeholders required manual effort, slowing down workflow.
• No Help Section or Guidance → New users struggled to understand how to use the tool effectively.

2.2 Setting UX & Business Goals

ObjectiveUX SolutionEstablish UI ConsistencyDevelop a Design System for BuyerAssist.Improve User InteractionsIntroduce drag-and-drop features and intuitive gestures.Enhance Search & FilteringImplement AI-powered search with dynamic filters.Provide Help & OnboardingAdd interactive tooltips, FAQs, and a self-serve Help section.

Step 3: Ideation (Brainstorming & Concept Development)

3.1 Wireframing Concepts

• Created low-fidelity wireframes for different layout approaches.
• Explored card-based vs. list-based UI for stakeholder visualization.
• Sketched interactive relationship lines & grouping mechanics.

3.2 Feature Prioritization (MoSCoW Method)

• Must-have: Design system, AI-powered search, interactive mapping.
• Should-have: Drag-and-drop functionality, improved help section.
• Could-have: Role-based access control, stakeholder tagging.

3.3 UX Storyboarding

• Mapped user journey scenarios to validate concept viability.
• Example:
  • A salesperson wants to identify key decision-makers in a deal.
  • The AI-powered search highlights relevant stakeholders based on past interactions.
  • They drag-and-drop executives into a priority list.
  • They annotate key insights directly on the map.

Step 4: Prototyping (Building & Refining)

4.1 High-Fidelity UI Design

• Developed a design system:
  • Defined typography, spacing, grid, and color palette.
  • Standardized components like buttons, cards, modals, and data visualization elements.
• Created Figma-based interactive prototypes.

4.2 Interaction Design Enhancements

• Drag-and-Drop Support: Users can rearrange stakeholders dynamically.
• Interactive Tooltips & Annotations: Users can add insights about a contact.
• AI-Powered Search & Smart Filters: Predictive search with role-based filtering.

4.3 Designing the Help Section

• Created an onboarding flow with tooltips.
• Designed a self-serve Help section with FAQs, videos, and contextual prompts.

Step 5: Implementation (Building & Collaborating with Developers)

5.1 Handoff to Development

• Used Figma’s Dev Mode to generate specs, tokens, and component breakdowns.
• Collaborated with engineers to ensure pixel-perfect implementation.
• Worked with the product team to define success metrics (e.g., reduced time spent searching for stakeholders).

5.2 Agile Development & Iteration

• Developers implemented features in sprints, with weekly UX reviews.
• Used design QA testing to fix inconsistencies and improve accessibility.

Step 6: Testing & Launch (Refining & Deploying)

6.1 Usability Testing & Feedback Loops

• Conducted A/B testing on search and filtering enhancements.
• Gathered qualitative feedback via user interviews with sales teams.
• Identified small UX pain points (e.g., hover tooltips disappearing too quickly) and iterated accordingly.

6.2 Beta Release & Performance Tracking

• Launched the new Relationship Map to a small user group first.
• Used heatmaps and session recordings to analyze user behavior.
• Tracked KPIs:
  • Decrease in search time for stakeholders.
  • Increase in successful stakeholder mapping sessions.

6.3 Full Rollout & Future Roadmap

• Based on initial adoption metrics, refined UI components for better discoverability.
• Rolled out the new UX to all users.
• Planned next steps:
  • Integrate AI-driven insights for stakeholder prioritization.
  • Add team collaboration features for multi-user editing.

‍

Visuals

Establishing a Robust Design System

• Standardized UI components, typography, and color schemes for a unified experience.
• Introduced reusable design patterns for scalability and consistency.

Creating a Contextual Help Section and new feature intro pop-up

• Embedded onboarding tooltips and micro-interactions for first-time users.
• Designed a self-serve help section with FAQs, tutorials, and guided walkthroughs.

Enhancing Interactions & Usability

• Implemented hover and click interactions to reveal additional stakeholder insights and select multiple roles in sales process.

‍
‍

• Introduced drag-and-drop capabilities for effortless relationship mapping.

‍

‍

• Added importing auto-arranged relationship map import for time saving and hassle-free relationship mapping.

‍

• Moving contact cards that are connected to each other by simply selecting as group and dragging to a more important location for clearer visualization.

Advanced Search & Filtering

• Designed an AI-powered search to find stakeholders by name, role, or engagement level.
• Integrated multi-layer filtering for precise stakeholder segmentation

‍

• Mini-map helped to navigate and search for stakeholder in relationship-map

‍

• Added Text Insert Function helps adding titles and notes anywhere in the Relationship Map canvas.

New Vision For BuyerAssist 2.0 Unlocked

BuyerAssist's AI is evolving to enhance buyer engagement with intelligent automation and deep relationship insights. By refining the Relationship Map and adding predictive analytics, personalized deal recommendations, and automated engagement, it empowers sales teams to navigate complex buying groups more effectively and close deals faster.
‍

Warm Referral Product Idea

‍

Next-gen BuyerAssist 2.0 Vision

Enhanced Usability & Navigation:

• Simplified interactions, making it easier for sales teams to visualize and manage stakeholder relationships.
• Improved search functionality enables faster access to key contacts and insights.

Consistent & Scalable Design System:

• Standardized UI components ensure a cohesive look and feel across the platform.
• Increased design efficiency, reducing inconsistencies and accelerating future feature development.

Refined Interaction Design for Better Engagement

• Optimized drag-and-drop functionality for effortless relationship mapping.
• Smooth micro-interactions (hover effects, animations) enhance clarity and feedback

Improved Help & Onboarding Experience

• Integrated in-app guidance, tooltips, interaction+motion design guide and progressive disclosure for a smoother learning curve.
• Reduced support queries by providing clear explanations within the interface.

Boosted User Engagement & Adoption

• Positive user feedback on the intuitive interface and streamlined workflows.
• Increased adoption by sales teams due to reduced friction in using the tool.