Catalog.ai

Overview

Microsoft sellers have access to a catalog of solutions to sell to customers. There are thousands of solutions consisting of a mix of previously successful pitch decks, technical materials, product demos, proposals, case studies, and more.

Navigating this vast array of resources is time-consuming, creating inefficiencies in preparing materials for stakeholder presentations.

‍

‍

‍

The Challenge

Sellers face several challenges:

• Scattered tools: Sellers use multiple platforms, making it hard to collect the right information quickly.
• Manual processes: Preparing materials for customers requires manually pulling together resources, which wastes time and reduces productivity.
• Inconsistent workflows: The lack of unified processes across tools leads to slow customer decisions and missed sales opportunities.
• Adoption issues: Sellers struggle to adopt new tools that don’t integrate seamlessly into their existing workflows, which affects consistency in sales efforts.

‍

Microsoft Sellers often work in a variety of applications on a day to day basis, so the copilot should exist across these applications for the MVP deliverable.

‍

Goal

Our goal was to put Microsoft sellers back in control of their engagements by empowering them to:

• Quickly find relevant solutions across platforms
• Orchestrate teams effectively with unified workflows
• Make faster, informed decisions using data-driven insights from the AI copilot

These goals were aligned with our company’s OKRs, focusing on increasing seller productivity, improving cross-team collaboration, and driving customer satisfaction.

‍

By positioning sellers as orchestrators of seamless customer experiences, we aimed to not only drive efficiency but also deliver customer value with ethical AI considerations in mind.

‍

For the MVP, we narrowed our focus to one key persona: the specialist seller, despite having multiple seller personas.

‍

‍

“As a seller, time is money. We need tools that not only save us time but offer consistency across platforms, so we can focus on closing deals faster.”

‍

‍

‍

‍

Solution

We developed an AI Copilot Plugin, designed as a seamless assistant integrated into the seller’s daily applications. The plugin provides:

• Actionable insights and next-best actions based on customer engagement
• Natural language processing to help sellers generate content and solutions faster
• Cross-platform functionality to ensure sellers work fluidly between tools

This solution enables sellers to meet their customers where they are, while also maximizing sales productivity.

‍

‍

‍

‍

‍

Design Approach

To build this solution, we leveraged Microsoft’s Fluent Design System and existing copilot patterns to ensure consistency across the Microsoft ecosystem. Here’s how we approached the design:

1. Design Efficiency:
   We used Microsoft’s assistive, embedded, and immersive UX patterns to create a familiar experience for sellers. For this project, we focused on the assistive (sidecar) experience, which allows sellers to access the copilot as a companion tool in their apps.
   ‍
2. Design Consistency:
   By aligning with Fluent Design and Microsoft’s existing copilot products (such as M365 Copilot and GitHub Copilot), we ensured consistency, enabling faster adoption of the new AI-driven workflows.
   ‍
3. Scalable and Flexible:
   While leveraging existing patterns, we also introduced new UX patterns such as prompt suggestions and error handling, which improved the copilot’s responsiveness to seller needs.

‍

‍

‍

‍

‍

‍

‍

Process

    ✔️   User journey mapping

    ✔️   AI design scenario-based flows

     ✔️   Low fidelity wireframes

     ✔️   High fidelity wireframes

     ✔️   Net new UX patterns

     ✔️   User testing & next steps

‍

User journey mapping

We created varied user journeys to answer the question: 

“What is our users’ current journey to completion?”

‍

Meeting our users where they are is key. Mapping out the user flow answers those key questions.

‍

‍

‍

AI design scenario-based flows

My team and I further narrowed it down to 3 core scenarios based on the core user behaviors, the user endpoints, and the typical day to day journey for a specialist seller.

‍

‍

‍

‍

‍

‍

I initially created 12 flows, and eventually narrowed it down to 7 flows total based on stakeholder feedback and combining/consolidating flows in general.

‍

Consolidated scenario-based flows

‍

‍

‍

‍

Based on the 3 consolidated scenario-based flows, user interviews and research done from the M365 Copilot Customer Success User research team, these there the top 3 one-liner concepts.

‍

‍

‍

Low fidelity wireframes

These wireframes outline how the copilot will appear as a side panel or “sidecar,” providing contextual assistance without disrupting the main workflow.

‍

‍

‍

Key components such as prompt input fields, response areas, and action buttons are displayed in a simplified format, focusing on core functionality like real-time suggestions, task automation, and navigation across tools. These wireframes emphasize user interaction paths and key features while leaving out detailed visuals or styling.

‍

‍

‍

High fidelity wireframes + prototype

Finally, it was time to design some prompt flows. Here’s a link to the figma prototype.

‍

‍

User Testing & Feedback Integration

User testing played a pivotal role in refining the copilot’s design and functionality. Here’s how testing shaped the solution:

• Prototype Testing - We tested the high-fidelity prototypes with sellers, focusing on their day-to-day tasks. Users highlighted that while the copilot improved data gathering speed, they needed more tailored suggestions to better align with customer types.
  ‍
• Key User Feedback - Sellers wanted prompt suggestions that were more contextual and personalized to specific sales situations. They also pointed out the need for reliable error handling when the AI couldn’t resolve complex queries.
  ‍
• Refinements- Based on feedback, we enhanced the copilot’s ability to generate more accurate prompt suggestions and built more robust error-handling responses, allowing sellers to resolve complex tasks more effectively. Post-iteration, productivity increased by 30%, and user satisfaction improved significantly.

‍

‍

Net new UX Patterns

• Prompt suggestions
• Handling errors
• Input selection
• In-chat reference cards

‍

‍

Prompt suggestions

Suggested prompts provide shortcuts as well as education for Copilot capabilities. Suggestions are contextual to the current conversation.

‍

‍

‍

Guidance to accompany every feature

‍

‍

Error handling

Error handling responses solves for the cases in which the AI could not give an adequate response to the user, especially when it comes to complex queries.

‍

‍

‍

Here’s another example of error handling with alternative content recommendations

‍

‍

‍

Input selection

‍

‍

In-chat Reference Cards

In the references of the sidecar, we wanted to reuse the existing UI of the catalog cards we have on the Catalog website (this reference will also link to that site). The cards are color coded based on the asset type.

‍

‍

Here’s an example of a solution card collapsed and expanded.

‍

‍

Reference Links with icons

‍

‍

‍

Loading States

‍

Layout UX - Content, AI notice, and references

‍

‍

‍

‍

Handoff and documentation

For net new patterns, I created documentation with examples for other designers, engineers, and PMs with the goals of:

‍

1. Provide generic input parameters. Keep the user in control with generic aspects of the generative process (e.g. the number of outputs and the random seed used to produce those outputs).

‍

‍

2. Build and maintain trust with users. Especially forming new mental models around appropriate trust with LLMs.

‍

‍

3. Help the user craft effective outcome specifications. Assist the user in prompting effectively to produce outputs that fit their needs.

‍

‍

‍

‍

Extending the Experience

In 2025, I extended this work with a dedicated results page for one of the copilot’s most common requests: finding the right delivery option for a customer opportunity. Sellers input an opportunity ID and receive AI-generated recommendations organized into three sections:

1. Qualifying Entitlements – No-cost offerings customers are eligible for.
2. For-Fee Delivery Options – Paid services with transparent pricing, delivery time, and adoption metrics.
3. Recommended Partners – Vetted delivery partners, filterable by region and specialization.

The design emphasized clarity, actionability, and trust, with consistent card layouts, clear CTAs, and metadata for easy comparison — extending the same design language established in the copilot’s reference cards into a dedicated, higher-density results view.

Sellers value credibility signals (number sold, delivery time, cost tiers) when making a recommendation, and grouping results by type and intent reduces cognitive load. As with the copilot itself, AI-generated results still needed human-readable context to build trust.

Results

• Reduced time to identify delivery options from 10+ minutes to under 2 minutes.
• Increased seller adoption through more intuitive navigation and consolidated information.
• Created a scalable card framework that supports additional recommendation types going forward.

‍

Final thoughts

Generative AI design concepts are evolving and changing everyday. Overall, the process of introducing new patterns to the existing copilot ecosystem was a collaborative effort that required extensive research, experimentation, and testing.

‍

The end result was a cohesive experience, with a mix of of existing Microsoft copilot patterns, plus our unique patterns for our users.

‍

This gave flexibility to our designs, contributes to the overall Microsoft design language, while maintaining the overall cohesiveness of our existing system.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍