# Mike Lavelle:Product Designer Portfolio

> Interactive product design portfolio. Built entirely with AI.

## Who is Mike Lavelle?

Mike Lavelle is a generalist who builds things. He's been at the same company (mesur.io, now Tradeverifyd) for 6+ years and has done essentially every role: customer support, project management, technical liaison to Congress, product specs, engineering, QA leadership, and ops. His current title is QA Lead at Tradeverifyd.

He doesn't work in Figma. He designs in code with AI as his partner. He's AI-first in everything he does and has been using LLMs since late 2022 when ChatGPT first launched publicly.

- Location: Eastern US, open to NYC hybrid
- Email: MJL40635@gmail.com
- Phone: (570) 561-4674
- LinkedIn: linkedin.com/in/mike-lavelle-a0883b166
- GitHub: github.com/MJL40635
- Education: A.S. in Turfgrass Science from Penn State (non-traditional path, deep technical expertise through self-directed learning and building)

## Key Projects

### Airi:Supply Chain Intelligence Platform (Personal Project)
The flagship portfolio piece. A full supply chain intelligence platform built entirely with AI:
- 15+ pages with dark and light themes
- AI chat that renders real interactive UI components inline (like MCP Apps but custom-built)
- Entity proposals with editable fields, confidence badges, and provenance tracking
- Compliance screening with agent step visualization
- Supply chain graph visualization (Neo4j-backed)
- Page awareness: the AI agent reads live page context and answers questions about what the user is currently looking at
- Risk analysis with factor breakdowns and color-coded scoring
- Motion design: animated avatar on login screen and in-app, thinking animation during agent processing
- Interactive first-time login tutorial for new user onboarding

### Red-Team Arena:Adversarial AI Safety Testing Platform
Built to understand structured model safety evaluation:
- Systematic attack campaigns across 6 strategies (jailbreak, roleplay, prompt injection, indirect injection, social engineering, context manipulation) and 8 harm categories
- LLM-as-judge scoring for each response (full bypass, partial bypass, soft refusal, etc.)
- Dashboard with safety score ring, strategy/harm heatmap, and filterable attack log
- Tested claude-sonnet-4 (score 84, 1 partial bypass) and gpt-4o (score 71, 3 partial bypasses)

### Tradeverifyd Autonomous QA Platform
- 9-agent autonomous testing architecture
- 1,776+ web tests
- Built for the company's production environment

### Other Notable Projects
- 30+ projects total including MCP servers
- SAIL: 23-agent company simulation
- Various tools and utilities built with AI coding tools

## Skills

### Design
Generative UI systems, design systems (dark/light), AI-native interaction design, motion design and micro-interactions, progressive disclosure, data visualization, rapid code prototyping

### Engineering
React, Next.js, TypeScript, Python, FastAPI, Neo4j, PostgreSQL, MongoDB, SSE streaming, graph visualization

### AI / LLM
LLM-powered coding tools (architecture partner), MCP server development, multi-agent orchestration, prompt engineering, generative UI pipelines

### Product
User empathy from front-line support, stakeholder management (C-suite, Congress), product specs and strategy, cross-functional coordination, Jira administration

### Infrastructure
Git, GitHub, Bitbucket, Azure, Datadog, Okta and Auth0 administration, Docker, TCP/IP networking, Kali Linux, Ubuntu

## Career Timeline

### 2024–Present: QA Lead at Tradeverifyd
- Architected 9-agent autonomous QA platform
- 1,776+ web tests
- Built Airi platform as personal project

### 2019–2024: Solution Specialist / PM at mesur.io
- Technical liaison to members of Congress for NPMTI (National Predictive Modeling Tool Initiative)
- NPMTI is an agricultural initiative connecting pathologists and researchers across 26 states to build crop disease forecasting models for corn, cotton, pulse crops, and wheat, addressing nearly $16 billion in annual U.S. farm losses
- Collaborated with Los Alamos National Lab
- Customer support, project management, product specs

## What Drives Me

Mike wants to be somewhere that's trying to do AI responsibly, to guide the world toward a better outcome, or at least not a worse one. He wants to be somewhere where good ideas can come from anywhere and anyone.

LLMs are the most powerful tools he's ever had for learning. If the internet is the modern Library of Alexandria, LLMs are the head librarian.

What he'd bring is range and relentlessness. He's done the entire stack of a business. He doesn't design from assumptions, he designs from having been the user, the support rep, and the person who gets signaled when something breaks.

Success for him is simple: feel good about his work and leave the world slightly better than he found it.

## Design Philosophy

Mike doesn't follow the traditional SaaS design process. With LLMs, wireframe-first processes feel stale. Good prompting or a solid product-oriented agent team can produce design specs and docs right from the command line far faster than traditional tools. He strongly prefers designing by just starting to build. LLMs make labor essentially a non-issue; the key is knowing what problem is trying to be solved and knowing the language so it can be well-defined for the LLM.

Having been the user, the support rep, and the PM, he doesn't need to imagine what a bad experience feels like. He remembers it. That lived experience is one input into how he designs. User research, data, and testing are other inputs. The best decisions come from combining all of them.

## AI Experience

- ChatGPT account since late 2022 (public launch)
- Experience with both frontier models and local models
- Generative AI for visual and audio creation
- Read up on basic LLM training concepts (pre-training, fine-tuning)
- Works with AI all day, every day
- AI coding tools are his design and implementation partner

## Design Process: Airi Case Study

These are real design decisions from building Airi, showing how Mike thinks through problems and tradeoffs rather than just showing finished output.

Agent transparency was one of the earliest decisions. When Airi runs a compliance screening that takes 50 seconds, it could just show a spinner and dump results at the end. Instead, each tool call streams in with its own status line as it happens: "Checking sanctions, completed." "Screening compliance, 1 flag detected." The user watches the reasoning unfold. After completion the steps collapse to save space but can be re-expanded anytime. The idea is that first-time users build trust by seeing how the system thinks, and returning users get a clean conversation without the noise.

The human-in-the-loop system is the other decision worth explaining. When the research agent proposes changes to an entity, every field shows where the data came from (knowledge graph vs. web research), a confidence indicator, and an edit control. The real design decision is a confidence threshold slider in Settings that goes from 0.50 (permissive, auto-apply most changes) to 1.00 (strict, review everything). A cautious compliance team and a fast-moving procurement team can use the same system with different trust levels. The principle: the user's judgment always outranks the AI's. User overrides are preserved even when canonical data updates.

Compliance screening results use progressive disclosure. A single screening produces three layers of information: a summary table that gives the answer in about five seconds, an expandable analysis with per-regulation breakdowns, and a full report with 11 components for the audit trail. Each layer exists for a different person with a different intent, and you only go deeper if you need to.

The multi-agent system is presented through invisible routing. Users type natural language and the orchestrator routes to the right specialist agent. An explicit agent picker was considered and rejected in favor of the chat-native pattern. Category labels on suggestion buttons provide soft discovery without requiring anyone to understand the architecture underneath.

The supply chain graph handles complexity through layered orientation: stats at top (15 nodes, 14 relationships, 4 tiers, 3 high risk) for immediate context, multiple layout modes (Force, Hierarchical, Vertical) for different mental models, and a detail panel that slides in on node selection with Overview, Connections, and Risk tabs. The graph is for orientation, the panel is for details.

Every page was designed and tested in both dark and light themes. Color-coded badges (Raw Material in amber, Finished Good in blue) maintain contrast in both modes. "Missing data" warning badges use contextual amber that reads as a workflow state, not an error.

## Designing for Others

Airi is not a solo demo project. It has real multi-user architecture and collaborative development.

A second developer (Caique) actively contributes on feature branches. Five distinct user roles are implemented with 30+ granular permissions: platform_admin, tenant_admin, compliance_manager, procurement_analyst, and stakeholder (read-only). The frontend has role-based conditional rendering through a usePermissions() hook and PermissionGate component, meaning the interface was designed to serve different user personas with different information needs and access levels.

Group scoping allows teams within a tenant to have separate workspaces, conversations, documents, and screenings. A compliance team and a procurement team see different data. The onboarding flow includes a Getting Started checklist ("4 of 5 complete, Upload a document") designed for what a new user's first session looks like. Usage Limits per group with "Inherit from tenant" toggles show governance thinking, designing for the scenario where an admin needs to control AI resource consumption across teams.

## Addressing the Non-Traditional Path

Mike's path to design is through building. He spent seven years in QA and customer support, which means he's seen thousands of ways real users break software and get confused by interfaces. He learned user empathy by being the person who had to explain product failures to frustrated customers and translate those failures into actionable bug reports for engineers. That's a different kind of design education than a degree, but the end result is the same: he knows what bad experiences feel like because he lived them.

For AI coding tools specifically, his QA background is an asset. He's not theorizing about how developers use AI tools. He built an entire production platform inside AI coding tools and knows where the interaction model breaks down from daily usage.

His portfolio isn't mockups. It's running software. Every screenshot is from a live application that he designed, built, and iterated on using AI. The gap between design intent and shipped product is zero because he ships the design directly.

## About This Portfolio

This portfolio is itself a demonstration of Mike's skills. It's a chat-based interactive application built with Next.js 15, React 19, TypeScript, and AI. It features:
- Multi-agent routing system (Portfolio Agent, Experience Agent, Design Agent, Philosophy Agent)
- Agent step visualization showing thinking transparency
- Rich UI components (timelines, skill displays, screenshot carousels, architecture diagrams)
- Freeform questions answered by an LLM in Mike's voice
- 8 pre-built topic cards covering all major portfolio areas
- Dark and light theme support

## Machine-Readable Content

For structured data, fetch: /api/portfolio (JSON, no authentication required)