Skip to main content
Back to thoughts
4 min read

Building Trust in AI: Lessons from the Mortgage Assistant

Designing AI experiences users can trust is not just a technical challenge. It's a design challenge that requires intentional transparency, clear mental models, and human-centered interaction patterns.

Trust is not a feature you build. It's something you design for.

When we set out to redesign the Mortgage and Home Equity Assistant at Scotiabank, we knew the core challenge wasn't just making it work. It was making people feel comfortable using it.

AI tools promise efficiency. They promise speed. But if users don't trust the output, none of that matters. They'll double-check everything, revert to old workflows, or abandon the tool altogether.

So the real question became: how do you design trust into an AI experience?

The problem with black boxes

Most AI tools operate as black boxes. You ask a question, you get an answer. Maybe it's right, maybe it's not. You have no way to verify without doing the work yourself.

That's not trust. That's gambling.

In financial services, the stakes are even higher. A wrong answer doesn't just waste time. It can mean a denied loan, a missed opportunity, or worse, a compliance violation. Users need to understand not just what the AI said, but why it said it and where that information came from.

This meant our design had to prioritize transparency at every step.

Designing for verification, not just consumption

The breakthrough came when we stopped thinking about the AI as an answer machine and started thinking about it as a research assistant.

We built a side-by-side comparison UI that showed the AI's response on one side and the source document on the other. Users could see the exact section the AI referenced, highlighted in context.

interface CitationProps {
  text: string;
  sourceDocument: string;
  pageNumber: number;
  highlightedSection: string;
}

function CitationCard({ text, sourceDocument, pageNumber, highlightedSection }: CitationProps) {
  return (
    <div className="flex gap-4 border rounded-lg p-4">
      <div className="flex-1">
        <p className="text-sm font-medium">AI Response</p>
        <p className="mt-2">{text}</p>
      </div>
      <div className="flex-1 bg-muted rounded p-3">
        <p className="text-sm font-medium mb-2">
          Source: {sourceDocument} (Page {pageNumber})
        </p>
        <p className="text-sm italic">{highlightedSection}</p>
      </div>
    </div>
  );
}

This wasn't just about showing sources. It was about giving users control. They could verify, challenge, or confidently move forward based on what they saw.

Confidence indicators as design language

Another pattern we implemented was confidence scoring, but not in the way most people think about it.

We didn't show raw probability scores like "87% confident." Those numbers are meaningless to most users. Instead, we designed a visual language that communicated certainty through color, iconography, and language.

  • Green checkmark: Direct match found in policy documents
  • Yellow information icon: Partial match, interpretation required
  • Red alert: No clear match, manual review needed

This gave users an instant mental model. They knew when to trust the output immediately and when to dig deeper.

Building mental models through progressive disclosure

One of the most important lessons was about information architecture. We couldn't dump everything on the user at once. That creates cognitive overload, which erodes trust just as much as a lack of transparency.

Instead, we used progressive disclosure. The AI gave a clear, direct answer first. Then, if users wanted more context, they could expand sections to see citations, related policies, or alternative interpretations.

function AIResponse({ answer, citations, relatedPolicies }: ResponseProps) {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div className="space-y-4">
      <div className="text-lg font-medium">{answer}</div>

      <button
        onClick={() => setShowDetails(!showDetails)}
        className="text-sm text-blue-600 hover:underline"
      >
        {showDetails ? "Hide details" : "Show how we got here"}
      </button>

      {showDetails && (
        <div className="space-y-3 pt-3 border-t">
          <Citations items={citations} />
          <RelatedPolicies items={relatedPolicies} />
        </div>
      )}
    </div>
  );
}

This pattern respected both novice and expert users. Beginners got a clean, simple answer. Experts could dive into the details without clutter getting in their way.

Trust is designed, not assumed

What I learned from this project is that trust in AI is not about the algorithm. It's about the interface.

You can have the most accurate model in the world, but if users can't verify it, can't understand it, or can't develop a mental model of how it works, they won't trust it.

Designing for trust means:

  • Showing your work: Citations, sources, and reasoning paths
  • Setting clear expectations: Confidence indicators and clear language
  • Enabling verification: Side-by-side comparisons and progressive disclosure
  • Respecting user agency: Letting them dig deeper when they need to

The most powerful outcome wasn't just that users trusted the tool. It's that they felt in control. And control, in the end, is what trust really looks like.