---
project: pbs-membership-loe1-phase3
type: project-plan
status: planned
tags: [pbs-hub, flask, membership, loe1, the-garden, ui-design]
created: 2026-04-08
updated: 2026-04-08
path: PBS/Tech/Projects/pbs-membership-loe1-phase3.md
---

# PBS Membership LOE 1 Phase 3 - The Garden

## Overview

Phase 3 of LOE 1 (Recipe Saving) expanded in scope during planning.
Originally scoped as just "the saved recipes page in pbs-hub," it became
clear that the saved recipes page cannot exist without first building the
member experience container it lives in. Phase 3 now covers building **the
Garden** - the branded member area in pbs-hub - with saved recipes as the
first feature planted inside it.

This session was dedicated to locking in the member experience skeleton:
URL structure, branding, navigation, visual direction, and page layout. No
code was written. Phases 1 (Backend API) and 2 (Save button) are still in
progress and will ship before Phase 3 work begins.

## Decisions Locked

| Decision | Choice | Rationale |
|---|---|---|
| Member area location | `plantbasedsoutherner.com/the-garden/` |
Path-based via Traefik routing to pbs-hub. Easy to flip to subdomain later
if needed. |
| Page title / H1 | "Welcome to the Sunflower Garden" | Jenny recommended
"garden" over "patch" - warmer, more inviting, implies tending. |
| Internal naming | "the garden" for member area, "Sunnies" for community |
Clean separation - the community and the place no longer share a name. |
| Login redirect | Ultimate Member sends authenticated users to
`/the-garden/` | Single entry point to the member experience. |
| Logout flow | pbs-hub calls WP logout, lands on WordPress home | WP
remains the auth source of truth. |
| Visual direction | Option #3 (garden-themed cards, structurally normal
grid) | Ships now. Option #1 (full illustrated scene) banked as
someday-goal when illustrator budget exists. |
| Card style | Seed packets | Built-in visual language (title +
illustration + description). "Coming soon" LOEs become unopened seed
packets - perfect metaphor. |
| Empty state copy | "Your garden is still a seed. Start saving recipes and
watch it grow." | Friendly, on-brand, points new Sunnies at the first
action. |

## Page Structure (Top to Bottom)

1. **Header strip** - matches WordPress Astra header for seamless visual
transition. "My Garden" is active nav item.
2. **Welcome hero** - soft green gradient or botanical pattern background.
Large warm heading "Welcome to the Sunflower Garden, [Name]." Sunnie
illustration in corner. Short tagline ("Here's what's growing today" or
similar).
3. **Card grid** - seed packet cards for each LOE. Responsive: 3 across
desktop, 2 tablet, 1 mobile.
4. **"Recently added to your garden" strip** - horizontal row of 3-4 most
recent saves. Empty state for new Sunnies shows the copy above with Sunnie
pointing at the saved recipes card.
5. **Footer** - matches WordPress Astra footer.

## Card States

- **Active LOE** (Saved Recipes at launch): full color seed packet,
blooming sunflower illustration, count badge ("12 saved"), clickable.
- **Coming soon LOE**: muted/sepia seed packet, seed or sprout
illustration, "Coming soon" label, not clickable but visible.

## Phase 3 Sub-Phases (Shippable Milestones)

- **3a - The Garden Skeleton**: Traefik routing for `/the-garden/`, pbs-hub
Flask app serving the page, WP cookie auth middleware, Astra-matching
header/footer templates, empty card grid, hero with Sunnie, logout flow.
Goal: logged-in Sunnie lands on the garden and sees the shell.
- **3b - Saved Recipes Seed Packet**: First active LOE card wired up.
Queries `user_interactions` + `pbs_recipes`, shows count, card is clickable.
- **3c - Saved Recipes Detail Page**: Click-through destination. List/grid
of saved recipes with thumbnails, titles, save dates, unsave action,
click-through to WP recipe.
- **3d - "Recently Added" Strip + Empty State**: The content area on the
garden home, plus the friendly empty state for new Sunnies.
- **3e - Coming Soon Seed Packets**: Muted cards for Meal Plans, Diversity
Tracker, User Profiles. Cheap to add, high brand value - shows Sunnies
what's coming.

## Open Questions (To Resolve Before Phase 3a Starts)

1. **Seed packet illustrations.** Phase 3a minimum requires: one active
"saved recipes" seed packet, one generic "coming soon" seed packet, one
corner Sunnie for the hero. Source TBD - Jenny draws, AI-generated, stock,
or hire out. Needs decision before 3a ships or it becomes a blocker.
2. **Astra header/footer matching strategy.** Options: (a) rebuild Astra
header in Jinja templates by hand (simpler but drifts when WP updates), (b)
WordPress serves header/footer HTML via endpoint pbs-hub fetches (more
robust, adds dependency), (c) iframe (rejected). Needs decision before 3a
template work starts.

## Relationship to Other Phases

- **Phase 1 (Backend API)**: planning complete, implementation pending.
Phase 3 depends on the `user_interactions` table and query patterns
established here.
- **Phase 2 (Save Button)**: planning complete, implementation pending.
Custom JS via WPCode Lite. Phase 3 reads the data Phase 2 writes.
- **LOEs 2-4**: their "coming soon" seed packets ship in Phase 3e. Actual
implementation is future work.

## Someday / Stretch

- **Visual direction Option #1**: full illustrated garden scene with
clickable hotspots. Requires illustrator budget. Revisit when PBS has
revenue to support it or Jenny has bandwidth to draw it.
- **Language expansion**: "your garden," "what's growing," "tend your
garden" for settings, "new in the garden this week" for content callouts.
Microcopy opportunity across the whole member experience.

## Next Session

Resume on Phases 1 and 2 implementation. Phase 3 planning is parked until
those ship.


...sent from Jenny & Travis