Displaying Rates and Quotes: UX Patterns That Convert

From the High-Intent Funnels hub. The rate or quote display is where a user decides whether to keep going. It is also where regulatory language, competitive pressure, and design taste collide most sharply. Get this screen right and the rest of the funnel is much easier. Get it wrong and the funnel above it does not matter.

The three jobs the rate display has to do

1. Answer the question the user came for. They want a number. Give it to them, in a form they can compare.
2. Establish credibility. The number needs to feel like it will be honored, not moved on the next screen.
3. Move to the next step. A clear, single primary action out of the screen, whatever it is.

Screens that do all three convert. Screens that only do one or two do not.

Rate card patterns

Show the assumptions inline, not in a modal

The rate assumes something — credit tier, down payment, coverage level, term. Print those inline in a legible size directly under the rate. Users tolerate seeing "assumes 740+ credit and 20% down." They punish being surprised on the next screen.

APR vs. rate: show both, explain neither in the primary display

APR must appear where the rate appears. That is regulatory, not optional. Do not try to explain the difference in the primary display — link to a plain-language explainer, keep the numbers clean, and let the disclosure text do its job.

Comparison tables beat single-quote screens for sophisticated shoppers

When you have multiple products (loan terms, coverage tiers), a comparison table with three or four columns outperforms a single hero quote for users who came from a comparison-search context. Do not force those users back into a single-option view.

Quote table patterns

• Sort by the metric the user cares about, not by margin. Users read top-down; the top row wins by default.
• Include a clearly-labeled "recommended" option only when you can defend it in writing — regulators, and users, do not tolerate hidden ranking logic.
• Every row needs its own primary action. A single button at the bottom of the table forces the user back to a decision they already made.
• Show enough columns to make comparison possible, but not so many that mobile becomes horizontal-scroll misery. Three or four columns is usually the ceiling.

Disclosure language on the price screen

Required disclosures are non-negotiable. What is negotiable is their placement and typography. Legible, near the number, in a font size that does not read as an attempt to hide. Regulators and sophisticated users both read the disclosure; make sure the design does not signal that you would rather they did not.

Anti-patterns worth killing

• "Rate as low as" without a companion realistic range.
• Countdown timers on rate validity that reset on refresh.
• Auto-selected upgrade toggles that inflate the displayed price.
• Any pattern that produces a materially different number on the next screen.

Related reading: insurance quote flow best practices and lead form vs full application.