Skip to content

web_flow_and_information_document.md

Latest commit

 

History

History
78 lines (66 loc) · 2.41 KB

web_flow_and_information_document.md

File metadata and controls

78 lines (66 loc) · 2.41 KB

User & Merchant Flow Document for Web-App

1. Student Onboarding Flow

  1. Landing Page: Hero section with key benefits and “Get Started” CTA.
  2. Sign-Up / Sign-In Modal:
    • Email/password form.
    • OAuth options: Apple ID, Google.
  3. Email Verification (if email signup).
  4. Dashboard Tour: Tooltip walkthrough of main sections (Home, Redeem, Wishlist, Profile).

2. Student Main Flows

2.1 Redeem Discount Flow

  1. Click Redeem button on a discount card.
  2. API call: POST /api/discounts/:id/redeem
  3. Receive unique redemption code and expiration.
  4. Show Code Modal: Code with timestamp; options to copy or present.
  5. API logs redemption for analytics.

2.2 Wishlist Flow

  1. Click heart icon on discount card.
  2. API: POST /api/wishlist.
  3. Update badge on Wishlist nav item.
  4. View Wishlist via nav, with filter/sort options.

2.3 Profile & Savings Flow

  1. Click user avatar in nav → Profile page.
  2. API calls:
    • GET /api/students/:id
    • GET /api/students/:id/savings?period=30
  3. Display:
    • Name & avatar
    • Savings progress bar
    • Settings link for profile edits

2.4 Search Flow

  1. Use search input in nav bar.
  2. As-you-type suggestions.
  3. API: GET /api/discounts?search=<query>
  4. Display results with pagination.

3. Merchant Onboarding Flow

  1. Landing Page for merchants → Sign-Up / Sign-In.
  2. Verify email via link.
  3. Dashboard Tour: Highlight key features.

4. Merchant Main Flows

4.1 Dashboard & Analytics Flow

  1. Click Dashboard in nav.
  2. API: GET /api/analytics/merchants/:id?period=month
  3. Show:
    • Monthly redemption total.
    • Chart of daily redemptions.
    • Quick-create listing button.

4.2 Listing Creation Flow

  1. Click New Listing in Dashboard.
  2. Fill in details: Name, Industry, Percentage, Description, Dates.
  3. Live Preview panel updates in real time.
  4. Click Publish.
  5. API: POST /api/merchants/:id/listings.
  6. Show Confirmation: Link + listing details.

4.3 Redemption Verification Flow

  1. Merchant selects Verify Code in Dashboard.
  2. Enter student’s redemption code.
  3. API: POST /api/discounts/:id/redeem/verify with code.
  4. If valid, confirm redemption and log event.
  5. Update analytics and show success message.

5. Navigation Structure

  • Top Navigation Bar:
    • Logo/Home
    • Redeem
    • Wishlist / Listings
    • Search Input
    • Profile / Dashboard Dropdown