Generating portfolio for Alfie Martin...

26%

Loading
Loading
Back to Home

Interaction Design

Designing Trust into Conversational Systems

A demonstration of editorial UI patterns for AI agents. Rather than hiding uncertainty, this system exposes model confidence to build trust during clinical triage, utilizing restrained typography and thoughtful pacing.

The Challenge

Default chat UIs map poorly to high-stakes domains. When an AI provides medical context, users need to know exactly how confident the system is, and when it is gracefully escalating to a human.

Design Decisions

  • Asymmetric Framing: User messages use structured, solid bubbles. AI responses are borderless, editorial text blocks to feel more like a document than a text message.
  • Confidence Metadata: Instead of generic avatars, the AI's identity is defined by its metadata (latency, model, confidence).
  • Intentional Hedging: When confidence drops below 70%, the UI signals caution, and the dialogue automatically offers a human escalation path.
Clinical AssistantSecure Session
processing

Confidence Indicator Patterns

Different contexts require different expressions of uncertainty. These patterns treat confidence as a spectrum, utilizing typography, layout, and interaction to guide user trust. Hover over any pattern to see the design rationale.

1. Probability Bar

Diagnosis match82%

HOVER FOR USAGE RATIONALE

Treatment efficacy95%

HOVER FOR USAGE RATIONALE

Symptom correlation45%

HOVER FOR USAGE RATIONALE

2. Hedged Language

Based on the available data, This pattern may indicate early-stage hypertension. Further testing is recommended.

3. Source Citation

Your LDL is slightly elevated at 112 mg/dL, above the recommended 100 mg/dL threshold.

Blood Panel, Mar 12
Dr. Chen Notes

4. Decomposition Score

Risk assessment complete. Model certainty is moderate.

5. Low Confidence Banner

Low Confidence — Review Needed

This response is based on incomplete intake data and has not been verified against your full medical history.

VUI Mobile Simulation

Interactive voice user interface dashboard simulating command processing, status tracking, and user feedback in a clinical setting.

JS

John Smith

ID: #84920DOB: 05/12/1980
Session 12 of 36
Stimulation Ready
Motor Threshold
62
%
Intensity
120
%
Current Protocol
Standard Depression
Left DLPFC10Hz3000 pulses
Real-time Pulse Rate (BPM)
LIVE

Simulate Voice Input

Idle
Suggestion: Ready for motor threshold check?

Concluding Thoughts

The "only when communicates something useful" clause on confidence badges is doing a lot of work — it stops the model from slapping a percentage on every message, which is what most generic chatbot UI demos look like. You can swap in your own thresholds if you have a POV.

The conversation content section is the most-skipped part of UI prompts and the most important one for a portfolio piece. If you don't constrain the dialogue, you get "Hi! How can I help you today?" "I'd love to learn Python!" and the whole artifact reads as filler. Specifying the kinds of moments to show forces the model to demonstrate actual conversational design thinking.

The "avoid" list in the aesthetic section is more powerful than the positive direction. AI tools have strong default aesthetics (purple gradients, sparkle icons, drop-shadowed bubbles) and naming them explicitly is the only reliable way to suppress them.