🦝 Reggie's Vault

truebabycost-spec-checklist-mobile

4 min read

Checklist Mobile Redesign Spec

Problem

The current checklist on mobile is cramped and hard to use:

  • Grid layout doesn’t translate well to narrow screens
  • Too many controls per row (checkbox, name, tier, qty, price)
  • Subgroup headers take up space without clear benefit
  • Hard to tap small touch targets while shopping in-store
  • No quick way to see/edit item details

Design Principles

  1. Thumb-friendly - Primary actions in easy reach zone
  2. Scannable - Quick visual scan of what’s selected vs not
  3. Progressive disclosure - Show summary, reveal details on tap
  4. Context-aware - Optimize for in-store shopping use case

Proposed Design: Card-Based Layout

Item Card (Collapsed State)

┌─────────────────────────────────────────┐
│ ☑️  Breast Pump                    $250 │
│     Electric Double · Mid · Qty: 1      │
└─────────────────────────────────────────┘
  • Large checkbox (easy tap target)
  • Item name prominent
  • Price right-aligned
  • Subtitle shows current selections
  • Tap card to expand

Item Card (Expanded State)

┌─────────────────────────────────────────┐
│ ☑️  Breast Pump                    $250 │
│     ✓ Essential · If breastfeeding      │
├─────────────────────────────────────────┤
│  Type:  [Manual ▼]                      │
│         [Electric Single ▼]             │
│         [Electric Double ▼] ●           │
│         [Wearable ▼]                    │
├─────────────────────────────────────────┤
│  Tier:  ○ Budget $125                   │
│         ● Mid $250                      │
│         ○ Premium $475                  │
├─────────────────────────────────────────┤
│  Qty:   [ − ]  1  [ + ]                 │
└─────────────────────────────────────────┘
  • Full controls visible when expanded
  • Clear tier selection with prices
  • Large touch targets for +/- buttons

Category View

Category Header

┌─────────────────────────────────────────┐
│ 🍼 Feeding                              │
│ 8/28 selected · $1,240                  │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐     │
│ │ Formula │ │ Bottles │ │ Pumps   │     │
│ └─────────┘ └─────────┘ └─────────┘     │
└─────────────────────────────────────────┘
  • Calculator buttons prominent
  • Count + subtotal visible
  • Tap to expand/collapse

Subgroup (Collapsible)

┌─────────────────────────────────────────┐
│ ▼ Breastfeeding          3/11 · $420   │
├─────────────────────────────────────────┤
│  [Item cards...]                        │
└─────────────────────────────────────────┘

Bottom Navigation Bar (Sticky)

┌─────────────────────────────────────────┐
│  Total: $4,280        [Share] [Reset]   │
│  32 items · 85% essentials              │
└─────────────────────────────────────────┘
  • Always visible at bottom
  • Quick actions accessible
  • Progress indicator

Gestures & Interactions

GestureAction
Tap checkboxToggle selected
Tap cardExpand/collapse details
Swipe rightMark as selected
Swipe leftMark as not needed
Long pressQuick edit (tier/qty picker)

Category Navigation

Option A: Horizontal Scroll Tabs

┌─────────────────────────────────────────┐
│ [Nursery] [Feeding] [Diaper...] →       │
└─────────────────────────────────────────┘

Option B: Bottom Sheet Category Picker

Tap category name → slides up list of all categories

Option C: Floating Action Button

FAB in corner → tap for category jump menu

Recommendation: Option A for quick scanning, with sticky positioning

Filter Bar (Compact)

┌─────────────────────────────────────────┐
│ Show: [All ▼]  Tier: [Mid ▼]  [Search]  │
└─────────────────────────────────────────┘
  • Dropdowns instead of pill buttons (saves space)
  • Search icon expands to full search bar

Quick Actions

Bulk Edit Mode

Long press any item → enters selection mode

  • Multi-select items
  • Batch change tier
  • Batch toggle selected

Share/Export

  • Share URL (existing)
  • Add: “Text me this list” (sends SMS summary)
  • Add: Print-friendly view

Technical Implementation

CSS Changes

  • Replace grid with flexbox cards
  • Use CSS custom properties for card states
  • Add touch-action for swipe gestures

JavaScript Changes

  • Add expand/collapse state per item
  • Implement swipe handlers (Hammer.js or vanilla)
  • Add long-press detection

HTML Structure

<div class="item-card" data-expanded="false">
  <div class="item-card-header" onclick="toggleExpand(...)">
    <input type="checkbox" class="item-checkbox">
    <div class="item-summary">
      <span class="item-name">Breast Pump</span>
      <span class="item-subtitle">Electric Double · Mid · Qty: 1</span>
    </div>
    <span class="item-price">$250</span>
  </div>
  <div class="item-card-details">
    <!-- Expanded controls -->
  </div>
</div>

Implementation Phases

Phase 1: Card Layout (2-3 hrs)

  • Convert item rows to cards
  • Add expand/collapse
  • Update touch targets

Phase 2: Sticky Elements (1-2 hrs)

  • Sticky bottom bar
  • Sticky category tabs
  • Improve scroll behavior

Phase 3: Gestures (2-3 hrs)

  • Swipe to toggle
  • Long press for quick edit
  • Smooth animations

Phase 4: Polish (1-2 hrs)

  • Transitions and animations
  • Loading states
  • Haptic feedback (if supported)

Questions for Adam

  1. Cards expand inline vs bottom sheet?
  2. Priority: swipe gestures or simpler tap-only?
  3. Keep subgroups on mobile or flatten?
  4. Category nav: tabs, FAB, or bottom sheet?

Graph View