Sprint Overview
Design Sprint 2 focused on the Intelligence Features layer of the Pantry App, delivering five interactive HTML/CSS/JS prototypes covering recipe management, smart shopping lists, consumption predictions, email receipt import, and rush ordering. Each prototype follows the established design system from Sprint 1, uses realistic South African data (ZAR pricing, local retailers, SA persona names), and includes full interactive states.
The sprint goal was to validate the UX/UI for features that transform Pantry from a simple inventory tracker into an intelligent household assistant. All prototypes are mobile-first (375px base), scale to tablet and desktop widths, and include micro-interactions such as toast notifications, slide-up sheets, and inline state transitions.
Stories Delivered
| ID |
Title |
Description |
Status |
| INT-001 |
Recipe Engine |
Recipe list with pantry ingredient checking, inline availability status, and add-to-shopping-list flow. Includes recipe creation form with dynamic ingredient rows. |
Complete |
| INT-002 |
Smart Shopping List |
Aggregated shopping list with filter chips (Low Stock, Recurring, From Recipes, Manual). Supports check-off with strike-through, estimated totals in ZAR, and clipboard sharing formatted by store. |
Complete |
| INT-003 |
Consumption Predictions |
Dashboard card predicting items running low based on buying habits. Colour-coded urgency (red 0-1 days, amber 2-4 days, green 5+ days) with one-tap add-to-list action. |
Complete |
| INT-004 |
Email Receipt Import |
Settings section for connecting Gmail, toggling auto-import, viewing import history from Checkers Sixty60 and Woolworths Dash. Includes disconnected, scanning, and success states. |
Complete |
| INT-005 |
Rush Order |
Out-of-stock alert with rush order sheet offering WhatsApp message to household member or Checkers Sixty60 redirect. Both options gated behind a confirmation step. |
Complete |
Design System
All prototypes adhere to the token system established in Design Sprint 1. The following constraints were enforced across every file:
- Colour palette: OKLCH-based warm cream neutrals, forest green accent at hue 155, status colours for success, warning, error, and info
- Typography: Plus Jakarta Sans for headings, DM Sans for body text, loaded via Google Fonts
- Spacing: 4pt base scale for consistent rhythm across all screens
- Components: cards, badges, buttons, and bottom navigation follow the shared component patterns exactly
- Icons: Lucide icon library via CDN for consistent iconography
- Border radii: 6px (small), 10px (medium), 16px (large), 24px (extra large), 9999px (pill)
No hardcoded hex colours were used in the prototypes. All values reference CSS custom properties defined in the token system.
Prototypes
Quality Metrics
Every prototype was reviewed by the QA Engineer and Code Reviewer against the sprint quality bar before sign-off.
Mobile Responsiveness
100%
Interaction Completeness
100%
Accessibility (Semantic HTML)
100%
Quality Checklist Summary
- Design tokens match the spec exactly; no hardcoded hex colours
- Plus Jakarta Sans for headings, DM Sans for body in all files
- Bottom navigation present on every mobile screen with correct active state
- Realistic SA data throughout: ZAR prices, Woolworths, Checkers, Pick n Pay retailers, Lerato/Thabo/Grace personas
- All interactive states implemented: empty, loading, error, and success
- Mobile-first layout verified at 375px width
- No placeholder copy or lorem ipsum
- No em dashes in copy, comments, or strings
- Micro-interactions: button press feedback, toast notifications, smooth CSS transitions
- Semantic HTML with aria-labels on all interactive elements
Team
Senior UI Designer
Visual Design Lead
Junior UI Designer
UI Implementation
Senior UX Researcher
Interaction Design Lead
Junior UX Researcher
UX Flows and Copy
Frontend Developer
HTML/CSS/JS Implementation
QA Engineer
Quality Assurance
Business Analyst
Sprint Report and Docs
Code Reviewer
Final Review and Sign-off
Key Decisions
- Recipe pantry check implemented as inline expand rather than a separate page, reducing navigation friction
- Shopping list grouped by source (Low Stock, Recurring, From Recipes) rather than by store, matching how users think about why they need items
- Prediction card uses a traffic-light colour system (red, amber, green) for instant readability at a glance
- Email import limited to Checkers Sixty60 and Woolworths Dash initially, as these are the most common SA online grocery confirmation email formats
- Rush order confirmation step required before any external navigation (WhatsApp or Sixty60) to prevent accidental redirects
- All prototypes are single-file HTML with embedded CSS and JS for easy sharing and review
Next Steps
- Stakeholder review of all five intelligence feature prototypes
- Usability testing with SA households to validate recipe and shopping list flows
- Dev sprint to implement recipe engine and shopping list backend (Supabase)
- Integration planning for Gmail API (email import) and WhatsApp Business API (rush order)
- Prediction model design: consumption rate algorithm based on purchase history and household size