Miracle
Miracle is a cybersecurity platform used by security teams to investigate suspicious files and hashes, analyze potential malware, and review technical findings through generated reports and agent supported insights.
Due to confidentiality, the project and client names are anonymized throughout this case study.
From redesigning to redefining the platform
What began as a redesign of a single-file analysis experience evolved into a broader product challenge: restructuring the platform to support investigation chains, related files, and dense technical data at scale.
I worked on the platform’s UX, architecture, main flows, screen layouts, UI design, reusable components, edge cases, and interaction states.
Understanding the core flow
User goal: submit a suspicious file or hash, review the generated results, and continue the investigation with agent support when needed.
The existing design needed to adapt
At this stage, my focus was to prioritize file-level data and reduce cognitive load by highlighting the next relevant action in the flow.
This reduced back-and-forth scanning, helped users locate key information faster, and improved investigation efficiency.
As the platform evolved toward a more complex investigation workflow, the existing design needed to adapt.
Supporting a broader investigation model
A single submitted file could reveal related or extracted files, creating a chain of files that each required analysis and review.
Users now had to move between files, understand their relationships, track analysis progress, and review file-level findings without losing context.
Adapting the Design Under a Short Deadline
To respond quickly, I used an AI-assisted workflow that helped me move from rough product input to screen exploration, client validation, and Figma refinement.
Making sense of the update
Clarified the change - I approached the client to understand what changed, why it changed, the main priorities, and the project deadline.
Reviewed product impact - I worked with the developer to understand how the update affected existing flows, data, screens, and technical limitations.
Defined design implications - I mapped what needed to change across the user journey, information architecture, navigation, and UI structure.
**A sketch the client provided.
AI prompt setup
The PM and developer provided an updated product brief and API surface based on my request.
Then, I created a detailed Claude prompt to explore updated screen layouts and attached the platform screens, design library, product brief, and API surface for context.
Fast screen exploration
Claude generated updated screens and suggested new product areas reflected in the updated API, such as agent configuration, YARA rules, and dashboards.
Finding the right structure - hi-fi wireframes
I began with low-fidelity wireframes, exploring different layout options before refining them into a polished structure. Throughout the process, I focused on clear content hierarchy and prioritizing the most relevant actions on each screen to create a smoother, more intuitive flow.
After client validation
Figma MCP Drafting
& Manual Refinement
I connected Claude Code to Figma to speed up the first high-fidelity drafts of the new screens.
Then, I refined the details manually, fixing issues like unnecessary tags, duplicated content, button behavior, hierarchy, colors, and missing components.
Claude in figma drafting :
After manual refinement :
My UX decisions
Persistent file tree
Provides a stable view of file relationships throughout the investigation, helping users understand which file they are viewing and how it connects to the full chain.
File-level tabs
Separates complex technical information into focused sections, reducing cognitive load and helping users review one aspect at a time, and locate information more quickly.
Content specific presentation
Different information types were displayed in the format that best supported understanding - tables for structured data, status badges for progress and results, text sections for explanations, and diagrams for relationships or process logic.
View Previous Analysis
Split analyses into Past and Active for clearer task context
Added search, sorting, and pagination for faster table navigation
Added key tracking data like duration, price, and user
Useful filters into a clearer panel, making filtering easier to manage
Chat With Agent
Kept the horizontal layout to maximize report space and improve scanning
Designed the layout to scale with multiple chats, long reports, and deeper investigation paths
Earlier chat layout exploration:
Additional dedicated product areas:
YARA Rules
For creating, editing, managing, and exporting detection rules used in file investigation.
Agent Configuration
For managing agent workflows, templates, and skills that guide how the platform analyzes and responds to investigation tasks.
Scalable structure
While redesigning, I focused on creating a reusable structure that could support different file states, changing analysis progress, missing data, long reports, and future product growth.
Structured for handoff
The final Figma file was organized by the platform’s screens and product areas, with connected flows that gave the developer clear context for its behavior across actions, states, edge cases, and navigation.
A quick look - Before & After
Home - Submitting a sample
File analysis
Chat with agent
All analysis
