CITATIONS
Connecting responses to their supporting sources.
ROLE
UI/UX Designer
TOOLS
Figma
WHAT I DESIGNED
-
Interaction Design
-
Accessibility
THE CONTEXT
Claribel is an AI chatbot that helps Farm Loan Officers find information from handbook content. When our team inherited the product, its interface was a mix of FPAC-approved DeepChat components and a modified version of the FPAC design system. The experience did not consistently align with the FPAC or USWDS visual language.
Part of our work was to bring the experience closer to the FPAC/USWDS design system while also supporting interaction patterns that a traditional, largely static design system was not originally built to address.
THE CHALLENGE
One of the requirements was to display reference numbers within Claribel's response text. Each citation needed to be clickable and connect the user to the referenced material.
The challenge was to make citations easy to recognize and follow without interrupting the flow of the response. A single response could contain multiple citations, and the source names could be lengthy. I wanted to avoid adding full source names directly into the response, which could quickly become visually cluttered.
QUESTIONS I ASKED
-
How does Claribel determine where citations appear?
-
What types of sources are being referenced?
-
How should a citation behave when a response contains multiple references?
-
How should users identify the source associated with a citation
-
How can citations remain accessible without disrupting the response?
EXPLORING CITATION PATTERNS
I researched common citation approaches and compared three patterns: parenthetical, note-style, and numerical citations.
The inherited design used superscript-style numerical citations, a familiar pattern in printed materials and PDFs where references are often presented as footnotes or in a notes section. I considered keeping this approach, but also looked at how it would work within an interactive AI response.
A small superscript number can create a limited clickable or tap target, particularly on smaller screens. At the same time, I considered how the citations would behave when a response contained multiple references.
Why numerical citations?
I chose a numerical citation approach because it allowed the references to remain lightweight within the response. Using parenthetical citations would have meant displaying source information directly within the response text. With potentially multiple citations—and source names that could be quite long—this could interrupt the reading flow and make the response feel cluttered.
The numerical approach allowed the response to remain clean while still giving users a clear way to identify and access the supporting sources.
DESIGNING THE CITATION BEHAVIOR
The proposed interaction places numbered citations directly within the response text. The citation number is visually connected to the relevant statement and can be selected to access the supporting reference.
Because the response itself should remain readable, I kept the detailed source information out of the response text. Instead, I explored providing the identifying details of the source through a tooltip when users interact with the citation.
This gave users a way to understand what source the citation referred to before opening the reference, without adding lengthy source names to the response itself.
Inherited Design
My Approach
MAKING THE SOURCE IDENTIFIABLE
A citation number alone does not tell the user what source it represents. I therefore treated source identification as part of the citation experience rather than treating the number as the entire interaction.
The citation provides the connection to the source, while the tooltip provides identifying information about that source. Selecting the citation then provides a path to the Reference Viewer, where the supporting material can be reviewed.
This created a simple progression:
Response → Citation → Source information → Reference Viewer
ACCESSIBILITY
-
Used meaningful accessible naming for citation links rather than relying only on the visible number. Suggested aria label format - "Link 1, Source: General Program Administration."
-
Considered the size and usability of interactive citation targets.
-
Avoided making essential source information dependent solely on hover behavior.
-
Kept the citation pattern consistent so users can learn the interaction once and reuse it throughout the experience.
The goal was to make citations understandable and usable for assistive-technology users while keeping the visual treatment lightweight within the AI response.
CONSIDERING ACCESSIBILITY BEYOND DESKTOP
The desktop concept used hover-based contextual information, but I identified a limitation: hover is not available on touch devices. I documented the need for the essential citation/source experience to remain available without relying on hover, with an appropriate touch interaction or alternative presentation for tablet and mobile experiences.
This was a recommendation rather than a completed responsive design deliverable.
OUTCOME
The proposed citation pattern gave Claribel a clearer way to connect statements in an AI response to their supporting sources without interrupting the reading flow.
The numerical citations kept the response visually clean even when multiple references were present, while the source information provided additional context without displaying long source names directly in the response.
Together, the citation, source identification, and Reference Viewer created a connected path from statement → citation → source.