Overview
This design sprint created a new test landing page at /v2 that tells two stories: the simple household user (Lerato) who wants grocery management to just work, and the power user (Melissa) who integrates Pantry into a broader smart home setup.
The previous landing page relied on an SVG diagram hero and identical card grids. The V2 page replaces these with real photography, CSS phone mockup overlays showing actual app UI, staggered left/right layouts for feature pillars, and scroll-triggered animations. The page went through three review passes: a design critique that identified layout monotony, a QA audit that found 16 issues (all critical and high priority items fixed), and a final polish pass for token consistency and accessibility.
The route was added to App.jsx without touching any existing routes. The landing page component is self-contained in LandingPageV2.jsx.
Sprint Goal
Create a test landing page at /v2 that tells both the simple user (Lerato) and power user (Melissa) stories with a premium, modern design that reflects the SA context of the product.
Deliverables
| ID |
Deliverable |
Detail |
Status |
| LP-001 | LandingPageV2.jsx | Full landing page component with 7 sections: hero, problem, feature pillars, integration strip, two doors, SA context, CTA footer | Done |
| LP-002 | /v2 Route | Route added to App.jsx for the new landing page; all existing routes untouched | Done |
| LP-003 | Sprint Report | This document | Done |
Page Sections
Hero Section
Kitchen photograph background with a floating phone mockup overlay. Headline and CTA draw the eye, with the phone showing a real shopping list UI.
Problem Section
Asymmetric two-column layout: lifestyle photo on one side, "mid-recipe discovery moment" copy on the other. Frames the pain point before introducing the solution.
Feature Pillars
Three features (Passive Capture, Auto Shopping List, Every Surface) in staggered left/right layout. Each pillar includes a phone mockup showing relevant app UI.
Integration Strip
Horizontal "Works with your home" strip showing Home Assistant, Google Home, WhatsApp, Receipts, and Voice integrations. Replaces the old card grid approach.
Two Doors
Side-by-side paths: Lerato's simple path (scan, list, done) and Melissa's power path (Home Assistant, sensors, automation). Each door has its own CTA.
SA Context
Section highlighting SA-specific features: ZAR pricing, local retailers (Woolies, Checkers, Pick n Pay), and a load shedding/offline badge for resilience.
CTA Footer
Final call to action with sign-up prompt, reinforcing the value proposition from the hero section.
Key Design Decisions
Photography over SVG
Replaced the SVG diagram hero with a real kitchen photograph. Photography creates emotional connection and makes the page feel like a real product, not a wireframe.
Staggered Layout
Feature pillars alternate left/right instead of sitting in identical card grids. This breaks visual monotony and gives each feature its own moment on the page.
Phone Mockup Components
CSS phone frames showing actual UI: a shopping list, a WhatsApp alert, and an approval screen. These communicate the product more effectively than abstract descriptions.
Scroll-triggered Animations
Fade-in animations on scroll with prefers-reduced-motion support. Adds polish without harming accessibility or performance.
Horizontal Integration Strip
A compact horizontal strip for integrations instead of a card grid. Communicates breadth without taking excessive vertical space.
Asymmetric Problem Section
Two-column layout with photo and text rather than centered text. Creates visual interest and anchors the problem statement with imagery.
Design Review Results
Critique Pass
The initial design critique identified several issues with the first implementation: monotonous centered layouts, identical card grids that made features blend together, missing animations, and absence of product mockups. All issues were addressed in the subsequent implementation rounds.
QA Audit Pass
The audit found 16 issues across four severity levels. All critical and high priority items were resolved.
| Severity |
Count |
Status |
| Critical | 2 | All Fixed |
| High | 4 | All Fixed |
| Medium | 6 | Addressed |
| Low | 4 | Noted |
Polish Pass
- ✓ Design token consistency verified across all sections
- ✓ Skip link added for keyboard navigation
- ✓ Aria labels applied to interactive elements
- ✓ Lazy loading added to images
- ✓ Semantic HTML verified (sections, headings, landmarks)
- ✓ Responsive overflow issues fixed
- ✓ Footer navigation links added
Accessibility
- ✓ Skip-to-content link for keyboard users
- ✓ Aria labels on all interactive elements
- ✓ Lazy loading on images with descriptive alt text
- ✓ Semantic HTML throughout (section, nav, header, footer, main)
- ✓
prefers-reduced-motion respected for scroll animations
- ✓ Colour contrast ratios meet WCAG AA
Sprint Team
| Role |
Contribution |
| Product Owner | Acceptance criteria validation |
| Scrum Master | Task breakdown and process |
| Senior UI Designer | Design spec, colour/token decisions, polish pass |
| Junior UI Designer | Hero SVG, integration icons, feature icons |
| Senior Frontend Dev | Architecture, component structure, routing |
| Junior Frontend Dev | Implementation, responsive CSS |
| UX Researcher | Copy for all sections, critique review |
| QA Engineer | Audit pass (16 issues identified) |
| Business Analyst | Sprint report (this document) |
| Code Reviewer | Final review |
Lessons Learned
Photography and mockups sell the product better than diagrams. The SVG hero on V1 felt abstract. Replacing it with a kitchen photo and phone mockup made the page feel like a real product immediately.
Three review passes (critique, audit, polish) catch different classes of issues. The critique found layout problems, the audit found technical issues, and the polish pass caught token inconsistencies. No single pass would have found all three.
Staggered layouts break monotony without adding complexity. Alternating left/right for feature pillars was a simple CSS change that dramatically improved the visual rhythm of the page.
The "two doors" concept works for dual-persona products. Rather than trying to serve both Lerato and Melissa with the same content flow, giving each persona their own section with a targeted CTA is cleaner and more persuasive.
Accessibility should be built in, not bolted on. Adding the skip link and aria labels in the polish pass was straightforward because the semantic HTML was already correct from the first implementation.
Live Page
The V2 landing page is available at pantry-app.pages.dev/v2. The route is /v2 in the React app router.