← back to work
case study · 06 of 06
USCIS · gov digital services · 2 months · 2025
When the help tool
needs help.
When the help tool
needs help.
When the help tool
needs help.
Confidentiality Note: To respect confidentiality, certain visuals have been adjusted. The overall process, design challenges, and results are based on real work.
Confidentiality Note: To respect confidentiality, certain visuals have been adjusted. The overall process, design challenges, and results are based on real work.
15%
Less Research Time Per Case
20%
Fewer Support Escalations
client
GOV - U.S. Citizenship & Immigration Services
role
UX design lead
timeline
aug to sept 2025
tools
figma · dhs chat · design system
project overview
The USCIS chatbot was due for a technical migration from AngularJS to React. That created an opening to do more than swap frameworks. I led the redesign of the chat experience, partnering with engineering on the migration while addressing usability issues that had been quietly accumulating since launch. The work also brought the chatbot in line with the platform's updated design system, where it had previously felt like a separate product bolted onto the experience.
The USCIS chatbot was due for a technical migration from AngularJS to React. That created an opening to do more than swap frameworks. I led the redesign of the chat experience, partnering with engineering on the migration while addressing usability issues that had been quietly accumulating since launch. The work also brought the chatbot in line with the platform's updated design system, where it had previously felt like a separate product bolted onto the experience.
the challenge
The same usability issues kept resurfacing, and the chatbot was driving users to ask for help rather than helping them find it. The redesign had to happen alongside the framework migration. That meant rebuilding the experience inside a new design system and codebase while preserving the patterns users had already learned. Both tracks had to ship together. Neither could compromise the other.
The same usability issues kept resurfacing, and the chatbot was driving users to ask for help rather than helping them find it. The redesign had to happen alongside the framework migration. That meant rebuilding the experience inside a new design system and codebase while preserving the patterns users had already learned. Both tracks had to ship together. Neither could compromise the other.
from the ticket queue
"Users came to the chatbot for help and instead ended up filing a ticket about the chatbot ."
"Users came to the chatbot for help and instead ended up filing a ticket about the chatbot ."
recurring observation in stakeholder interviews
phase 01 · research
What the ticket queue had been telling us.
What the ticket queue had been telling us.
I worked with product managers, business analysts, and stakeholders to identify the business and design challenges driving the work. We started with what was already on record, the incident ticket queue. The same usability complaints kept reappearing, which made it possible to point at specific patterns instead of guessing at causes. From there I audited the live experience to see where the interface was forcing those tickets to be written in the first place.
I worked with product managers, business analysts, and stakeholders to identify the business and design challenges driving the work. We started with what was already on record, the incident ticket queue. The same usability complaints kept reappearing, which made it possible to point at specific patterns instead of guessing at causes. From there I audited the live experience to see where the interface was forcing those tickets to be written in the first place.
signals from support
The recurring tickets pointed at the same four interface failures.
The recurring tickets pointed at the same four interface failures.
— Usability incident tickets kept climbing, with the same complaints showing up across months.
— Usability incident tickets kept climbing, with the same complaints showing up across months.
— AI responses were placed inside independently scrollable bubbles, so users could not see the full response without realizing they had to scroll inside the bubble.
— AI responses were placed inside independently scrollable bubbles, so users could not see the full response without realizing they had to scroll inside the bubble.
— The "Enter a message" input was disabled, forcing users to pick between yes/no replies and ten to eleven canned suggestions.
— The "Enter a message" input was disabled, forcing users to pick between yes/no replies and ten to eleven canned suggestions.
— Typography inside the chatbot did not match the platform's design system, so the experience read as a separate product bolted onto the page.
— Typography inside the chatbot did not match the platform's design system, so the experience read as a separate product bolted onto the page.
why the tickets kept coming
The pattern underneath them.
The pattern underneath them.
Each ticket was symptom, not cause. Users could not read the full answer, could not phrase their actual question, and could not trust that the tool was part of the platform they had logged into. The chatbot had been built like a decision tree wearing a chat UI, which meant the friction was structural rather than cosmetic. The redesign needed to address all three layers at once, otherwise the next ticket batch would look just like the last one.
Each ticket was symptom, not cause. Users could not read the full answer, could not phrase their actual question, and could not trust that the tool was part of the platform they had logged into. The chatbot had been built like a decision tree wearing a chat UI, which meant the friction was structural rather than cosmetic. The redesign needed to address all three layers at once, otherwise the next ticket batch would look just like the last one.
phase 02 · synthesis
Four problems on one side, three improvement directions on the other.
Four problems on one side, three improvement directions on the other.
With the audit findings and ticket data on the table, the issues clustered into a list of problems we could name and a parallel list of directions the redesign could take. The two lists were the brief for everything that followed.
With the audit findings and ticket data on the table, the issues clustered into a list of problems we could name and a parallel list of directions the redesign could take. The two lists were the brief for everything that followed.
problems
Where the experience broke down.
Where the experience broke down.
— Usability tickets kept climbing, with the same complaints showing up month after month.
— Usability tickets kept climbing, with the same complaints showing up month after month.
— Confusing UI. Long responses were trapped inside scrollable bubbles, so users could not see the full answer.
— Confusing UI. Long responses were trapped inside scrollable bubbles, so users could not see the full answer.
— Hard to find what you were looking for. With the input disabled, users had to pick from yes/no or ten plus canned suggestions, none of which matched their actual question.
— Hard to find what you were looking for. With the input disabled, users had to pick from yes/no or ten plus canned suggestions, none of which matched their actual question.
— Out of place. Typography and visual treatment did not match the platform's design system, so the chatbot felt like a separate product.
— Out of place. Typography and visual treatment did not match the platform's design system, so the chatbot felt like a separate product.
directions
What the redesign needed to do.
What the redesign needed to do.
— Make responses readable. Remove nested scrolling. Let answers expand in the conversation, with progressive disclosure ("Show more") for the long ones.
— Make responses readable. Remove nested scrolling. Let answers expand in the conversation, with progressive disclosure ("Show more") for the long ones.
— Open the conversation. Enable open-text input earlier in the flow. Keep suggested prompts as optional guidance rather than the only path.
— Open the conversation. Enable open-text input earlier in the flow. Keep suggested prompts as optional guidance rather than the only path.
— Bring it into the family. Align typography, spacing, components, and interaction patterns with the existing design system so the chatbot stops feeling bolted on.
— Bring it into the family. Align typography, spacing, components, and interaction patterns with the existing design system so the chatbot stops feeling bolted on.
— Ship it with the migration. Rebuild inside the React codebase so the design and the framework switch arrive together, not in two separate rollouts.
— Ship it with the migration. Rebuild inside the React codebase so the design and the framework switch arrive together, not in two separate rollouts.
key screens highlighted
Chatbot response bubble, conversational entry point, and platform-system alignment across typography and components.
phase 03 · solution strategy
Three changes, all shipped with the migration.
Three changes, all shipped with the migration.
The redesign focused on three things the research had pointed at directly. Each one was scoped to land inside the new React build, so design and framework arrived together. No double rollout. No retraining users twice.
The redesign focused on three things the research had pointed at directly. Each one was scoped to land inside the new React build, so design and framework arrived together. No double rollout. No retraining users twice.
move 01 · readability
Let the answer be the answer.
Let the answer be the answer.
Remove the nested scrolling inside response bubbles. Let answers expand naturally in the conversation flow. For long outputs, introduce progressive disclosure ("Show more", section collapsing) so length never costs the user the full response.
Remove the nested scrolling inside response bubbles. Let answers expand naturally in the conversation flow. For long outputs, introduce progressive disclosure ("Show more", section collapsing) so length never costs the user the full response.
move 02 · conversational flow
Open the input. Keep the suggestions.
Open the input. Keep the suggestions.
Enable open-text input earlier in the flow. Move suggested prompts from required gates to optional guidance, so the chatbot stops behaving like a decision tree and starts behaving like a conversation.
Enable open-text input earlier in the flow. Move suggested prompts from required gates to optional guidance, so the chatbot stops behaving like a decision tree and starts behaving like a conversation.
move 03 · system alignment
Bring it back into the platform.
Bring it back into the platform.
Align typography, spacing, components, and interaction patterns with the established design system. The chatbot stops feeling like a separate product and starts feeling like part of the page users already trust.
Align typography, spacing, components, and interaction patterns with the established design system. The chatbot stops feeling like a separate product and starts feeling like part of the page users already trust.
phase 04 · before
The chatbot users were actually meeting.
The chatbot users were actually meeting.
Before the redesign, this was the live experience driving the ticket queue. Scrollable response bubbles, a disabled message input that funnelled users into yes/no or a long list of canned suggestions, and typography that read as foreign on the platform.
Before the redesign, this was the live experience driving the ticket queue. Scrollable response bubbles, a disabled message input that funnelled users into yes/no or a long list of canned suggestions, and typography that read as foreign on the platform.
fig. 01 · current chatbot state, side-by-side comparison
phase 05 · after
The Next-Generation Chatbot, Redefined with AI Assistance
The Next-Generation Chatbot, Redefined with AI Assistance
Responses expand in the conversation rather than hide inside their own scrollable container. The input is open from the start, with suggestions kept as optional shortcuts. Typography and components match the platform's design system, so the chatbot reads as part of the page.
Leveraged AI-powered tools during the chatbot redesign to streamline workflows and speed up ideation. User data confirmed key friction points, while DHS Chat (AI) suggested alternative design approaches. Each recommendation was evaluated against user needs and technical constraints to guide practical implementation decisions.
fig. 02 · redesigned chatbot, conversational entry pattern
fig. 03 · response interaction pattern
design solution · the brief, in one line
Make answers readable. Open the conversation. Stop feeling like a separate product.
Make answers readable. Open the conversation. Stop feeling like a separate product.
Three moves, scoped to land inside the React migration. Each one tied back to a pattern users were already telling us about through the ticket queue.
Three moves, scoped to land inside the React migration. Each one tied back to a pattern users were already telling us about through the ticket queue.
METRICS
15%
15%
Improved chatbot usability by simplifying conversational flows, removing readability barriers, and making information easier to locate, contributing to an estimated 15% reduction in time spent researching cases.
Improved chatbot usability by simplifying conversational flows, removing readability barriers, and making information easier to locate, contributing to an estimated 15% reduction in time spent researching cases.
20%
20%
Reduced user friction by 20%, improving chatbot usability and information discoverability, contributing to fewer support escalations and increasing users’ ability to resolve questions independently.
Reduced user friction by 20%, improving chatbot usability and information discoverability, contributing to fewer support escalations and increasing users’ ability to resolve questions independently.
annjalina.k
Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.
colophon
built in framer
fraunces + inter + jetbrains mono
© 2016–2026 · all rights reserved
annjalina.k
Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.
colophon
built in Framer
set in Fraunces & Inter
© 2016–2026 · all rights reserved