REFERENCE VIEWER
Keeping referenced information within reach while reviewing a response.
ROLE
UI/UX Designer
TOOLS
Figma
WHAT I DESIGNED
-
Interaction Design
-
Accessibility
THE CONTEXT
Claribel provides Farm Loan Officers with answers based on agency handbook content. When a response includes supporting sources, users can select a citation to view the referenced material.
The original reference viewer had already been designed and implemented when our team inherited the product.
There was a noticeable gap between the original design and the implemented experience, and the product owner came to us with an enhancement request: make the reference viewer easier to access without taking users away from the conversation.
THE EXISTING EXPERIENCE
The original design presented the reference viewer as a modal. For desktop users, this meant the conversation was effectively hidden while they reviewed the supporting material.
The PO was comfortable with most of the existing reference-viewer elements but specifically wanted to improve the desktop experience.
Implemented Design
Inherited Design
THE PROBLEM
How can users review supporting material while maintaining context of the conversation that led them there?
UNDERSTANDING THE REQUIREMENT
After reviewing the existing design and implementation and talking through the workflow with the PO, I identified two key needs:
• The reference viewer should be easily accessible from the conversation.
• Desktop users should not lose sight of the conversation while reviewing a source.
The PO also initially wanted the reference snippet included inside the Reference Viewer, as shown in the original design. This led me to question whether that information was actually helping the user.
THE DESIGN DIRECTION
From Modal → Side Panel
I proposed moving the Reference Viewer from a modal into a side panel on desktop.
This allowed the reference material to occupy part of the screen while keeping the conversation visible alongside it.
The interaction became: Select citation → Reference Viewer opens beside the conversation → Review source → Close viewer and continue the conversation.
Reference Viewer in side panel
Removing Redundant Information
One of the more interesting design discussions was around the response snippet.
The initial direction was to include a snippet of the response inside the Reference Viewer, similar to the original design. I questioned whether this was necessary.
The user was already looking at the conversation on the left. Repeating part of that response inside the reference viewer meant using valuable space to show information that was already available.
I discussed this with the PO and was able to make the case for removing the redundant snippet.
The result: the Reference Viewer could focus on what the user actually needed — the source and the supporting content.
Removed response snippets from the viewer
KEEPING USERS ORIENTED
Once I removed the redundant response snippet from the Reference Viewer, I needed another way to maintain the relationship between the citation and the original response.
When a citation was selected, I highlighted both the citation number and the corresponding response with a light-blue highlight/border. This created a visual connection between what the user selected and the part of the conversation it came from, without repeating the response content inside the panel.
The interaction became:
Select citation → Citation and response are highlighted → Reference Viewer opens → Review supporting content
This allowed users to quickly understand which citation they selected, where it appeared in the conversation, and which supporting content they were viewing, while keeping the original conversation visible.
OUTCOME
The redesigned Reference Viewer gave desktop users access to supporting material without completely hiding the conversation.
More importantly, the solution evolved from simply displaying a reference to creating a more connected relationship between:
Conversation → Citation → Source
The final interaction also reduced redundant content, preserved context, and provided a clearer way to move between multiple references.