Enter password to view case study
Agentic AI · Telecom sales · Conversational UX
Bringing streaming bundles, streaming equipment and premium channels into XOEai, the AI assistant that guides sales agents through a live customer chat, designed to feel like part of the conversation.
XOEai · Agent console
Product
XOEai, an agentic AI sales assistant
Role
Senior experience designer
Scope
Bundles, equipment and premium channels
Deliverables
Flows, light and dark UI, prototype, user flow and dev handoff
Overview
XOEai sits beside the chat transcript in the agent console. As the customer talks, it suggests what to ask, presents offers as cards the agent can act on, and keeps the cart updated. My work was to integrate streaming selections and bundles into that experience, so an agent can sell StreamSaver bundles, plan upgrades, and promote 4K Stream Boxes and premium channels without leaving the conversation.
Just as important, it had to be conversational. The assistant should ask, listen and respond the way a good agent would: one question at a time, in plain language, building on what the customer just said. It shouldn’t hand the agent a form.
Goals
Sell streaming inside the chat
Make it a conversation
Recommend from what the customer said
Numbers the agent can trust
One offer pattern everywhere
Ready to build
The problem
Streaming is harder to sell in a chat than internet. Customers already pay for some apps, every app has its own tiers, and some equipment isn’t compatible with what’s in the home. XOEai needed cards for all of it that fit the way it already presents offers, so the agent could recommend, adjust and add to the cart in one place. And it all had to happen without breaking the rhythm of the chat: a run of forms and checkboxes would turn a conversation into data entry.
Who I designed for
The sales agent, often in several chats at once, with the AI assistant open beside each one. What they need from it:
Know what to ask next
Led to a discovery question, with a reply ready to send, before any offer
Understand why an offer fits
Led to a reason line built from what the customer said
Quote numbers with confidence
Led to savings in dollars, price differences, and a running total before the cart changes
Not sell something the customer will regret
Led to the double-billing reminder and the legacy Flex box warning
Sound like themselves, not a script
Led to plain-language recommended responses the agent can send or edit first
Keep the chat flowing
Led to one card per turn, shown when the customer brings something up, with system steps that move on their own
How I worked
1
Map the journey
Wrote a flow spec covering featured bundles, build your own, browse all, tier upgrades and managing a bundle later.
2
Design the turns
Designed each step as a turn in the chat, built from XOEai’s Mercury components: assistant cards, offer rows, cart updates and user echoes.
3
Cover equipment
Added the 4K Stream Box, premium channels, and the customer whose legacy Flex box isn’t compatible.
4
Audit and iterate
Checked the bundle cards against the hardened offer pattern and reworked the flow around discovery.
5
Prototype everything
Linked every flow, including the steps the AI takes on its own, and mapped them in one user flow.
6
Annotate for handoff
Numbered every screen with behavior, data, content and accessibility notes, and flagged open questions.
Mapping the journey
I started with a flow spec: every card the assistant could show, numbered, with notes on what each button does. It covered five ways into a bundle, the upgrade step after it, and how equipment and premium channels follow.
The original spec: featured bundles, build your own, matching bundles, browse all, tier upgrades, then the 4K Stream Box, legacy Flex handling and premium channels
Then the offer pattern hardened
A separate initiative (Offer Presentation Hardening) standardized how XOEai presents any offer. The bundle cards were designed before it, so they no longer matched how internet offers looked and behaved.
What the hardened pattern sets
A title and one line on why the AI recommends it
A Recommended tag and offer rows with price and term
Two actions, not three
The card locks as “Card complete” after an action
The agent’s action echoed as a full sentence
The hardened internet offer card
Auditing the bundle cards
v1: the featured bundles card
I reviewed the existing bundle flow and checked the numbers on each screen. Here’s what I found:
Offers before questions
Three bundles showed before anyone knew which apps the customer already paid for.
No reason given
Nothing told the agent why these bundles were highlighted, so nothing to say to the customer.
Three equal buttons
No thanks, Build bundle and Add to cart, with Add to cart live before a choice.
Designing it as a conversation
The audit kept pointing to one thing: v1 treated the chat like a checkout. It put a menu of options in front of the agent before the customer had said much. I set three rules so every card works as the next turn in the conversation.
Rule 1
Take turns
One question or one offer at a time. The assistant waits for the customer’s answer, then builds on it, like a good agent would.
Rule 2
Use the customer’s words
Reasons and recommended responses repeat what the customer said in plain language, so the agent can say them out loud without translating.
Rule 3
The thread is the record
Actions echo as full sentences and cart changes appear in the thread, so anyone reading back sees the conversation, not a list of clicks.
Key decisions
Decision 1
Ask first, then recommend
A bundle only saves money if it replaces what the customer already pays for. So, like a real conversation, the flow now opens with one discovery question instead of a list of offers.
Decision 2
Always show the why
Each recommendation cites what the customer said. An agent can only pass on a recommendation they understand.
Decision 3
One offer pattern
Bundles reuse the hardened offer card, so agents learn one pattern and developers build one component.
Decision 4
Catch what they’d regret
The assistant watches for overlap, like apps they pay for directly or an incompatible box, and flags it before the sale closes.
User flow
Four flows share one console: improved streaming bundles, the original bundle flow, streaming equipment (with the legacy Flex branch), and the internet offer the pattern came from. Each lane reads like a transcript: the assistant asks, the customer answers, and the assistant responds with the next card.
Solid arrows are agent clicks. Dashed purple arrows are steps the AI takes on its own. Gray dashed boxes are paths with no screens yet.
Conversational pacing
“Generating plans” and “Cart updated” advance after a beat, the way a person pauses before answering, so the agent never clicks just to keep the chat going.
Bundles hand off to equipment
Once upgrades are saved, the 4K Stream Box offer follows, so the whole entertainment sale reads as one conversation.
Both Flex outcomes designed
Keep or remove the old Flex box each lead to their own cart update, instead of a dead end.
Try the prototype
Every flow is linked, including the steps the AI takes on its own, so you can feel the pace of the conversation instead of reading about it. Pick a flow, then click through it like an agent would. Press R inside the prototype to restart.
Streaming bundles
4K Stream Box
Legacy Flex box
Internet offer
Dark mode
The improved flow: a discovery question, a recommendation built on the customer’s answer, the cart update, build your own and plan upgrades.
Final designs
Five screens make up the improved bundle flow. Each one is a turn in the conversation. Numbered notes match the pins in the Figma handoff, and every screen also works in dark mode.
CONVERSATIONAL
marks where the design keeps the exchange feeling like a conversation
Discovery question
Before showing any bundle, the assistant suggests one question about what the customer already pays for and wants to watch.
Light
Dark, in the Xfinity (Dark) theme
1
Ask before offering
CONVERSATIONAL
The assistant’s first move is a question, not a list of bundles.
WHY
It’s how a good agent starts: ask, listen, then suggest. Bundles only save money when they replace apps the customer already pays for, and v1 offered three before anyone knew that.
2
A reply ready to send
CONVERSATIONAL
A recommended response in plain language the agent can send as is, or click to edit in the composer.
WHY
Agents juggle several chats. A drafted question keeps this one moving, and editing it keeps the agent’s own voice.
3
Skip to bundles
A secondary path straight to the featured bundles.
WHY
If the customer already named their apps, the agent shouldn’t have to ask again.
4
Send to customer
CONVERSATIONAL
Posts the message to the transcript and marks the card complete. The assistant then waits for the customer’s reply.
WHY
The agent stays the one talking to the customer. The AI drafts, then takes its turn only after the customer answers.
Screen 2 of 5
Recommendation
The customer said they pay for Netflix and HBO Max and want Premier League soccer. The assistant recommends the bundle that keeps both and adds Peacock.
Light
Dark, in the Xfinity (Dark) theme
1
Why this bundle
CONVERSATIONAL
The reason line cites what the customer just said, in their words: Netflix, HBO Max, Premier League.
WHY
The recommendation answers the customer’s last message instead of changing the subject. “Based on what you told me” lands better than a generic pitch.
2
The hardened offer card
Recommended tag, title and a billing line: the same card the internet offer uses.
WHY
One offer pattern across products means agents learn it once and developers build it once.
3
Preselected and expanded
The best fit loads selected, with its details open. The other bundles stay collapsed.
WHY
The common path becomes one click: Add to cart.
4
Savings in dollars
“Save $8/mo vs. paying for each app” under the price.
WHY
v1 mixed “27% Savings” with “Save $18/mo”. One dollar figure is easier to say out loud and to check.
5
A cancel reminder
The last bullet reminds the agent about the Netflix and HBO Max plans the customer pays for now.
WHY
Bundling doesn’t cancel those plans. Flagging it while the agent is still selling heads off a surprise bill.
Screen 3 of 5
Added to cart
The bundle is in the cart, the total is right, and the assistant spots a problem the customer would only notice on their next bill.
Light
Dark, in the Xfinity (Dark) theme
1
Echo the action
CONVERSATIONAL
“Added Peacock, Netflix, HBO Max bundle to cart”, not the button label.
WHY
The thread reads back like a conversation, not a log of clicks, the same as the hardened internet flow.
2
Cart math you can trust
$50 → $72/mo: the old total plus the $22 bundle.
WHY
v1 showed $50 → $80 for a $22 bundle, and the cart pill never changed.
3
Help them avoid paying twice
CONVERSATIONAL
The assistant notices the customer pays for Netflix and HBO Max directly and drafts a friendly reminder, with an offer to text the steps.
WHY
A bundle that doubles their bill turns into a complaint. Raising it as a tip, in the flow of the chat, makes it helpful rather than a warning.
4
Send or move on
Send the reminder, or go straight to plan upgrades.
WHY
The agent decides what the customer hears. The AI only suggests.
5
The pill matches
The cart button shows $72.00, the same number as the card.
WHY
Two different totals on one screen is how agents lose trust in the tool.
Screen 4 of 5
Build your own
When none of the featured bundles fit, the agent builds one, starting from what the customer already said.
Light
Dark, in the Xfinity (Dark) theme
1
Starts from the conversation
CONVERSATIONAL
Netflix and HBO Max load checked, labeled “Customer pays for this today”.
WHY
The customer never has to repeat themselves. v1 opened blank, so the agent re-entered what they had just been told.
2
Included, not a choice
Peacock shows as “In every bundle”: checked, disabled and announced that way to screen readers.
WHY
v1’s checked Peacock looked like an option the agent could turn off.
3
A live result count
“Show 3 bundles” updates as boxes change, and disables at 0 with a hint.
WHY
It replaces “Show related bundles”, so the agent knows what they’ll get before clicking.
4
Back, not None
Back returns to the recommendation unchanged.
WHY
“None” didn’t say what would happen next.
Screen 5 of 5
Plan upgrades
After the bundle is added, the assistant offers ad-free upgrades for the apps in it, with the new monthly total before anything changes.
Light
Dark, in the Xfinity (Dark) theme
1
Only the apps they bought
One section each for Peacock, Netflix and HBO Max.
WHY
v1 offered Disney+ and Hulu upgrades after adding a bundle with HBO Max.
2
Price differences
Each option shows what it adds (“+$7.00/mo”). The included tier says “Included”.
WHY
The agent quotes the change to the bill, not a retail price they have to subtract.
3
A running total
CONVERSATIONAL
“2 upgrades selected: +$13.00/mo” and “New total $85/mo”.
WHY
The agent can say the new bill out loud in one sentence before it lands in the cart.
4
Keep current plans
A clear way to decline.
WHY
v1 only had Update cart, so saying no meant typing.
5
One cart update
Update cart posts a single “Package edited” update and updates the pill.
WHY
v1 said “bundle added” after an edit and left the total unchanged.
After the bundle
Streaming equipment
Once streaming is in the cart, the assistant offers a 4K Stream Box, then premium channels based on the customer’s interests. Some customers have a legacy Flex box that can’t run alongside it, so the assistant has to catch that before the sale closes.
CONVERSATIONAL
Each offer opens with a plain-language line the agent can say (“Okay, now let’s look at the 4K Stream Box, which lets you stream everything in one place”), followed by one yes-or-no question. It feels like the next turn in the chat, not a new form.
1. Choose how many boxes
2. Legacy Flex box warning
3. Flex box removed, 4K box added
In dark mode
Quantity in the card
A stepper (minimum 1) next to the product, with four short feature bullets.
WHY
Customers with several TVs can ask for more boxes without the agent leaving the card.
Warn before the sale closes
If the account has a legacy Flex box, a caution alert names the customer and explains the conflict.
WHY
Selling a box that can’t work in the home means a return and a second call.
Both answers lead somewhere
Remove Flex box swaps the equipment. Keep Flex box takes the 4K box back out of the cart.
WHY
Each choice gets its own cart update, so the agent always sees what the customer will be billed for.
Still open with the team at the time of this feature creation
In the current Streamstore live flow the card says the first box is free, but the cart total jumps by more than the box should cost. To check with product and devs.
“No thanks” on the quantity card needs its own path; today it shares the add action.
Does the customer need to return the Flex box? If so, the steps belong in the cart update.
Annotated for development
Every screen in every flow has an annotated copy in the Figma file: numbered pins on the design, matching notes beside it, and a link back to the original. A shared section specs the parts that repeat, so the per-screen notes stay short.
The recommendation screen in the handoff, with one open question flagged in amber
How notes are tagged
BEHAVIOR
COMPONENT
DATA
CONTENT
ACCESSIBILITY
Each note says what to build and which XOEai component it is. Amber “Open question” notes mark what isn’t decided yet.
What’s covered
Shared patterns: offer card, cart update, user echo, recommended response, Card complete
Streaming bundles: 5 screens
4K Stream Box: 6 screens
Legacy Flex box: 3 screens
Internet offer: 7 screens
Dark mode: all 36 screens, with their own prototype flows
A reusable kit
The marker and note are Figma components with number, title, type and body properties, so the team can keep annotating without detaching anything.
Questions I flagged for the team
Each one is pinned as an amber note on the screen it affects, grouped here by who can answer it.
Pricing
FOR THE OFFERS TEAM
Should bundle savings be measured against each app’s retail price, or against what this customer pays for those apps today?
Are StreamSaver prices fixed, or do they change after a promo period or by market? If so, the card needs to show the term.
When a customer upgrades an app to ad-free, is that billed at the bundle rate or the app’s regular price?
The 4K Stream Box card says the first box is free. What do additional boxes cost, so we can show it on the card?
Cart and data
FOR ENGINEERING
Which service owns the cart total, so the cart update card and the cart pill always read the same number?
Adding a free 4K box takes the total from $50 to $172. Is that test data, or is something else being added?
How reliably can the assistant tell which apps a customer pays for from the transcript, and what should it do when it isn’t sure?
Can we detect a legacy Flex box on the account before the agent clicks Add to cart?
Paths and states
FOR PRODUCT
When a customer says no thanks to a bundle or the 4K box, where should the assistant take the conversation next?
What should “Continue discovery” ask once the assistant already has enough for an offer?
If generating plans times out or fails, do we retry automatically or show the agent a fallback?
After a customer keeps their Flex box, do we still offer premium channels?
Content and policy
FOR CONTENT DESIGN AND LEGAL
Can the assistant suggest customers cancel their own Netflix and HBO Max plans, or does that wording need legal review?
Who owns the premium channel descriptions?
What does “Save cart for later” save, and how does the agent or customer get back to it?
Does the customer need to return the Flex box, and should the cart update say how?
What this shows
Designing for an AI assistant is mostly deciding what it should notice, what it should say, and what it should leave to the person. These are the rules I designed to.
It’s a conversation, not a checkout
One question or offer per turn, and the assistant waits for the reply
Recommendations answer what the customer just said, in their words
Drafted responses sound like a person, and the agent can edit them
The thread reads back as a conversation, with every action in a sentence
The AI suggests, the agent decides
Responses are drafted, never auto-sent
Every card has a clear way to decline or skip
The assistant only acts on its own for system steps, like generating plans or updating the cart
Show your work
Each recommendation says why, in the customer’s own terms
Savings, price differences and totals appear before the cart changes
The transcript keeps a plain-language record of every action
Look out for the customer
Flag subscriptions they’d end up paying for twice
Catch equipment that won’t work in the home
Never let two totals on one screen disagree
Built to be built
Reusing the hardened offer card and XOEai’s components means streaming adds behavior rather than new UI. The handoff spells out the data each card needs: subscriptions pulled from the transcript, a ranking rule, overlap detection, and one source of truth for the cart total. Every screen also works in dark mode, because everything is linked to Mercury’s theme tokens instead of fixed colors.
What’s next
Next, I’d settle the open pricing and cart questions with the offers team, design the decline and “continue discovery” paths, and bring the discovery-first pattern to equipment and channels. Then I’d test with agents in live chats to see how often the double-billing reminder gets sent and how quickly they get from question to cart.