Projects

About Me

Resume

Projects

About Me

Resume

Client hub AI chatbot

Client hub AI chatbot

AI Product Design

Skills
Interactive design,
Rebranding,
Design strategy,
User research

Launch Date
Spring 2024

Tools Used
Tableau, Figma, Jira

Overview

B2B users rely on Mastercard’s Client Hub to manage product integrations, monitor financial institutions (FIs), and access business-critical reports. However, users struggled with platform navigation, lacked visibility into real-time issues, and often escalated problems that could have been self-resolved.

I led the design of an AI-powered chatbot to help users discover documentation, surface real-time system insights, and resolve issues autonomously — reducing support dependency and accelerating task completion.


The problem

48%

48%

of user feedback cited difficulty

finding documentation or key features

of user feedback cited difficulty

finding documentation

or key features

of user feedback cited difficulty

finding documentation or key features

📝

📝

No proactive communication

about product/FI issuess

No proactive communication

about product/FI issuess

Repetitive questions consumed

tech support bandwidth

Repetitive questions consumed

tech support bandwidth

🧑🏻‍💻

🧑🏻‍💻

No search bar.

Users only see a small ‘Help’ link, making it hard to find what they need.

No search bar.

Users only see a small ‘Help’ link,

making it hard to find what they need.

Clicking ‘Help’ opens the Mastercard Developer Portal

in a new tab, breaking the flow

Clicking ‘Help’ opens the Mastercard Developer Portal

in a new tab, breaking the flow

Design Goal

Design a conversational interface that gives users the ability to
solve problems and find answers quickly — without needing to contact support.

Discovery

Competitive Analysis-
During the discovery phase, we conducted a competitive analysis to better understand industry standards and uncover opportunities for differentiation. Our research focused on Plaid, Stripe, and Microsoft Copilot, as each offers strong examples of streamlined data access, developer-friendly interfaces, and intelligent automation.

Chatbot often redirects users to

external links instead of showing

answers directly. This breaks the flow

and increases friction

for users looking for quick help.

Chatbot often redirects users to

external links instead of showing

answers directly. This breaks the flow

and increases friction

for users looking for quick help.

Chatbot often redirects users to

external links instead of showing

answers directly. This breaks the flow

and increases friction

for users looking for quick help.

🔗

integration focused and It’s a multi-step

process to get to human support

when there isn’t an exact answer

to my question

integration focused and It’s a multi-step

process to get to human support

when there isn’t an exact answer

to my question

💬

💬

Offers role-based chatbot experience

(e.g., Developer, Admin, PM).

Responses are more personalized and

contextual to the user’s role and task.

Offers role-based chatbot experience

(e.g., Developer, Admin, PM).

Responses are more personalized and

contextual to the user’s role and task.

Offers role-based chatbot experience

(e.g., Developer, Admin, PM).

Responses are more personalized and

contextual to the user’s role and task.

👩🏻‍🏫

Survey-
To better understand how users experience Client Hub — and where an AI assistant could help — I created and distributed a short survey to active users.

  • What do users struggle with in Client Hub?

  • Where do they go when they need help?

  • Would they find value in an AI assistant?

Survey-
To better understand how users experience Client Hub — and where an AI assistant could help — I created and distributed a short survey to active users.

  • What do users struggle with in Client Hub?

  • Where do they go when they need help?

  • Would they find value in an AI assistant?

Result-
62% of users said it’s hard to find what they need in Client Hub or Mastercard docs.

70%+ said they would use an AI assistant inside Client Hub


Top use cases:

  • Troubleshooting errors

  • Finding the right documentation

  • Answering setup/integration questions


“I don’t want to leave the platform or guess what to search for.” — Survey respondent

Result-
62% of users said it’s hard to find what they need in Client Hub or Mastercard docs.

70%+ said they would use an AI assistant inside Client Hub


Top use cases:

  • Troubleshooting errors

  • Finding the right documentation

  • Answering setup/integration questions


“I don’t want to leave the platform or guess what to search for.” — Survey respondent

Exploration

Finding the Best Interface-

Option 1: Chatbot in Bottom Corner

Option 1: Chatbot in Bottom Corner

When I first heard "Chatbot," I immediately imagined a bottom-corner interface. However, through research, I realized potential challenges:

Conflict:

  • Passive experience — users have to actively open it and know what to ask.

  • Hard to discover if users don’t know what to ask

  • Easy to build, but not ideal for goal-oriented tasks — users looking for quick, structured answers might find it inefficient.

Result-
62% of users said it’s hard to find what they need in Client Hub or Mastercard docs.

70%+ said they would use an AI assistant inside Client Hub


Top use cases:

  • Troubleshooting errors

  • Finding the right documentation

  • Answering setup/integration questions


“I don’t want to leave the platform or guess what to search for.” — Survey respondent

Option 2: Search Bar with AI Assistant

Option 2: Search Bar with AI Assistant

Search bar placed at the top of Client Hub

  • Supports both keywords and full questions

  • Active, visible, and easy to discover

  • Blends traditional search with AI responses


Outcome: More intuitive and aligned with how users approach documentation and troubleshooting. This option was selected for MVP.

Result-
62% of users said it’s hard to find what they need in Client Hub or Mastercard docs.

70%+ said they would use an AI assistant inside Client Hub


Top use cases:

  • Troubleshooting errors

  • Finding the right documentation

  • Answering setup/integration questions


“I don’t want to leave the platform or guess what to search for.” — Survey respondent

Why We Chose Search with AI

Survey results showed users wanted to “find things faster” and “not dig through menus.”

The AI-powered search bar made support feel like a built-in tool — not an add-on.

“I’d rather type in a search bar than talk to a chatbot.” — Client Hub user

Final Design

AI Search bar
When using an AI service, you are responsible for any inputs and AI service-generated outputs

AI Search bar
When using an AI service, you are responsible for any inputs and AI service-generated outputs

Search Results
Designed to help users minimize fraud risk and maximize conversion performance

Search Results
Designed to help users minimize fraud risk and maximize conversion performance

Conversation with AI Chatbot
Designed to give users advanced tools and guidance, the AI chatbot helps them build and grow online with confidence

Conversation with AI Chatbot
Designed to give users advanced tools and guidance, the AI chatbot helps them build and grow online with confidence

Impact

📈34%

Task completion when searching

for documentation or troubleshooting

common errors

Task completion when searching

for documentation or troubleshooting

common errors

Task completion when searching

for documentation or troubleshooting

common errors

Reduction in low-priority support

tickets within the first month of launch

Reduction in low-priority support

tickets within the first month of launch

Reduction in low-priority support

tickets within the first month of launch

⬇️ 22%

⬇️ 22%

Freed up support resources to focus

on more complex issues, improving

overall service quality

Freed up support resources to focus

on more complex issues, improving

overall service quality

Freed up support resources to focus

on more complex issues, improving

overall service quality

💬

© 2025 All rights reserved.

© 2022–2024

Projects by Colleen Park

Connect

LinkedIn

Twitter

Dribbble