UI Design – Prompt Injection Protection

Design Principles

The platform was designed to satisfy the project requirements of being a clear, intuitive, web-based system usable by both technical and semi-technical users. Because the product combines education, explanation, experimentation, and reporting, the interface had to balance simplicity with depth.

Intuitiveness & Learnability

A new user should understand "what this is" and "what to do next" quickly, with minimal instructions. We achieved this through clear information architecture with distinct routes (Home, Vulnerability detail, Mitigations, Testing, Prompt Enhancer, Security Assistant), a catalogue-driven navigation that operates as a predictable "list → detail" learning pattern, and a natural reading path supported by Previous/Next vulnerability navigation.

This principle is crucial because the platform must support both users who already understand AI security and users encountering prompt injection concepts for the first time.

Consistency & Visual Coherence

Consistency was essential because the platform contains multiple views with different levels of technical detail. We kept a shared visual language through glass-style panels, rounded card shapes, gradient heading treatment, and repeated page structure. We chose shadcn/ui (built on Radix) with Tailwind CSS to ensure consistent primitives—dialogs, tabs, sheets, and other components behave predictably across the UI.

Styling rules enforce consistency: a cn() helper, semantic colour tokens, preference for utilities over custom CSS, and mandatory dark-mode parity. This prevents one-off styling and makes the interface feel cohesive even as it scales.

Usability & Efficiency

Users should be able to iterate quickly and complete common tasks without repeated work. The Home page features real-time search and impact-level filter pills (All/High/Medium/Low) for rapid scanning of content. The Testing view supports reusable testing workflows through Test Actions (duplication, modification, removal) and Test Configurations (save and apply reusable setups).

We also included an auto-play demo mode for the terminal, reducing interaction cost for passive learning and presentation scenarios.

Accessibility & Inclusive Design

Users should be able to use the UI across themes, devices, and interaction modes (mouse/keyboard). Dark mode is a non-negotiable requirement, implemented system-wide through semantic colour tokens and theme variables in frontend/src/styles/theme.css, rather than one-off styling decisions.

Responsive design is built in from the start: a mobile header collapses to a hamburger menu and sheet under 768px, supporting usability across devices. This approach makes accessibility practical and maintainable, not an afterthought.

Design rationale: the interface was intentionally designed to feel educational, practical, and exploratory at the same time. Users should be able to move from “what is this?” to “how does it work?” to “how do I test it?” in a natural way, without leaving the system.

Initial Sketches

The initial sketches explored the core information architecture of the platform before any implementation began. At this stage, the emphasis was on layout, navigation, and how to present vulnerabilities, mitigations, and testing workflows in a way that would be understandable to both technical and semi-technical users.

The main goal of the initial sketches was to validate the broad structure of the application: a clear landing area, deep-dive content views, and separate spaces for practical testing and assistance.

Initial home page sketch — **Initial Home Sketch** - This page was designed as the main learning entry point, where users can understand what prompt injection is and build a clear overall picture through a visual, intuitive interface before moving to deeper technical views.

Initial vulnerability hand-drawn sketch — **Initial Vulnerabilities Sketch** - The vulnerabilities area was planned as a structured three-part flow where users could learn each vulnerability concept, test model behaviour, and then study mitigation strategies in a connected journey.

Refined Sketches

The refined sketches capture a clear design pivot from broad early concepts to focused user journeys. We prioritised helping users understand prompt injection faster on the Home page, using richer explanatory content and visual resources such as statistics.

We also restructured the Vulnerabilities area around an intuitive with-vs-without-mitigation behaviour comparison, and moved practical experimentation into a dedicated Testing workspace. This separation made the product goals clearer: learn concepts first, compare outcomes clearly, and run organised tests in a purpose-built environment.

Refined home sketch — **Refined Home Sketch** - We expanded the page with richer supporting content and additional resources, including statistics, so users can understand prompt injection concepts more quickly and with less cognitive effort.

Refined vulnerabilities sketch — **Refined Vulnerabilities Sketch** - We pivoted from running tests inside the vulnerability page to a clearer behaviour comparison view, showing model responses with and without mitigations. We also added more mitigation resources to make learning more visual and intuitive.

Refined mitigations sketch — **Refined Testing Sketch** - We designed a separate testing environment where users can easily choose mitigations in the center, evaluate model behavior on the right, and organize tests more clearly from the left panel.

Initial Prototype

In the initial prototype, we focused on making the panel structure easier to understand and simpler to navigate. Each major section used distinct color cues to improve intuitiveness and accessibility, helping users recognize context and purpose at a glance.

The goal of this version was to establish a clearer information hierarchy across views while keeping interactions approachable for both technical and semi-technical users.

Clarity First

Complex security concepts presented through clean, intuitive interfaces with clear visual hierarchy.

Guided Exploration

Users can navigate freely between vulnerabilities, mitigations, and testing tools with logical flow.

Accessible by Default

WCAG AA compliance, keyboard navigation, screen reader support, and high-contrast mode built in.

Initial prototype screenshots

Initial prototype Home view showing expandable vulnerability list — **Initial Prototype Screenshot 1** — In the Home view, vulnerabilities were presented more clearly as an expandable list, making navigation and first-pass understanding more straightforward.

Initial prototype Vulnerability view with colour-coded blocks — **Initial Prototype Screenshot 2** — In the Vulnerability view, we introduced colour coding to make behaviour differences and information blocks easier to interpret quickly.

Initial prototype Testing view with folders and analysis panel — **Initial Prototype Screenshot 3** — In the Testing view, tests were organized through clear folder structures, and an analysis panel was surfaced in a highly intuitive layout.

Prototype explanation

This version established the core route structure (Home, vulnerability detail, testing) and proved that colour cues and expandable lists could make dense security content approachable. It already supported browsing vulnerabilities and running tests in a single workspace, but deep mitigation resources, framework-assisted scans, and the full assistant workflow were not yet integrated or were ambiguous in the layout.

Prototype evaluation

The v0 prototype tested well for basic navigation and for understanding “where to click next,” but users still found the vulnerability view busy when learning and testing were combined. Folder-based test organisation helped power users yet felt heavy for coursework-scale demos. These findings motivated separating comparison-style learning from dedicated testing and tightening hierarchy before v1.

Refined Prototype

The refined prototype shows the improved interactive design after incorporating feedback from the earlier version. The interface became more coherent and more aligned with the final platform structure. Improvements include stronger hierarchy, better grouping of content, more explicit actions, clearer distinction between risks and mitigations, and smoother transitions between educational and practical workflows.

Refined prototype v1 Vulnerability comparison view — **Refined Prototype Screenshot 2** — v1 vulnerability view with clearer behaviour comparison and mitigation context.

Refined prototype v1 Testing workflow — **Refined Prototype Screenshot 3** — v1 testing workflow with clearer configuration and outputs.

Refinement explanation

Between v0 and v1 we reduced visual noise on primary screens, made mitigation and comparison panels easier to scan, and clarified how users move from reading about a vulnerability to configuring a test. Actions were grouped so that “learn,” “compare,” and “run” modes are predictable, which reduced wrong clicks in evaluation sessions.

Refinement evaluation

Positive: The theme worked well and made the interface feel more coherent across pages. Compared with the earlier version, reviewers noticed better spacing, clearer visual hierarchy, and less crowding in key panels, which made content easier to scan in short sessions. The page-to-page separation also felt more intuitive: users could more easily distinguish when they were in a learning context versus a testing context, reducing confusion and helping them complete tasks with fewer navigation mistakes.
Changes needed: The prototype still looked somewhat static in places, so we identified the need for a more dynamic and modern presentation style. We also needed to add dedicated pages for additional functionality, especially the Information Assistant and the Prompt Enhancer, so these workflows were not hidden inside overloaded views. In addition, important practical features such as PDF export needed stronger visibility in the interface to better support reporting and make the platform feel more complete for coursework and demonstration use cases.

Final UI

The final implemented UI is a React single-page application with dedicated routes for the major platform workflows. Rather than forcing every feature into one screen, the final design uses a task-oriented structure: the Home page introduces the problem and vulnerability catalogue, the Vulnerability view provides a deep technical breakdown, the Mitigations page focuses on defensive strategies and code, the Testing page supports practical experimentation, the Prompt Enhancer hardens prompts, and the Security Knowledge Assistant supports open-ended Q&A.

Final design process

The final UI reflects a progression from broad educational structure to task-specific views. The implemented frontend shows that the design prioritised modularity, with each route solving a distinct user need while still sharing a common visual system. This is important because the platform needs to support both learning and action: a user may begin by reading about a vulnerability, then move to mitigations, then run a test, then export a report, then ask the assistant for more help. We also introduced a dedicated dark mode to improve accessibility and visual comfort, making the interface more adaptable to different user preferences and usage environments.

Feedback reflected in the final structure

During the mid-stages of development, we received feedback from our TA that the interface felt too static and old-fashioned. In response, we pivoted to a more modern and dynamic visual direction based on widget-style components rather than heavy panel blocks, and refined the color system and overall styling to be clearer and less visually intrusive. This change improved both readability and perceived responsiveness while keeping the workflow structure intact.

What was added

Search and filtering on the Home page vulnerability catalogue.
A dedicated deep-dive vulnerability page with demo, comparison, mitigation links, and quiz.
A separate Mitigations page with implementation language switching and PDF export.
A large Testing view with guided setup, advanced setup, risk analysis, and framework scanning.
A dedicated Prompt Enhancer workflow.
A floating assistant widget plus a full-screen Security Knowledge Assistant page.
PDF export support across core learning and testing workflows.

What was reduced or separated

Vulnerabilities and mitigations are no longer merged into one overloaded screen.
Testing is isolated from static explanation pages so experimentation feels intentional.
Assistant functionality is available globally but can also expand into its own dedicated page.
Complex configuration is hidden inside the Testing workflow instead of cluttering the Home page.

Implemented views

Home

The Home page introduces prompt injection, presents a vulnerability catalogue, and supports search and impact filtering. It is designed as the main entry point for both first-time and returning users.

Home page in dark mode — **Dark mode** — Home view.

Mitigations

The Mitigations page separates defensive content from attack content. Users can browse all mitigations, read what each one does, review its strategy and flow, switch between pseudo-code, Python, and Java implementations when available, and export a PDF.

Mitigations page in dark mode — **Dark mode** — Mitigations view.

Testing

The Testing page is the most complex workflow in the system. It supports creating and editing tests, using platform or external models, selecting one or more mitigations, switching between prompt and framework runners, running Garak scans, viewing attempt-by-attempt results, and exporting reports.

Testing page in dark mode — **Dark mode** — Testing view.

Prompt Enhancer

The Prompt Enhancer offers a dedicated workflow for selecting mitigations and strengthening a system prompt. It supports model selection, mitigation selection, input prompt editing, and a structured results area for the enhanced output.

Prompt Enhancer in dark mode — **Dark mode** — Prompt Enhancer view.

Security Knowledge Assistant

The assistant exists both as a floating chat widget and as a full-screen page for longer conversations. This dual design supports quick help without interrupting the main workflow, while still allowing deeper exploration when needed.

Security Knowledge Assistant in dark mode — **Dark mode** — Security Knowledge Assistant view.

Personas & User Needs

Our platform was intentionally designed to serve both technical and semi-technical users without forcing either group to navigate unnecessary complexity. We achieved this by structuring distinct workflows: learning, investigation, testing, and knowledge support, each with layered explanations that allow users at any experience level to engage at their comfort level. This modular approach lets users distinguish between essential information and advanced features, empowering them to focus on what matters to their role and goals.

Alignment with requirements

The Home page supports first-time understanding through explanation and catalogue browsing.
The Vulnerability view supports deeper technical investigation with examples and comparisons.
The Testing view supports practical experimentation and exportable outcomes.
The assistant supports theoretical and practical follow-up questions.
The Mitigations page supports users who want code-oriented defensive guidance.

Why personas mattered

A purely technical interface would have made the platform harder to use for semi-technical users, while a purely educational interface would not have satisfied advanced testing and report-oriented needs. The final structure therefore tries to support several levels of expertise without splitting the product into separate systems.

Accessibility

Accessibility was treated as a core requirement from the start. The interface supports keyboard navigation with visible focus indicators, responsive design across mobile and desktop, system-wide dark mode, semantic colour coding (red for vulnerabilities, green for mitigations, orange for actions), and a clear information hierarchy that remains scannable across all page sizes.

Keyboard Navigation

All interactive elements accessible via keyboard with visible focus indicators and logical tab order.

Responsive Design

Fully responsive layouts tested across mobile, tablet, and desktop viewport sizes.

Colour & Contrast

Colour is never the sole indicator of meaning; all text meets WCAG AA contrast ratios.

Screen Reader Support

Semantic HTML, ARIA labels, and meaningful alt text for full screen reader compatibility.

Outcome: the final UI is understandable, navigable, and readable under different user needs and viewport sizes while supporting advanced technical workflows.