Signal — AI Trust Layer for Social Media

Workflow

From product definition to prototype

The process was organized to keep strategy, exploration, and UI execution connected. Product definition established the problem space, early sketching opened up directions quickly, and the later wireframe and prototype phases focused on refining how trust signals appear, how onboarding reduces uncertainty, and how the control center helps people understand what Signal is doing over time.

Phase 01

Product definition in FigJam

The first step was clarifying what Signal actually is: an AI trust layer for social media, not a replacement social app. This phase defined the audience, core value proposition, likely user concerns, and the relationship between passive detection, lightweight education, and user-controlled settings.

• Defined the product as a background layer that works across existing platforms.
• Framed privacy and control as primary trust builders, not secondary features.
• Separated the experience into feed detection, onboarding, and control center surfaces.

Key design principle

Trust tools need to feel clear, private, and calm. The product direction avoided alarm-heavy UX and focused instead on readable signals, confidence indicators, and simple review paths.

Phase 02

Sketch phase: notebook first, AI comparison second

I began with notebook sketches to quickly map layout hierarchy, content grouping, and how a trust layer might appear on top of a social feed. After that, I explored AI-generated sketch directions to compare where prompting could speed up iteration and where manual sketching still produced stronger structure or clearer intent.

• Manual sketches helped define product logic and task flow.
• AI-generated sketch exploration was used as a comparison tool, not a replacement for design judgment.
• The comparison revealed which ideas were worth carrying into wireframes and which needed simplification.

This comparison became part of the project story: the workflow intentionally tested both human-first ideation and AI-assisted concept generation within the same design challenge.

Manual sketches

Focused on flow, hierarchy, and simplifying interactions before moving into digital design.

AI-generated sketches

Used to rapidly explore alternative layouts and challenge initial assumptions.

What manual sketching was best for

Clarifying user flow, deciding what appears first, and reducing unnecessary UI before committing to digital frames.

What AI exploration was best for

Opening alternate layout directions fast, pressure-testing assumptions, and generating additional visual variations for review.

Phase 03

Low-fidelity wireframes

The low-fi stage focused on structure and task flow. At this point the goal was not visual polish, but making sure each product area did one job well: detect in context, onboard with clarity, and summarize activity in the control center.

• Mapped a feed-level trust badge and flag state for in-context review.
• Simplified onboarding into quick, confidence-building steps.
• Defined the control center as a destination for trends, history, and settings rather than a dense dashboard.

Low-fi priorities

• Clear information hierarchy
• Short onboarding path
• Repeatable navigation across app sections

These wireframes were used to validate structure and hierarchy first, making sure each surface had a clear job before moving into visual design.

Phase 04

High-fidelity wireframes

Once the architecture felt solid, the high-fi phase translated the system into a stronger point of view. The UI adopted a dark, neon-accented visual language to reinforce ideas of scanning, signal strength, and technical confidence while still keeping the interface legible and mobile-friendly.

• Used color intentionally to communicate confidence, status, and category.
• Introduced a visual system consistent across onboarding, history, insights, and settings.
• Balanced high-tech aesthetics with readable spacing, card structure, and focused content density.

Visual language

Blue-to-purple gradients, neon outlines, and dark surfaces helped connect the product metaphor of scanning and signal analysis without making the UI feel chaotic.

Phase 05

Prototype in Figma and Figma Make

The prototype phase focused on flow clarity and interaction continuity. Parts of the system were refined in Figma, while other directions were accelerated through Figma Make to test how quickly the experience could be assembled, refined, and communicated as a more complete narrative.

• Connected the onboarding path to the control center.
• Demonstrated how users move from setup into live monitoring and review.
• Used prototyping to validate transitions, section relationships, and perceived completeness.

Prototype outcome

The final experience reads as a connected product, not isolated mockups: users can understand what Signal does, choose where it works, and review detections in one coherent flow.

Onboarding layer

Build trust before asking people to enable the product

The onboarding flow was designed to reduce skepticism and explain value before asking users to change any settings. The sequence introduces what Signal does, reinforces that analysis stays private and on-device, then lets people choose where the trust layer should appear.

UI evaluation

What makes the final UI feel cohesive