Designing how AI and designers collaborate to build products

Role

Design Lead
Design Engineer

Time

2026-present

Impacts

Vicino moved fast with AI, but the early prototype lacked the structure needed to scale.

I helped turn fragmented screens, generic AI interactions, and one-off implementation into a more coherent product foundation.

Context

What I led

AI could generate marketing content in seconds—but fast output alone didn’t give marketers the structure, context, or control needed to run real campaigns. I led the end-to-end product experience—from product architecture and onboarding to core workflows and the design system behind them.

Learn

Turn Scattered Brand Signals Into Context.

Vicino learns from your brand, audience, goals, and existing content—building the context it needs to make more relevant decisions.

Create

Turn Strategy Into Campaigns.

Vicino turns strategy into actionable campaigns, generating on-brand content and coordinating what to create, where to publish, and when.

Learn

Turn performance into the next move.

Vicino connects performance back to strategy, identifying what worked and using those signals to recommend what to do next.

How I work?

90%+ of our design explorations lived in code.

Small team. Functional HTML prototypes. Real interactions from day one.

Designing the Experience

AI could generate. But generation alone wasn’t enough.

Early explorations revealed three challenges: the experience felt fragmented across disconnected features, the AI produced generic outputs without enough brand context, and users had too little visibility and control over what happened next.

These became the three problems we designed around:

Fragmented workflow · Missing context · Limited control

Map the workflow

Journey mapping → Product structure

I mapped the end-to-end marketing journey to identify how context, strategy, creation, and learning should connect—shaping the product around one continuous workflow.
End-to-end marketing journey map

Test what AI needs

Controlled experiments → Context model

I ran controlled experiments to understand which inputs meaningfully improved AI output, then used those findings to shape how Vicino gathers context and guides users through the experience.
Controlled AI input experiments

Design Engineering

From Fragmented Prototypes to a Shared Foundation

The team explored the product across different design and AI prototyping tools.

As design lead, I helped align these separate outputs around shared interface patterns, design rules, and a more consistent product structure.

Image comparison slider. Before: Earlier Vicino prototype interface. After: Redesigned Vicino product interface. Drag or use arrow keys to compare.
Redesigned Vicino product interface

Slide to view the before-and-after difference.

System Consistency

Similar Screens Were Not Yet One System

The prototypes looked visually related, but repeated patterns used different structures, states, and implementation logic.

We began consolidating these decisions into reusable components and shared conventions.

Looked consistent

risk
status
Different structureDifferent statesOne-off styling

Built as a system

Header
Content
Status
Action
Shared CardShared ButtonShared StatusShared Interaction

Visual similarity was not enough. The structure had to become reusable.

AI-Readable Design

We Taught AI How We Design

Prompting AI from scratch produced fast but inconsistent results.

I helped translate our visual principles, component patterns, and layout rules into reusable guidance that AI tools could follow.

Design rules translated into AI-readable guidance

Design System

From One-Off Generation to Reusable Patterns

Instead of treating every AI-generated screen as a new design, we identified recurring patterns across chat, reports, cards, and navigation.

These patterns gave future workflows a more consistent starting point.

Chat message

Report section

Recommendation card

Navigation item

Identify
Normalize
Componentize

Chat/

Structure

States

Usage

Report/

Structure

States

Usage

Card/

Structure

States

Usage

Navigation/

Structure

States

Usage

Applied to

OnboardingStrategyCampaignsAnalytics

Recurring product decisions became reusable starting points.

Coded Prototypes

90%+ HTML. 60%+ Faster.

We moved most design exploration from static frames into functional prototypes, making interactions, responsive behavior, and real product states testable much earlier.

My Role

Setting Direction While Working Hands-On

As design lead, I connected product design, shared system decisions, and implementation-aware prototyping.

I set the quality direction, reviewed work across the team, and contributed directly to the core product experience and design foundation.

Inputs

Product vision

Founder feedback

Engineering constraints

Design Lead

Set Direction
Work Hands-On
FoundersDesign TeamEngineering

Outputs

Product model

Design standards

Core workflows

Reusable patterns

Prototype quality

Team loop

Define
Review
Align
Build

Connecting product direction, design quality, and implementation.

Design engineering

Designing with implementation in mind

Because the MVP was being built quickly, I translated design decisions into reusable frontend patterns instead of one-off screens. This helped reduce the gap between Figma and implementation.
MORE
PROJECTS
Mobile Promote
EOFLIX
EOFLIX