---
created: 2026-03-12
source: Rivet
tags: [agent-archive, rivet]
---

# Uber-Style UI Redesign Plan for RateRight

## Research Summary

### Successful Gig App Patterns

**Uber's ActionCard Design Pattern**
- Reduces UI elements to simple, decoupled "cards"
- Each card represents a single, clear action
- Most screens require 1 or zero new cards to be created
- Focus on reusability and decoupling actions from UI

**Tinder's Swipe Pattern**
- Swipe right to like/accept, left to dislike/reject
- Prominent positioning of swipe buttons
- Visual feedback during swipe gesture
- Consistent design pattern throughout app
- Card stack visualization for browsing

**Key UI Principles from Gig Apps**
1. **One Action Per Screen** - Each screen has a single primary action
2. **Minimal Typing** - Use selection, voice input, or pre-filled data
3. **Large Touch Targets** - 64px+ minimum for easy interaction
4. **Visual Feedback** - Clear indicators during actions
5. **Progressive Disclosure** - Show only what's needed at each step

## Current RateRight UI Analysis

### Job Posting Flow (Contractor)
**Current Issues:**
- Multiple fields on one screen (title, description, rate, location, date, workers)
- 5+ steps with back-and-forth navigation
- Heavy text input required
- No voice input option

**Simplification Opportunities:**
- Trade selection → AI auto-fills job details
- Combine location/date/workers into single screen
- Voice input for job description
- Reduce to 3 taps maximum

### Worker Browse Flow
**Current Issues:**
- Traditional scroll list requires precise tapping
- Apply button needs accurate touch
- No quick decision mechanism

**Simplification Opportunities:**
- Tinder-style card stack
- Swipe right to apply instantly
- Swipe left to skip
- Tap for details (secondary action)

### Contractor Match Flow
**Current Issues:**
- List view requires reading and comparison
- Hire button needs precise touch
- No quick decision mechanism

**Simplification Opportunities:**
- Card stack with worker profiles
- Swipe right to hire (triggers $50 payment)
- Swipe left to pass
- AI summary prominently displayed

### Onboarding Flow
**Current Issues:**
- 8+ steps with multiple questions per screen
- Heavy text input required
- No voice option
- Takes 3-5 minutes

**Simplification Opportunities:**
- Voice-first option (30 seconds to record)
- Reduce typed option to 60 seconds
- Use selection instead of typing where possible
- Progressive profiling (collect more later)

## Redesign Plan

### 1. Job Posting Flow (3 Taps Max)

**Screen 1: Trade Selection**
- Large trade buttons (96px+ touch targets)
- Visual icons for each trade
- Single tap selection
- AI immediately starts generating job post

**Screen 2: AI-Generated Details**
- Pre-filled job title, description, rate range
- Large, easy-to-edit cards
- Voice input button for description changes
- Location picker with GPS auto-detect
- Date selector with "ASAP" quick option
- Worker counter with +/- buttons

**Screen 3: Confirm & Post**
- Summary card of all details
- Large "Post Job" button
- "Always free to post" reminder

### 2. Worker Browse Flow (Card Stack)

**Main Interface:**
- Tinder-style card stack
- Each card shows:
  - Job title (large font)
  - Trade badge
  - Location
  - Pay rate (prominent)
  - Start date
- Swipe right = Apply instantly
- Swipe left = Skip to next
- Tap card = View details (bottom sheet)

**Swipe Feedback:**
- Green overlay when swiping right
- "Release to apply" text
- Haptic feedback on apply

### 3. Contractor Match Flow (Swipe to Hire)

**Worker Card Design:**
- Large profile photo/initial
- AI-generated summary ("Steel fixer with 5 years experience, based in Parramatta, available full-time")
- Match percentage
- Key certifications
- Experience years

**Swipe Actions:**
- Swipe right = Hire (opens payment modal)
- Swipe left = Pass (removes from stack)
- Visual confirmation of $50 fee before swipe completes

### 4. Onboarding (Under 60 Seconds)

**Option A: Voice First**
- Tap and hold mic button
- Speak for 30 seconds: "I'm a steel fixer with 5 years experience..."
- AI extracts: trade, experience, location, availability
- Single confirmation screen

**Option B: Quick Questions**
- 4 screens maximum:
  1. Trade selection (multi-select)
  2. Experience (button selection)
  3. Location (GPS or type)
  4. Availability (button selection)
- Large touch targets throughout
- Progress bar at top

### 5. Touch Target Requirements

**Minimum Sizes:**
- All buttons: 64px height minimum
- Cards: Full width for easy swiping
- Icons: 24px minimum
- Text inputs: 56px height minimum

**Glove-Friendly Design:**
- Increased spacing between elements
- Larger hit areas than visual elements
- High contrast for visibility
- Simple gestures (swipe, tap, hold)

### 6. Voice Input Integration

**Where to Add Mic Buttons:**
- Job description (contractor posting)
- Worker bio (onboarding)
- Messages between users
- Search/filter inputs

**Voice Button Design:**
- Prominent mic icon
- Hold to record
- Visual waveform feedback
- Auto-transcribe with edit option

## Components to Build

### New Components:
1. **SwipeableCard** - Handles swipe gestures and animations
2. **CardStack** - Manages stack of swipeable cards
3. **VoiceRecorder** - Mic button with recording UI
4. **LargeButton** - 64px+ touch target button
5. **AISummaryCard** - Displays AI-generated content
6. **BottomSheet** - For detailed views
7. **HapticFeedback** - Touch feedback utility

### Modified Components:
1. **JobCard** - Convert to swipeable format
2. **WorkerCard** - Convert to swipeable format
3. **TradeSelector** - Larger touch targets
4. **OnboardingFlow** - Reduce steps, add voice
5. **PaymentModal** - Trigger on swipe right

## Implementation Priority

1. **Phase 1:** Job posting simplification (3 taps)
2. **Phase 2:** Worker browse card stack
3. **Phase 3:** Contractor match card stack
4. **Phase 4:** Onboarding voice option
5. **Phase 5:** Touch target optimization

## Success Metrics

- **Time to post job:** Target < 30 seconds (currently 3-5 minutes)
- **Worker applications:** Increase swipe-based applications
- **Contractor hires:** Reduce time to hire decision
- **Onboarding completion:** Target < 60 seconds
- **Glove usability:** Test with actual construction workers

## Next Steps

1. Create interactive prototypes for each flow
2. Test with construction workers (gloves, dirty hands)
3. Measure baseline metrics for current app
4. Implement Phase 1 (job posting) first
5. A/B test swipe vs tap interactions
6. Iterate based on user feedback