Files
bakery-ia/JTBD_UNIFIED_ADD_WIZARD.md

336 lines
14 KiB
Markdown
Raw Normal View History

feat: Add JTBD-driven Unified Add Wizard system Implemented a comprehensive unified wizard system to consolidate all "add new content" actions into a single, intuitive, step-by-step guided experience based on Jobs To Be Done (JTBD) methodology. ## What's New ### Core Components - **UnifiedAddWizard**: Main orchestrator component that routes to specific wizards - **ItemTypeSelector**: Beautiful visual card-based selection for 9 content types - **9 Individual Wizards**: Step-by-step flows for each content type ### Priority Implementations (P0) 1. **SalesEntryWizard** ⭐ (MOST CRITICAL) - Manual entry with dynamic product lists and auto-calculated totals - File upload placeholder for CSV/Excel bulk import - Critical for small bakeries without POS systems 2. **InventoryWizard** - Type selection (ingredient vs finished product) - Context-aware forms based on inventory type - Optional initial lot entry ### Placeholder Wizards (P1/P2) - Customer Order, Supplier, Recipe, Customer, Quality Template, Equipment, Team Member - Proper structure in place for incremental enhancement ### Dashboard Integration - Added prominent "Agregar" button in dashboard header - Opens wizard modal with visual type selection - Auto-refreshes dashboard after wizard completion ### Design Highlights - Mobile-first responsive design (full-screen on mobile, modal on desktop) - Touch-friendly with 44px+ touch targets - Follows existing color system and design tokens - Progressive disclosure to reduce cognitive load - Accessibility-compliant (WCAG AA) ## Documentation Created comprehensive documentation: - `JTBD_UNIFIED_ADD_WIZARD.md` - Full JTBD analysis and research - `WIZARD_ARCHITECTURE_DESIGN.md` - Technical design and specifications - `UNIFIED_WIZARD_IMPLEMENTATION_SUMMARY.md` - Implementation guide ## Files Changed - New: `frontend/src/components/domain/unified-wizard/` (15 new files) - Modified: `frontend/src/pages/app/DashboardPage.tsx` (added wizard integration) ## Next Steps - [ ] Connect wizards to real API endpoints (currently mock/placeholder) - [ ] Implement full CSV upload for sales entry - [ ] Add comprehensive form validation - [ ] Enhance P1 priority wizards based on user feedback ## JTBD Alignment Main Job: "When I need to expand or update my bakery operations, I want to quickly add new resources to my management system, so I can keep my business running smoothly." Key insights applied: - Prioritized sales entry (most bakeries lack POS) - Mobile-first (bakery owners are on their feet) - Progressive disclosure (reduce overwhelm) - Forgiving interactions (can go back, save drafts)
2025-11-09 08:40:01 +00:00
# Jobs To Be Done Framework: Unified Add Wizard System
## 🎯 Main Job Statement
**When** I need to expand or update my bakery operations,
**I want to** quickly add new resources, relationships, or data to my management system,
**so I can** keep my business running smoothly without interruption and make informed decisions based on complete information.
---
## 🔧 Functional Jobs (The 9 Core Sub-Jobs)
### 1. Inventory Management Job
**When** I discover or start using a new ingredient or finished product,
**I want to** add it to my inventory system with type classification, essential details, and initial stock levels,
**so I can** track availability, plan production, and prevent stockouts.
**Steps involved:**
- Classify the item (ingredient vs. finished product)
- Define core attributes (name, unit, category, storage requirements)
- Add initial lot(s) with critical tracking data (quantity, expiry, batch number)
### 2. Supplier Relationship Job
**When** I find a new supplier or formalize a purchasing relationship,
**I want to** record their contact details, the ingredients they provide, pricing, and minimum order quantities,
**so I can** make informed purchasing decisions and maintain reliable supply chains.
**Steps involved:**
- Capture supplier information (name, contact, payment terms)
- Link to ingredients they supply from inventory
- Set pricing and minimum order quantities per ingredient
### 3. Recipe Documentation Job
**When** I create or standardize a recipe,
**I want to** document the recipe details, required ingredients from inventory, and applicable quality templates,
**so I can** ensure consistent production quality and accurate costing.
**Steps involved:**
- Define recipe metadata (name, category, yield, instructions)
- Select ingredients from inventory with quantities
- Assign quality templates for process control
### 4. Equipment Tracking Job
**When** I acquire new equipment (mixer, oven, proofer, etc.),
**I want to** register it in my system with specifications and maintenance schedules,
**so I can** manage capacity planning, maintenance, and operational efficiency.
**Steps involved:**
- Record equipment details (type, model, capacity, location)
- Set maintenance schedules and specifications
### 5. Quality Standards Job
**When** I establish quality criteria for my products or processes,
**I want to** create reusable quality templates with checkpoints,
**so I can** maintain consistent product standards and meet regulatory requirements.
**Steps involved:**
- Define template name and scope (product/process)
- Set quality checkpoints and acceptance criteria
- Configure frequency and documentation requirements
### 6. Order Processing Job
**When** a customer places an order,
**I want to** record order details, items, quantities, and delivery requirements quickly,
**so I can** fulfill orders on time and track customer demand.
**Steps involved:**
- Select or create customer
- Add order items (products, quantities, custom requirements)
- Set delivery date, payment terms, and special instructions
### 7. Customer Relationship Job
**When** I gain a new customer (wholesale, retail, or event client),
**I want to** capture their information and preferences,
**so I can** serve them better, track order history, and personalize service.
**Steps involved:**
- Record customer details (name, contact, type, preferences)
- Set payment terms and delivery preferences
- Note dietary restrictions or special requirements
### 8. Team Building Job
**When** I hire a new team member,
**I want to** add them to the system with role, permissions, and contact information,
**so I can** manage responsibilities, access control, and internal communication.
**Steps involved:**
- Enter team member details (name, role, contact)
- Set permissions and access levels
- Assign responsibilities and schedule
### 9. Sales Recording Job ⭐ **CRITICAL**
**When** I complete sales transactions (daily, weekly, or event-based),
**I want to** log them manually or upload them in bulk from my records,
**so I can** track revenue, understand buying patterns, and maintain financial records.
**Steps involved:**
- Choose entry method (manual entry vs. file upload)
- For manual: Enter date, items, quantities, amounts
- For upload: Map CSV/Excel columns to system fields, validate, and import
- Review and confirm entries
**Why critical:** Most small bakeries lack POS systems and rely on manual logs, cash registers, or Excel spreadsheets. This is the primary way they capture sales data for business intelligence.
---
## 💭 Emotional Jobs
Users also hire this system to satisfy emotional needs:
- **Feel organized and in control** of business operations
- **Feel confident** that nothing is falling through the cracks
- **Feel professional** in how I manage my bakery (vs. scattered notebooks)
- **Reduce anxiety** about missing critical information that could hurt operations
- **Feel empowered** to make data-driven decisions
- **Feel accomplished** when completing complex setups efficiently
- **Avoid overwhelm** when onboarding new operational elements
---
## 👥 Social Jobs
Users want the system to help them:
- **Demonstrate competence** to staff, partners, and investors
- **Show professionalism** to customers and suppliers
- **Build credibility** for regulatory compliance (health inspections, quality audits)
- **Project growth mindset** to stakeholders
- **Train new staff** more easily with standardized processes
---
## ⚖️ Forces of Progress
### 🔴 Push (Problems creating urgency to change)
1. **Scattered navigation**: "I have to remember which page has which 'Add' button"
2. **Context switching cost**: "I need to add a recipe, but first I have to add ingredients on a different page"
3. **Incomplete data entry**: "I forgot to add critical fields and now have errors downstream"
4. **Time pressure**: "I'm in the middle of production and need to add something quickly"
5. **Mobile inaccessibility**: "I'm on the bakery floor and can't easily add items from my phone"
6. **Repetitive tasks**: "I have 50 sales entries from last week that I have to input one by one"
### 🟢 Pull (Vision of better state)
1. **One-click access**: "A single 'Add' button that helps me add anything"
2. **Guided process**: "Step-by-step guidance that prevents me from missing required fields"
3. **Mobile-friendly**: "I can add items from my phone while in the bakery"
4. **Bulk operations**: "I can upload all my sales at once from my spreadsheet"
5. **Contextual help**: "The wizard shows me what I need and why"
6. **Progress saved**: "I can pause and come back without losing my work"
### 😰 Anxiety (Fears holding back adoption)
1. **Fear of mistakes**: "What if I enter something wrong and mess up my data?"
2. **Complexity concern**: "Will this be harder than what I'm doing now?"
3. **Time investment**: "I don't have time to learn a new system right now"
4. **Missing information**: "What if I don't have all the information required?"
5. **Lost progress**: "What if I get interrupted and lose everything I entered?"
6. **Change resistance**: "The current way works, why risk changing it?"
### 🔄 Habit (Inertia of current behavior)
1. **Navigation muscle memory**: "I'm used to going to the Inventory page to add ingredients"
2. **Familiar forms**: "I know where all the fields are in the current forms"
3. **Workarounds established**: "I have my own system for remembering what to add"
4. **Sequential thinking**: "I think in terms of pages, not tasks"
---
## 🚧 User Struggles & Unmet Needs
### Discovery Struggles
- "I don't know what information I need to have ready before I start"
- "I don't understand the relationship between items (e.g., recipes need ingredients first)"
### Process Struggles
- "I start adding something and realize I'm missing prerequisite data"
- "I get interrupted frequently and lose my place"
- "The form doesn't tell me why certain fields are required"
### Efficiency Struggles
- "I need to add multiple related items but have to repeat similar information"
- "I can't add things in bulk when I have many items to enter" **(especially sales data)**
- "Mobile forms are hard to use with small text and buttons"
### Error Recovery Struggles
- "If I make a mistake, I have to start completely over"
- "I don't know what went wrong when submission fails"
- "Validation errors don't clearly explain how to fix them"
### Visibility Struggles
- "I can't see what I've already added without leaving the form"
- "I don't know if the item I'm adding already exists"
- "No confirmation that my data was saved successfully"
---
## ✅ Job Completion Criteria (Success Metrics)
The job is done well when:
### Accuracy
- ✓ All required information is captured completely
- ✓ No invalid or duplicate data is created
- ✓ Relationships between items are correctly established
### Efficiency
- ✓ Process feels fast and effortless
- ✓ Minimal cognitive load (clear next steps always visible)
- ✓ Bulk operations complete in seconds, not hours
### Accessibility
- ✓ Can complete on mobile as easily as desktop
- ✓ Works in noisy, busy bakery environments
- ✓ Readable with floury hands (large touch targets)
### Confidence
- ✓ Clear feedback on what's needed next
- ✓ Validation happens in real-time with helpful guidance
- ✓ Success confirmation is immediate and clear
### Recovery
- ✓ Can pause and resume without data loss
- ✓ Easy to correct mistakes inline
- ✓ Clear error messages with actionable solutions
---
## 🎨 Design Principles Derived from JTBD
### 1. **Progressive Disclosure**
Don't overwhelm users with all 9 options at once. Guide them through intent → action → completion.
### 2. **Smart Defaults & Suggestions**
Reduce cognitive load by pre-filling data, suggesting related items, and showing what's typically needed.
### 3. **Mobile-First Touch Targets**
Bakery owners are often on their feet, in production areas, with limited desk time. Mobile is primary context.
### 4. **Forgiving Interactions**
Allow users to go back, save drafts, skip optional fields, and fix errors inline without starting over.
### 5. **Contextual Education**
Don't just ask for data—explain why it matters and how it'll be used. Build user understanding over time.
### 6. **Bulk-Friendly for Sales**
Special attention to #9: Recognize that sales data often comes in batches. Optimize for CSV upload and validation workflows.
### 7. **Relationship Awareness**
When adding a recipe, show if ingredients exist. Offer to add missing ingredients inline. Reduce context-switching.
### 8. **Confirmation & Next Actions**
After completing a job, clearly show what was created and suggest logical next steps (e.g., "Recipe added! Add another or create a production batch?").
---
## 🗺️ User Journey Map (Generalized)
### Stage 1: Intent Recognition
**User state:** "I need to add something to my system"
**Emotion:** Focused, possibly rushed
**Touchpoint:** Dashboard "Add" button OR specific page "Add" button
### Stage 2: Selection
**User state:** "What type of thing am I adding?"
**Emotion:** Seeking clarity
**Touchpoint:** Wizard step 1 - visual card-based selection of 9 options
### Stage 3: Guided Input
**User state:** "Walking through the steps for my specific item"
**Emotion:** Confident with guidance, anxious about mistakes
**Touchpoint:** Multi-step wizard tailored to item type (2-4 steps typically)
### Stage 4: Validation & Preview
**User state:** "Is this correct? Did I miss anything?"
**Emotion:** Cautious, double-checking
**Touchpoint:** Review step showing all entered data
### Stage 5: Confirmation
**User state:** "It's saved! What now?"
**Emotion:** Accomplished, ready for next task
**Touchpoint:** Success message with next action suggestions
---
## 📊 Prioritization Matrix
Based on JTBD analysis, here's the priority order:
| Rank | Job | Frequency | Impact | Complexity | Priority |
|------|-----|-----------|--------|------------|----------|
| 1 | Sales Recording (#9) | Daily | Critical | High | **P0** |
| 2 | Customer Orders (#6) | Daily | High | Medium | **P0** |
| 3 | Inventory Management (#1) | Weekly | High | Medium | **P0** |
| 4 | Recipe Documentation (#3) | Monthly | High | High | **P1** |
| 5 | Supplier Management (#2) | Monthly | Medium | Low | **P1** |
| 6 | Customer Management (#7) | Weekly | Medium | Low | **P1** |
| 7 | Quality Templates (#5) | Quarterly | Medium | Medium | **P2** |
| 8 | Equipment Tracking (#4) | Rarely | Low | Low | **P2** |
| 9 | Team Members (#8) | Rarely | Medium | Low | **P2** |
**Recommendation:** Focus UX polish on P0 items, especially Sales Recording (#9).
---
## 🔍 Validation Checkpoints
Before finalizing the design, verify:
- [ ] Are all 9 jobs clearly goal-oriented (not solution-oriented)? ✅
- [ ] Are sub-jobs specific steps toward completing each main job? ✅
- [ ] Are emotional jobs (confidence, control, professionalism) captured? ✅
- [ ] Are social jobs (credibility, competence) captured? ✅
- [ ] Are forces of progress (push, pull, anxiety, habit) identified? ✅
- [ ] Are user struggles and unmet needs specific and actionable? ✅
- [ ] Is the critical importance of sales recording (#9) emphasized? ✅
- [ ] Are mobile-first and bulk operations principles derived from insights? ✅
---
## 📝 Next Steps
1. **Design the unified wizard architecture** based on this JTBD framework
2. **Create component hierarchy** (UnifiedAddWizard → ItemTypeSelector → Specific Item Wizards)
3. **Design each of the 9 wizard flows** with special attention to sales recording
4. **Implement mobile-responsive UI** following the existing design system
5. **Test with real bakery workflows** to validate job completion
6. **Iterate based on user feedback** from initial rollout
---
**Document Version:** 1.0
**Date:** 2025-11-09
**Status:** Framework Complete - Ready for Design Phase