Modernizing user behavior targeting.

To recreate the web app's screens and user flows using design best practices, I started with raw wireframes. They helped to outline the arrangement of the elements on the future interface.

Later, raw sketches turned into high-fidelity wireframes, a series of thought-through screens that illustrate each element and the connections between them. After the concept got approved by the stakeholders team, i proceeded to the visual direction.

The visual layer applies the Unica design system I built, so Detect stopped looking like an outlier and started looking like part of the suite. Dense data views were reorganized around the marketer's questions: what is running, what is working, what needs attention.

The biggest barrier was segment creation: users had to translate marketing intent into technical criteria. The redesign lets a marketer type intent in plain language ("users who search iPhone 18 on browser"), and AI parses it into real, editable segment suggestions.

Design challenges I had to solve: making AI output trustworthy (always show the underlying criteria, never a black box), keeping the user in control (suggestions are editable, not auto-applied), and handling failure gracefully (when AI is unsure, it asks instead of guessing).

This pattern also became the reference for AI-assisted flows in other Unica products.

The rule builder is the heart of Detect. It is where a marketer defines the logic: who to watch, what behavior to catch, and what should happen next. It is also where the old product lost people. Rules were written in dense, technical rows that looked more like a database query than a marketing tool.

I designed two different rule builders and put them in front of users, because the team was split on what "simpler" actually meant.

Complex rules are not lists, they are trees. So the this version draws the rule as a visual map: the audience at the center, branches for each condition group. Marketers can see the whole logic at a glance, drag branches to restructure, and spot dead or conflicting paths that were invisible in row form.

For places other than full screen canvas we needed linear rule builder. We had one but it was difficult to scan and understand, especially when creating complex nested conditions. I redesigned the experience to improve clarity, scalability, and usability.

Key Improvements

• checkImproved visual hierarchy with grouped conditions.
• checkIntroduced clear AND/OR containers for better logic understanding.
• checkReduced visual clutter using a cleaner, card-based layout.
• checkMade actions more contextual and easier to discover.
• checkEnhanced readability with consistent spacing and alignment.
• checkDesigned a scalable structure for complex rule combinations.

Simple rules were faster in the structured builder. Complex rules were dramatically easier to understand in the mindmap. The insight was that these are not competing designs but two views of the same rule, one for writing quickly for smaller places and one for understanding deeply for larger spaces. That framing settled the internal debate and shaped the direction of the final product.

This was also my favorite kind of design problem: not polishing one answer, but building two honest alternatives and letting real usage decide.

To support the redesign, we built a flexible and scalable design system:

• checkReusable components across tools
• checkUnified styles and grids
• checkMicro-interactions for clarity (e.g., hover states, loaders)
• checkAnimations for onboarding & feedback