Audible FTUE Component Selection Tool

Overview

An interactive web-based tool that uses a weighted decision matrix to recommend optimal First-Time User Experience (FTUE) components from the Audible Mosaic Design System. Built based on the PRD specifications for standardizing component selection across Product Management, UX Design, and Product Marketing teams.

Features

🎯 Core Functionality

• Weighted Decision Matrix: Evaluates features across 5 criteria with configurable weights
• Progressive Disclosure: Guided wizard flow through evaluation questions
• Smart Recommendations: Algorithm recommends 1-2 components based on calculated score
• Auto-Save: Automatically saves progress to browser localStorage
• Score Visualization: Animated circular progress indicator and detailed breakdown

📊 Evaluation Criteria

1. Impact on User Retention (30% weight)
2. Time-to-Value Acceleration (30% weight)
3. Development Effort/Complexity (15% weight)
4. Cognitive Load/Friction (-10% negative weight)
5. Rock/Pebble/Sand Priority (20% weight)

🎨 Component Library

• Bottom Sheet (80-100 points): Rock features, strategic launches
• Coachmark (80-100 points): Critical workflow changes
• Feature Education Tile (60-79 points): Pebble features, persistent visibility
• Promotional Tile (40-59 points): Marketing campaigns, feature bundles
• Toast (20-59 points): Success states, brief announcements
• Tooltip (0-39 points): Sand features, contextual help

Quick Start

Option 1: Open Directly in Browser

1. Navigate to the tool directory:

   cd Cline/active-work/FTUE_Component_Selector_Tool

2. Open index.html in your web browser:

   • Mac: open index.html
   • Windows: start index.html
   • Linux: xdg-open index.html

Option 2: Use a Local Server (Recommended)

For best experience, use a local web server:

# Using Python 3
python3 -m http.server 8000

# Using Node.js (with http-server package)
npx http-server -p 8000

# Using PHP
php -S localhost:8000

Then open: http://localhost:8000

Usage Guide

Step 1: Landing Page

• Click "Start New Evaluation" to begin
• Or click "How It Works" for a quick overview

Step 2: Feature Information

Enter details about your feature:

• Feature Name (required): e.g., "Immersion Reading"
• JIRA Epic ID (optional): e.g., "FEAT-9772"
• Marketplaces (required): Select one or more (US, UK, DE, etc.)
• Platforms (required): Check applicable platforms (iOS, Android, Web, Fire OS)
• Launch Quarter (required): e.g., "Q2 2026"

Step 3: Criteria Evaluation

Answer 5 questions, one at a time:

• Read the criterion description and "Why this matters" info
• Select your score (1-5 scale)
• Click Next to proceed
• Use Back to revise previous answers

Step 4: Results

View your personalized recommendations:

• Final Score: 0-100 scale with visual indicator
• Score Breakdown: Contribution of each criterion
• Recommended Components: 1-2 components with rationale
• Component Cards: Detailed guidelines for each recommendation

Result Actions

• Refine Scores: Go back and adjust your answers
• Export to PDF: Generate shareable evaluation report (simulated)
• Start New Evaluation: Begin fresh assessment

Algorithm Details

Calculation Formula

Final Score = 
  (Retention × 0.30 × 20) + 
  (TTV × 0.30 × 20) + 
  (Development × 0.15 × 20) + 
  (Cognitive Load × -0.10 × 20) + 
  (Priority × 0.20 × 20)

Score Ranges

• 80-100: Rock tier → Bottom Sheet, Coachmark
• 60-79: Upper Pebble tier → Feature Education Tile, Bottom Sheet
• 40-59: Mid tier → Promotional Tile, Toast
• 20-39: Sand tier → Toast, Tooltip
• 0-19: Very low → Tooltip, Passive UI

Priority Scoring

• Rock Feature: 5 points (Critical to long-term growth)
• Pebble Feature: 3 points (Significant financial impact)
• Sand Feature: 1 point (Incremental improvements)

Technical Specifications

Technologies Used

• HTML5: Semantic structure
• CSS3: Custom properties, Grid, Flexbox, animations
• Vanilla JavaScript: No external dependencies
• LocalStorage API: Auto-save functionality

Browser Compatibility

• Chrome 90+
• Safari 14+
• Firefox 88+
• Edge 90+

File Structure

FTUE_Component_Selector_Tool/
├── index.html          # Main HTML structure
├── styles.css          # Complete styling and animations
├── app.js             # Application logic and algorithms
└── README.md          # This file

Features Implemented

✅ Phase 1 MVP Features

• Weighted decision matrix calculation
• Progressive disclosure wizard
• Feature information capture
• 5-criteria evaluation with 1-5 scales
• Automated component recommendations
• Score visualization with animated circle
• Component preview cards
• Auto-save to localStorage (5-second intervals)
• Resume evaluation on return
• Responsive design (desktop/tablet)
• Audible branding and design tokens

🚧 Future Enhancements (Phase 2+)

• Midway SSO authentication
• Backend API integration (DynamoDB)
• Real PDF export functionality
• Evaluation history dashboard
• Admin panel for weight configuration
• Analytics tracking (Adobe Analytics)
• Mobile responsive (< 768px)
• Multi-language support
• JIRA integration
• Figma plugin

Example Evaluations

Example 1: Immersion Reading (Rock Feature)

• Retention: 5 (Critical)
• TTV: 4 (Significant acceleration)
• Development: 4 (Multi-team effort)
• Cognitive Load: 3 (Some friction)
• Priority: Rock (5)
• Final Score: 80 points
• Recommendation: Bottom Sheet or Coachmark

Example 2: Catalog Expansion (Pebble Feature)

• Retention: 3 (Moderate)
• TTV: 3 (Neutral)
• Development: 2 (Low effort)
• Cognitive Load: 1 (No friction)
• Priority: Pebble (3)
• Final Score: 62 points
• Recommendation: Feature Education Tile

Example 3: Tooltip Improvement (Sand Feature)

• Retention: 1 (No impact)
• TTV: 2 (Slight improvement)
• Development: 1 (Minimal)
• Cognitive Load: 1 (No friction)
• Priority: Sand (1)
• Final Score: 32 points
• Recommendation: Toast or Tooltip

Customization

Adjusting Criteria Weights

Edit app.js and modify the weight values:

const criteria = [
    {
        id: 'retention',
        weight: 0.30,  // Change this value
        // ...
    }
];

Adding New Components

Edit the components object in app.js:

const components = {
    'New Component': {
        emoji: '🎨',
        elevation: '+2',
        interruptiveness: 'Medium',
        description: 'Your description here',
        useCases: ['Use case 1', 'Use case 2'],
        approval: 'Team-level',
        maxUsage: 'As needed'
    }
};

Changing Score Thresholds

Modify the getRecommendations() function in app.js:

function getRecommendations(score) {
    if (score >= 85) {  // Change threshold
        return ['Bottom Sheet', 'Coachmark'];
    }
    // ...
}

Troubleshooting

Issue: "Resume evaluation?" doesn't appear

Solution: Clear browser localStorage

// In browser console:
localStorage.removeItem('ftue_evaluation');

Issue: Styling looks broken

Solution: Ensure all three files (HTML, CSS, JS) are in the same directory

Issue: Form validation not working

Solution: Check browser console for JavaScript errors. Ensure you're using a modern browser.

Documentation & Support

• Full PRD: ../FTUE_Component_Selection_Tool_PRD.md
• Mosaic Design System: https://mosaic.audible.amazon.dev/
• Rock/Pebble/Sand Framework: See PRD for complete definitions

License

Internal Audible tool for employee use only. Not for public distribution.

---

Version: 1.0.0
Last Updated: January 19, 2026
Maintained By: Design System Team