Independent Study · AI Product Design

Gear Advisor
Redesigning AI for Trust in High-Stakes Decisions

Designing an AI decision agent that acts as a neutral broker for users, solving trust deficits and cognitive overload in high-value equipment purchases
Timeline
Spring 2026
10 weeks
Tools
Figma
Claude
Vite.js
TypeScript
Deliverables
Survey flow
Dashboard
Browser plugin
Team
2 designers
+ 1 mentor
Overview

Project scope and team collaboration

MY ROLE
Alina Mao
Designer & Researcher
Product Design
Survey flow design, results page UX, visual design
Co-UX Research
User interviews, AI design principle, Affinity diagramming
Frontend Development
Survey implementation, AI integration, dashboard development
COLLABORATOR
Brinda Joshi
Designer & Researcher
UX Design
Plugin UX design & prototyping, E-commerce integration research
Co-UX Research
User interviews, persona development, usability testing
MENTOR
Jason Levine
AWS UX Lead
  • Product strategy guidance
  • Design critique & iteration feedback
The Challenge

Severe cognitive overload and trust deficit in ski equipment purchasing

When purchasing high-value, technically complex equipment like snowboards, users face three core challenges:

Information Overload: Complex technical parameters (Sidecut, Flex, Camber) are difficult for beginners to translate into actual riding experience.

Trust Gap: Retailers driven by inventory pressure make it hard for users to get truly neutral advice.

Decision Fatigue: High prices and long usage cycles (typically 7 years) make decisions stressful and high-stakes.

"Users aren't afraid of high prices—they're afraid of buying the wrong thing."
— Core insight from user interviews
6
In-depth user interviews
7yr
Average purchase cycle
3
Core user personas
User Research

From emotion to insight: behavioral psychology revealed through interviews

Through in-depth interviews with 6 skiers of varying skill levels (using Affinity Diagramming), we uncovered three core psychological patterns behind purchasing behavior:

Expert Ego vs. Safety Fear
Many users choose equipment beyond their ability level due to aesthetics or brand preference, creating safety hazards. Behind this behavior is a desire to "look expert" coupled with avoidance of confronting their true skill level.
Mathematical Permission
For beginners transitioning from rental to purchase, the biggest barrier isn't the total price—it's the lack of a clear "break-even point" to justify the investment. Users need to see concrete numerical comparisons to gain psychological permission to buy.
The 7-Year Communication Gap
Snowboard purchase cycles span 7 years, and traditional e-commerce models completely lose contact with users during non-purchase years. This means brands miss 6 years of relationship-building opportunities.

Three Core User Personas

Persona 01
Hesitant Outsider
The cautious observer — rides fewer than 5 days per year, primarily rents, hesitant about purchasing
  • Needs "mathematical permission" to justify purchase
  • Worried about buying wrong or overpaying
  • Lacks equipment knowledge, relies on others' advice
Persona 02
Informed Progressor
The advancing enthusiast — owns basic equipment, seeking upgrades that match skill progression
  • Values performance and technical fit
  • Willing to invest but needs expert guidance
  • Focuses on how equipment aids skill development
Persona 03
Aesthetic Motivator
The style-driven buyer — brand and appearance are primary purchase drivers, may overlook practical needs
  • Heavily influenced by brand image and design
  • May choose equipment beyond their ability
  • Needs balance between aesthetics and safety
Key Insight
Shared Pain Points Across Personas
Regardless of skill level, all users face trust deficits and cognitive burden from technical jargon
  • Cannot translate technical specs into felt experience
  • Distrust retailers with inventory pressure
  • Lack objective, neutral decision support
Design Solution

Designing AI behavior: from sales assistant to neutral broker

Our core strategy is transforming AI from a "sales assistant" into a "Neutral Broker". This isn't just about changing the UI—it's about fundamentally redefining AI's behavioral principles and reasoning logic.

Core Design Principles

Principle 01
Anti-Sycophancy
AI must be willing to say "no" to users. When the system identifies safety risks, AI must prioritize safety warnings over user compliance.
  • Prioritize survey results over user preference
  • Clearly flag risks and mismatches
  • Offer alternatives instead of simple rejection
Principle 02
Transparency
Every AI recommendation must cite sources (Truth Sources: PSIA-AASI Guide, OutdoorGearLab, Reddit), allowing users to trace the reasoning process.
  • Cite objective reviews (OutdoorGearLab)
  • Cite community feedback (Reddit)
  • Cite industry standards (PSIA-AASI)

AI Shopping Assistant Plugin

To validate the "Neutral Broker" concept in real shopping scenarios, we designed an AI plugin that integrates directly into e-commerce product pages. The plugin acts as a persistent decision companion, offering contextual guidance without disrupting the browsing experience.

Home / Snowboards / Burton Process
Burton Process
Burton Process Flying V
$549.95
★★★★★ 4.8 (127 reviews)
Select Size
150cm
153cm
156cm
159cm
162cm
Flex Rating: 5/10 (Medium)
Shape: Directional Twin
Best For: All-Mountain
Gear Advisor
JD
Your Profile
Intermediate · 165cm, 55kg · 10 days/year
Perfect Match
This board is well-suited for your profile. The medium flex (5/10) provides enough forgiveness for progression while maintaining responsiveness. At 156cm, it matches your height and weight perfectly.
OutdoorGearLab Review PSIA-AASI Standards
⚡
Note on terrain: This board excels on groomed runs and park features. If you ride primarily in deep powder, consider a directional shape instead.
Smart Investment
Based on 10 days/year, this board will pay for itself vs. renting in 1.5 seasons. Expected resale value after 3 years: ~$220.
AI plugin integrated into e-commerce — providing real-time guidance without disrupting shopping flow

Core Feature Logic

Feature 01
Assessment vs. Preference Separation
Logically enforce skill assessment based on industry standards (PSIA-AASI) first, then layer on user aesthetic preferences.
  • Assessment (hard constraint) — skill level evaluation
  • Preference (soft constraint) — brand and aesthetics
  • When conflicts arise, safety takes priority
Feature 02
Traceable Truth Sources
Establish a multi-dimensional "truth library" to ensure recommendation neutrality and objectivity.
  • Professional standards — PSIA-AASI manual
  • Objective reviews — OutdoorGearLab
  • Community voice — Reddit long-term feedback
  • Financial data — rental prices and resale value
Feature 03
Value Calculator
Help "Hesitant Outsiders" make purchase decisions through 3-year Total Cost of Ownership (TCO).
  • Formula: Purchase price + maintenance - resale value
  • Visualize break-even point
  • Provide "mathematical permission"
Feature 04
Product Breadth Strategy
Expand product range from boards to maintenance consumables, solving the 7-year cycle problem.
  • Tier 1 — Boards, boots (core decisions)
  • Tier 2 — Helmets, outerwear (essentials)
  • Tier 3 — Wax, tuning tools (retention)
  • Maintain contact during off-season with maintenance reminders
Design Process

From Kiro to Claude: technical evolution and methodology pivot

This project underwent a critical methodology pivot from pursuing a production product to focusing on experience prototypes. This shift allowed us to explore the essence of AI interaction more deeply.

Phase 01
User Research & Insight Extraction
Conducted in-depth interviews with 6 skiers, used Affinity Diagramming to extract core behavioral patterns, established three user personas.
Phase 02
Kiro Development: Logic Validation
Built AI behavioral steering system in Kiro using TypeScript, locked in core logic like Anti-Sycophancy and Truth Sources. Successfully validated feasibility of behavioral principles.
Phase 03
Methodology Pivot: Transition to Claude
Why pivot? Kiro's UI generation lacked flexibility for complex interaction details. We needed more intuitive visualization of "reasoning traces" and "guided conversation flows."
Phase 04
Claude + HTML: High-Fidelity Prototype
Used Claude to generate single-file HTML prototypes, focusing on frontend "transparency interaction" design. This enabled rapid iteration and shareable demos.
"This pivot allowed us to focus more on demonstrating 'AI intervention timing' and 'visual trust-building flows' without getting lost in underlying technical implementation complexity."
— Project retrospective reflection
Design Iterations

From feedback to refinement: evolving the plugin experience

During our final mentor review with Jason Levine (AWS UX Lead), we received critical feedback that fundamentally reshaped how our plugin integrates with e-commerce sites. This iteration demonstrates how external perspective can reveal blind spots in our design logic.

Initial Design Issue

Plugin showed recommendations without context

Our first iteration displayed recommended boards immediately when the plugin opened — essentially a "sock drawer" of alternatives disconnected from what the user was currently viewing.

Before Plugin Interface
"I would have expected it to say: this is a good buy... but it's not the best match for your skill level. That way it stays contextual, and you can simply have 'similar boards you may like' appear above."
— Jason Levine, AWS UX Lead (Mentor feedback, March 23, 2026)
Key Design Principle: Contextual Over Convenient

The plugin should evaluate what the user is currently looking at before suggesting alternatives. This maintains continuity with their browsing journey rather than disrupting it with a disconnected list.

Refined Design

Evaluate current board first, then suggest alternatives

The plugin now opens with an evaluation of the board the user is viewing — validating or questioning the match based on their profile — before showing alternatives.

What changed and why

Information Hierarchy
Before: Recommendations first
After: Current board evaluation first, recommendations second
User Mental Model
Before: "Here are better options"
After: "Let me help you evaluate this choice"
Trust Building
Before: Interrupts with sales pitch
After: Validates user's research process
Reflection: Design happens in conversation

This iteration taught us that even with thorough user research, external critique reveals assumptions we don't see ourselves. Jason's feedback wasn't just about UI placement — it was about respecting the user's browsing context and building trust through relevant evaluation rather than premature recommendation.

Learning Journey

From design-only to full-stack prototype: learning to code AI behavior

This project required learning coding from scratch while simultaneously designing AI interaction patterns. What started as "we'll just use Figma" evolved into building functional prototypes with real API integration.

Week 1-2
Figma → Reality Check
The Problem: Figma prototypes couldn't demonstrate AI reasoning traces or dynamic conversation flows. We needed actual behavior, not just UI mockups.

The Pivot: Jason introduced us to Kiro — a tool that generates UI from AI prompts. This meant learning TypeScript.
Week 3-5
Kiro + TypeScript: Logic Validation
What we learned: How to write conditional logic for AI behavior (Anti-Sycophancy rules, Truth Source hierarchy, assessment vs. preference separation).

The Challenge: Kiro's auto-generated UI lacked the visual polish and interaction details we needed for a portfolio piece.
Week 6-8
Claude + HTML: High-Fidelity Prototyping
The Breakthrough: Using Claude to generate single-file HTML prototypes let us control every visual detail while maintaining functional AI integration.

What we built: A survey flow with real Claude API calls, a dashboard with live recommendations, and a browser plugin mockup — all from scratch.
Week 9-10
Refinement & Demo Production
The Reality: File size limits forced us to split the experience across multiple HTML files. Debugging JavaScript errors became a daily ritual.

The Win: We shipped a recordable demo with scripted AI responses for reliable presentation.

Tool exploration: what we tried and why we switched

Our technical journey involved exploring different tools for design, prototyping, and development. Each served a specific purpose in our workflow.

🎨
Figma
Style exploration & design system
Built visual design system, color palette, typography. Created initial UI mockups but couldn't demonstrate AI behavior.
🔧
Figma Make
Plugin design & demo flows
Used for browser plugin design and scripting demo user flows. Helped visualize e-commerce integration.
⚡
Kiro
AI logic validation
Validated AI behavior rules using TypeScript. Proved Anti-Sycophancy and Truth Source logic worked, but UI was too rigid.
⚙️
Vite.js
First product demo
Migrated Kiro product logic to Vite.js for more control. Built first functional demo with React + TypeScript.
✨
Claude
Final solution
Generated polished HTML/CSS/JS prototypes with full visual control + real API integration. Perfect for portfolio demos.
Complete Workflow
Figma → Design System + Figma Make → Plugin UI → Kiro → AI Logic → Vite.js → First Demo → Claude → Final Product

From code to interface: development process

📸 Kiro/TypeScript Code
AI behavior logic implementation
📸 Claude Prompt + Output
HTML/CSS/JS generation process
What this taught us about AI-assisted design
  • AI tools are method-agnostic: The same behavioral logic worked in TypeScript (Kiro) and plain JavaScript (Claude). The principles transfer.
  • Prototyping speed matters: Claude's ability to generate full HTML files in seconds let us iterate 10x faster than hand-coding.
  • Code literacy enables better design: Understanding conditional logic helped us design smarter AI behavior rules (like "assessment before preference").
  • Tools have trade-offs: Kiro = fast logic validation but rigid UI. Claude = full control but requires HTML knowledge. Choose based on project phase.
Technical Implementation

Building AI behavior architecture: from principles to code

Designing a neutral AI advisor isn't just a UX challenge — it requires translating behavioral rules into executable logic. We used a two-phase approach: first defining how the AI should think, then building it in code.

Technology stack

Claude API (Sonnet 3.5)
React + TypeScript
Vite.js
Kiro (AI Dev Tool)
StackBlitz
Chrome Extension API
01

Phase 1 — Defining AI behavior with Kiro

Before writing any UI code, we documented the AI's rules as structured Markdown specifications

Kiro steering files — AI behavior specification documents
bahavior_logic.md
Defined the AI's core personality: it MUST show honest cons, MUST cite sources, and CANNOT recommend gear beyond a user's physical skill limits — regardless of what they prefer.
structure.md + tech.md
Established the project's folder architecture and technology decisions before coding began — so every developer (human or AI) operates on the same mental model.
Why Markdown specs first? Think of it like writing a recipe before cooking. If you start coding without a spec, you'll improvise and forget rules. The specs are the AI's recipe for how to behave.
02

Phase 2 — Encoding business logic as mathematical rules

The 3-Year Value Calculator isn't a guess — it runs a defined algorithm documented before any UI existed

The Break-Even Formula
Rental cost = $R × days × 3 years
Own cost = $P + ($75/yr maintenance)
           − (18% depreciation × 3)
→ "Aha Day" = when owning wins
Anti-Salesmanship constraint: The calculator is explicitly forbidden from hiding maintenance costs or depreciation — it must show the full honest picture, even if that means recommending continued rental.
financial_logic.md — break-even algorithm specification
03

Phase 3 — From specs to working code

The behavior specs became TypeScript interfaces — every rule in the docs maps directly to a type constraint in code

StackBlitz — React TypeScript implementation of AI behavior types
TypeScript Interfaces
Each equipment property defined in the spec became a typed field — flex: number, camberProfile: string. The compiler enforces the rules.
StackBlitz Prototyping
Built and tested entirely in the browser — no local setup required. The "Created by @alinamao" badge on the forked Vite template shows direct ownership of the prototype.
Vite Build System
Vite gives instant reload during development — see changes in milliseconds. The terminal shows 7 dependencies resolved and running in 2.9 seconds.

Core AI behavior rules

1
Anti-Sycophancy Guard
The AI is forbidden from recommending gear that is technically unsafe for the user's inferred skill level — even if that's what they ask for.
if (gear.requiredSkill > user.assessedSkill) {
  return REFUSE + redirect_to_professional()
}
2
Truth Source Hierarchy
Recommendations must cite verifiable sources, ranked by authority level.
source_priority = [
  "PSIA-AASI standards", // Professional
  "OutdoorGearLab", // Expert
  "Reddit r/snowboarding" // Community
]
3
Assessment Before Preference
Skill-based requirements (hard constraints) always run before aesthetic preferences (soft constraints).
results = filter_by_skill(all_boards, user.skill)
          .then(filter_by_preference(user.style))
// Safety first, aesthetics second
Integration challenges we solved
⚡ API Response Time
Claude API responses take 2–5 seconds. Solution: Show typing indicators and pre-load common queries.
📦 File Size Limits
Single HTML exceeded 10MB with embedded images. Solution: Split into survey + dashboard files with iframe bridging.
🔄 State Management
User data must persist across survey → results. Solution: localStorage for session state across page transitions.
Impact & Learnings

Key Achievements & Future Directions

Core Achievements

01. Behavioral Design System

Established a complete AI behavioral steering framework, including Anti-Sycophancy, Assessment vs. Preference separation, and Truth Sources. This system is transferable to other high-value decision scenarios.

02. Transparency Interaction Pattern

Designed visualization for "reasoning traces," making AI decision processes visible and traceable to users. This is key to building trust.

03. Business Model Innovation

Proposed "Neutral Broker" model, solving the 7-year cycle retention problem through Tier 3 products (consumables/maintenance), providing a new commercialization path for AI-assisted decision products.

04. Methodology Documentation

Documented the complete design process, including all AI-assisted design prompts, providing a unique "designing AI behavior" case for portfolio.

Key Learnings

Design AI behavior, not just interfaces
True AI product design isn't about adding a chat box to existing interfaces—it's about fundamentally defining AI's "personality," "boundaries," and "reasoning approach." This requires UX designers to have systems thinking and logic modeling capabilities.
Tool selection should serve goals, not vice versa
The Kiro-to-Claude pivot proves: when tools limit your design exploration space, boldly switch tools. The purpose of prototypes is validating ideas, not perfect implementation.
Trust is the core currency in high-value decisions
In high-price, low-frequency purchase scenarios, traditional "conversion optimization" fails. Users need a trusted advisor, not an efficient sales machine.

Future Directions

Next Step 01
Real AI Integration
Upgrade prototype to working demo, connecting Anthropic API for real AI conversation and reasoning trace generation.
Next Step 02
User Testing Validation
Recruit real skiers for usability testing to validate whether "reasoning trace" presentation truly builds trust.
Next Step 03
Cross-Category Expansion
Apply this AI behavioral design system to other high-value decision scenarios (cameras, bicycles) to validate transferability.
Next Step 04
Commercialization Path Exploration
Partner with equipment brands or retailers to explore commercial viability and revenue models for the "Neutral Broker" approach.