Donor experience redesign - v0 by VercelDonor experience redesign - v0 by Vercel
Resume paused task
23d ago
I've completely rebuilt the Holiday Helpers donor experience based on your updated sketches. Here's a summary of the changes:
Desktop Experience (Landing + Signup):
Landing Page: Full-width desktop layout with nav bar (logo + Donate Now + hamburger), hero section, 3-column CTA cards (Sign Up & Shop, Donate & Sponsor, Corporate Giving), 2-column action cards (Host a Gift Drive, Host a Fundraiser), and full-width Volunteer card
9-Step Signup Form: Split-panel layout with persistent left editorial content (hero, How It Works circles, What Happens 6-step process, How to Budget table, FAQ link) and a dynamic right panel that advances through:
Location selection (GTA, Hamilton, Durham, York grid)
Family selection mode (By Family Size / By $ Amount tabs with returning donor toggle)
Family size grid with quantity steppers per size (7+, 6, 5, 4, 3, 2 members)
Budget range selection with expandable sub-tiers
Team/Corporate setup (Team Buy vs Corporate toggle, team name, invite members)
Personal info (name, email, phone)
Summary & confirmation showing families selected with costs
Final details (marketing opt-in, referral source)
Thank you screen with next steps checklist and social share buttons
Mobile Dashboard (post-signup):
Home: Greeting, square stat cards, family cards with member counts, special note indicators, and delivery method toggle per family
Family Shopping List: Header with family story (expandable), progress bar, Must Have/Nice to Have summary badges, tab bar with category icons (All, Home, and per-member tabs with counts), category rows showing purchase progress
Category Drill-down: When tapping a category (e.g., Winter Coats), shows per-member items within that category with attribute tags (color, gender, size), organized into "To be Purchased" and "Purchased" sections
Item Detail Modal: Slide-up overlay showing item name, all attribute tags as pills, size chart link, price input field, and "Mark Purchased" button
23d ago
Update:
Once the user has completed the sign up form. The next part of the experience is Mobile only. Update the all the screens for the experience as per the remaining sketches with the nomenclature HolidayHelpersDashboards.
Dashboard_1_Mobilehome: Donor portal home with match notification banner, user greeting + "Invite Team", 3 stat squares (People/Purchased/Remaining), family cards showing status badges (Shopping/Matched), member tabs preview with counts, countdown days, and "Confirm Family" button for new matches
Dashboard_2_familyShoppingList_All: Shopping list with family story, progress bar, Must Have/Nice to Have summary badges, tab bar (All/Home/member names with counts), category rows with icons and purchase progress
Dashboard_3_WinterCoatsList: Category drill-down showing per-member items with attribute tags (color/gender/size), "To be Purchased" vs "Purchased" sections
Dashboard_4_DenishasList: Member-specific view with profile, size chart pills, individual items showing name + tags + price + priority icon
Dashboard_6_OtherItemOverlay: Additional item modal with wishlist notes, "What did you buy?" dropdown, size chart, price input
Let me update the mobile dashboard components to match these sketches:
Now let me read the donor dashboard to understand the overall structure:
Now I have a complete picture of the components. Based on the sketches, I need to make the following updates:
FamilyList (Dashboard_1): Add match notification banner, add "Invite Team" button next to user name, update family cards to show "Shopping"/"Matched" status badges more prominently, show per-member tabs preview on cards, add "Confirm Family" button for newly matched families, add countdown days indicator
FamilyDetail (Dashboard_2-4): The structure looks mostly correct - tab bar with All/Home/member tabs, category list view is good
ItemDetailModal (Dashboard_5-6): Add a product image placeholder area at top, keep existing layout but improve visual hierarchy
Let me update the FamilyList first to match Dashboard_1:
Now let me update the ItemDetailModal to include a product image placeholder area at the top (matching Dashboard_5):
Now let me update the FamilyDetail to better match Dashboard_2, Dashboard_3 and Dashboard_4. I need to update the member tab view to show individual item cards with prices and priority indicators (matching Dashboard_4_DenishasList):
Now I need to update FamilyDetail to show individual item cards when a member tab is selected (matching Dashboard_4_DenishasList). Currently it shows grouped categories for all tabs, but when a member is selected, it should show individual items with their prices and tags. Let me rewrite the component:
Now let me update the donor dashboard to wire up the new onConfirmFamily handler and update the mock data to better match the sketches (Denisha's Family as shown):
Now let me update the DashboardHeader to better match the sketches (hamburger menu icon on left, title, avatar on right):
Now let me also check and update the AddItemModal to match Dashboard_6 (Additional item overlay with wishlist notes, "What did you buy?" dropdown):
The AddItemModal is already structured well, but I should update it to match Dashboard_6 more closely - using a slide-up sheet style like the ItemDetailModal and having wishlist notes displayed. Let me update it:
I've updated all the mobile dashboard components to match your sketches. Here's a summary of the changes made:
Family List (Dashboard_1_Mobilehome):
Added match notification banner at top showing "You have been Matched! Robert's Family added" with dismiss button
User greeting section with avatar, name "Adam", and "Invite Team" button
Motivational text about helping families
3 square stat cards: People, Purchased, Remaining
"Your Families" section with count badge
Family cards showing:
Centered family icon and name with member breakdown
Status badges: "Shopping" (active) or "Matched" (pending)
Progress bar for shopping families
Member tabs preview (Home/Denisha/Raul/Mary with counts)
"25 days to complete your shopping" countdown
"Confirm Family" button with helper text for newly matched families
"View Shopping List" link for active families
Family Detail (Dashboard_2-4):
Family header with story (expandable with "more")
Progress bar showing overall completion
Must Have / Nice to Have summary badges
Tab bar: All (grid icon), Home, and per-member tabs with counts
All tab: Category rows with icons (Winter Coats, Winter Hats, etc.) and purchase progress
Member tab (e.g., Denisha): Member profile card with story, size chart pills (M Coat, M Hat, 9 Boots, Blue Colour), individual items with name + tags + price + priority indicator
"To be Purchased" and "Purchased" sections with item counts
"Add item" button at bottom
Item Detail Modal (Dashboard_5):
Product image placeholder area at top with close button
Item name with category icon and attribute tags (Blue, Womens, M)
Tips & suggestions text
Average cost display
"What did you buy?" dropdown
Price input field with "I paid" label and "Mark Purchased" button
"Note: enter sticker price only" helper text
Add Item Modal (Dashboard_6):
Slide-up sheet style matching item detail
"Additional item for [member]" header with gift icon
Wishlist notes area (expandable)
Size chart link
"What did you buy?" dropdown with common options
Price input + "Mark Purchased" button
23d ago
Refer to this document for details on the expected functionality for the screens. Also go to the company's website (provided earlier) and pull their brand guidelines and redo the whole thing and update
HolidayHelpers_ExperienceRedesignSmall.pdf
23d ago
0px
You can send messages while the preview loads
Code editing is not availableDuplicate this chat to use a more powerful code editor.