Introduction
No matter how spot-on a recommendation is, it's meaningless if it doesn't get through. Explaining at length "we recommend this product, because…" often means the customer won't read to the end.
In this article I explain the UI we built to visualize recommendations for the concierge AI on an EC site selling motorcycle gear. Comparison tables of candidate products, radar charts of characteristics, and upsells of related items. I gave form to the conviction that visualization is what builds trust and nudges the purchase.
Why visualize
Text alone doesn't get through
The more carefully you write out reasons in text, the more information there is. Yet the more information, the higher the reading load, and the harder the decision becomes. It's the same in person — reeling off specs verbally just doesn't stick.
How you show it shapes the decision
The same content read as prose versus seen as a table differs wildly in how fast it's understood. Especially when comparing multiple products, visual organization heavily shapes the quality of the decision.
So we chose a presentation that matched the nature of the information: comparisons in tables, intuitive characteristics in charts.
Visualizing the "why"
What the customer really wants to know is "why this one for me." We aimed not for a mere product list but a form where the reason for the recommendation is visible.
A comparison table makes the selection logic — "within budget, fits the use case, in stock" — clear at a glance. A radar chart intuitively conveys a product's personality — "comfort is high, lightness is medium." Visualization's role is translating numbers and prose into a form you can decide on.
Showing candidates side by side
Making differences pop with a horizontal layout
When there are multiple candidates, the most effective thing is a side-by-side comparison table. Lining up each product on the same axes makes the differences surface naturally.
The key is choosing the aspects to match the customer's interview results. If you heard "touring," bring comfort and load capacity up top. Rather than serving everyone the same table, we rearrange it along that person's interests.
The courage to trim information
Comparison tables are handy, but cramming in too many rows makes them no different from a spec sheet. Narrow to the few aspects needed for the decision and leave the rest to the detail page. This subtraction is the trick to keeping a comparison table "readable."
Conveying characteristics with charts
Drawing personality with a radar chart
A product's character comes across better as a shape than as a pile of numbers. Draw a radar chart on axes like comfort, lightness, protection, and ventilation, and it's obvious at a glance what that product is strong at.
Weight ◯g, ◯ vents… just numbers lined up, nothing memorable
The balance of the shape intuitively says "a comfort-focused piece"
Overlay the charts of multiple candidates and you can visually compare differences too — "this one favors lightness, that one favors protection." It gets through far faster than words.
Showing it paired with evidence
A chart is only a summary, so pairing it with a backing explanation is essential. We place the grounded comment obtained from RAG near the chart so you can trace "why this rating." Visual clarity and solid evidence — conviction comes from these two wheels turning together.
Nudging the shopping experience
Recreating "and with that…" through upsells
A highlight of in-store service is the line "and how about this to go with it?" To recreate this online too, we present related items that pair well with the chosen product as upsells.
Show candidate products with a comparison table and chart
The customer selects the product they're interested in
Present well-matched products — an intercom for a helmet, an inner for a jacket
Choose the variant (color, size) and go straight to purchase
The key is adding it purely as "a suggestion that's handy together," so it never becomes a hard sell.
A path that leaves no hesitation
Even when a customer's mind is made up by the recommendation, a cumbersome route to the cart lets the excitement cool. From the visualized recommendation screen, we kept the path short so they can pick color and size and proceed straight to purchase. It's a touch that keeps the conviction we worked to build from slipping away at the final step.
Conclusion
In the UX of visualizing recommendations, I focused on three things.
- Presentation matched to nature — tables for comparison, charts for characteristics, translating info into a decidable form
- Rearranging for the individual — change the aspects and order along the interview results
- Nudging to purchase — connect conviction to action with upsells and a short path
The substance shown through visualization is born from the requirements heard in dialog and the evidence from RAG. The dialog design that gathers requirements is covered in "Designing the Interview Dialog and State Management," the mechanism that builds evidence in "Product Master × RAG for Grounded Recommendations," and the full picture in "AI Product Concierge — Interactive Diagnosis & Recommendations."