Feature Design and Visual Strategy
Role
Lead Designer
Platform
Alexa Web
Team
UX Design, Product, Engineering, Legal
Problem
Citations are meant to build trust, but Alexa’s existing system was doing the opposite. Responses relied on large, interactive citation pills scattered throughout content. They interrupted reading flow, consumed valuable screen space, and made sources feel fragmented rather than transparent. Placing citations after every relevant sentence dramatically increased cognitive load and visual noise.
Solution
The solution was to decouple trust from interruption. Instead of forcing source interaction inline, we shifted to paragraph-level citations paired with a centralized Sources panel, allowing users to engage with sources on their own terms without breaking flow. This solution was developed for the new Alexa+ Web experience.
Research and Insights
We conducted a self-audit, customer interviews, surveys, and competitive analysis for evaluation.
The initial self-audit suggested issues like:​
-
Vague and unintuitive links between content and its source
-
Unintentional emphasis on sources rather than on the response content
-
Lack of distinction between different types of content provided within a response (answer, suggestions, sources, etc.)
Key insights from customer research included:
1
2
3​
Users want sources available, but not constantly in view
Frequent interaction slows scanning and comprehension
A single, centralized place for sources reduces mental load
We identified two primary audiences:
-
Casual readers who prioritize uninterrupted content
-
Researchers who want fast source verification
Across personas, the friction was the same: users wanted control over when they engaged with citations.
BRINGING THE IDEA TO LIFE
Design and Impact
Final Solution
The final system centers on two lightweight entry points to source information:
1
In-line Citations
Citations appear at the end of relevant paragraphs and are visually minimized through truncation. On hover (only on Web), they expand to reveal the full source name, URL, and logo when available.
2
Sources Panel
A persistent “Sources” button opens a side panel listing all sources in one place, allowing users to explore references without interrupting the reading experience.
Impact
Internal usability testing showed that paragraph-level citations improved scanning ability and reduced visual clutter. Users understood the Sources button as a single entry point for trust, and performance benchmarks confirmed that citation rendering did not slow content delivery.
​
Pre-launch results indicated:
-
Higher perceived trust in responses
-
Smoother reading flow
-
Clearer access to sources
-
Strong alignment across mobile and web teams
Instrumentation was added to track citation impressions, engagement, and load times post-launch.
Reach out for more!