Demo Structure and User Scenarios

1. Introduction

Zero Waste Challenge is an innovative mobile and web application that encourages users to recycle waste materials and produce less waste in their daily lives.

1.1. Project Purpose

The main purpose of the application is to increase environmental awareness, guide individuals to adopt sustainable lifestyle habits, and make recycling activities more enjoyable and motivating through gamification methods.

1.2. Key Features

• Points System: Users earn points by entering the type and quantity of waste materials they recycle
• Leaderboard: Users are ranked according to their scores, creating a competitive environment
• Tips Tab: Sustainability recommendations and eco-friendly lifestyle tips are shared
• Community Tab: Users can share their experiences, achievements, and ideas on a forum-like platform
• Challenges: Users can set personal goals such as "I will recycle this much waste this week" and also participate in community challenges created by administrators
• Achievements: Users can view the badges they have earned based on predetermined criteria

1.3. Target Audience & User Definition

• Zero Waste Challenge targets individuals of all ages who are environmentally conscious or want to adopt an eco-friendly lifestyle. It is specifically designed for users who are familiar with technology, interested in social responsibility projects, and seeking motivation for sustainable living.
• The users of our platform are individuals who seek to actively track their recycling efforts and contribute to environmental sustainability. To design an application that effectively supports this audience, we must thoroughly understand their motivations and pain points:
• User Motivations:
  • Desire to make a positive environmental impact through recycling activities
  • Interest in tracking personal recycling progress and seeing tangible results
  • Need for community support and shared experiences in sustainability journey
  • Seeking gamified and engaging approaches to recycling habit formation
  • Want to compete and compare recycling achievements with like-minded individuals
• User Pain Points:
  • Difficulty staying motivated without visible progress or feedback on recycling efforts
  • Lack of knowledge about proper recycling practices and waste reduction strategies
  • Feeling isolated in their sustainability efforts without community support
  • Uncertainty about whether their individual recycling actions make a real difference
  • Need for practical, actionable sustainability tips that fit into busy lifestyles
  • Gaining insight into what drives our users and the challenges they face allows us to shape a platform that aligns with their needs and encourages meaningful, long-term engagement in recycling activities. While the app focuses on tracking recycled materials, we also encourage waste reduction through educational sustainability tips.

1.4. Expected Outcomes

• Increased recycling habits among users
• Raised awareness about reducing waste production
• Widespread adoption of sustainable living practices
• Sustained motivation through community support
• Creation of measurable environmental impact

1.5. Project Significance

Considering the global waste problem and climate crisis, encouraging individual behavior changes is of critical importance. Zero Waste Challenge supports sustainable behavior change by transforming recycling from a chore into an enjoyable and rewarding experience.

2. User Scenarios

These scenarios are designed to meet the CMPE451 Lab 4 rubric:

• Web must be deployed over HTTPS and use realistic data.
• Mobile must demonstrate a functional Registration/Login flow; other parts can be coherent prototypes with dummy data presented through a natural user scenario.
• Show a clear direction for inclusive UX (contrast, clear language, keyboard focus cues, screen-reader labels roadmap, etc.).

---

Web — Scenario 1: First challenge, first log

Objective: A new user creates an account, sets a personal plastic-reduction challenge, and makes the first waste log. The dashboard updates immediately.

Why this scenario: Covers end-to-end auth, logging, charts, and personal challenges—the core web value.

Pre-demo data to seed

• Public challenges: Plastic-Free Week, Paper-Lite Office
• 5–10 eco tips
• 2–3 demo users with plausible totals

Flow (≈5–6 min)

1. Sign up → Login on the live HTTPS URL.
2. Land on Dashboard (empty state visible).
3. Create personal challenge: “Reduce plastic by 1.0 kg this week” with a 7-day deadline + reminder.
4. Add waste entry: Plastic bottles – 0.25 kg.
5. Observe updates: Totals and chart update without refresh; filter to Last 7 days.

Success criteria

• Account creation/login persists session.
• Creating a personal challenge updates UI.
• Adding a log updates totals & charts instantly.

Inclusive UX notes

• Ensure button focus rings are visible.
• Use labels for inputs (Name, Target amount, Deadline) and descriptive helper text.

---

Web — Scenario 2: Join the crowd, climb the board

Objective: A user joins a mass sustainability challenge, verifies participation on the leaderboard, then shares a post with a hashtag.

Why this scenario: Demonstrates community + social features succinctly.

Pre-demo data to seed

• At least two other users with higher totals so the board looks realistic.
• A few short sample posts with #plastic, #paper.

Flow (≈3–4 min)

1. Challenges → Join Plastic-Free Week.
2. Open Leaderboard; confirm the user appears/rank updates after prior log.
3. Share a post: “First plastic-free day! #plastic”.
4. Optionally show a like/comment from a seeded user.

Success criteria

• Join action is reflected without page reloads where possible.
• Leaderboard shows plausible diversity of ranks.
• Post appears in feed and remains on refresh.

Inclusive UX notes

• Provide alt text for any avatars/images in feed.
• Ensure color contrast in leaderboard badges.

---

Web — Scenario 3: Polish my profile (bio + photo)

Objective: Update bio and profile picture, then view the public profile.

Why this scenario: Uses concrete, testable profile endpoints and is quick to demo.

Pre-demo prep

• Keep a 300×300 PNG/JPG ready for upload.
• Prepare a short bio text (1–2 sentences).

Flow (≈2–3 min)

1. (Optional) Status check: hit /status/ to show server is live.
2. Update bio from the Profile page (or API client if needed); confirm new text appears.
3. Upload profile picture; confirm avatar updates in header/profile.

Success criteria

• Authenticated actions succeed on live backend.
• Updated bio and avatar are visible in the UI.

Inclusive UX notes

• File input has a clear label and error text (size/type).
• Bio textarea has character count and helper text.

---

Mobile — Scenario 4: Daily log keeps the streak alive

Objective: On mobile, the user logs today’s paper waste; the streak increments and the daily/weekly summary updates.

Why this scenario: Proves Login is functional and showcases a natural daily action. Charts/achievements can be prototypes.

Pre-demo data to seed

• Two prior days with entries so a 2-day streak is present.

Flow (≈3–4 min)

1. Onboarding → Login on device/emulator.
2. Home shows “2-day streak” + “Log today” CTA.
3. Add log: Paper – 0.30 kg; confirm save.
4. Observe updates: Streak → 3, summary card updates (mini-chart prototype is fine).
5. Optional: show a placeholder badge (“First Week Streak” coming soon).

Success criteria

• Login works on device/emulator.
• Adding a log updates streak and summary promptly.

Inclusive UX notes

• Touch targets ≥ 44×44 pt; large tap areas for log categories.
• Announce success via accessible toast/snackbar text.

---

Mobile — Scenario 5: Starter pack (sign up + personal challenge + tips)

Objective: A brand-new user signs up on mobile, sets a simple personal challenge, and browses eco tips (prototype screens acceptable).

Why this scenario: Satisfies functional sign-up/login and shows concept flow for challenge + tips.

Pre-demo data to seed

• 3–5 eco tips (e.g., reusable bottle, decline receipts, batch recycling).

Flow (≈3–4 min)

1. Sign up → Login (show success).
2. Create personal challenge: “No single-use cutlery for 7 days.”
3. Browse tips; save/like one item.
4. Profile glance: show bio/avatar (sync from web if available or read-only).

Success criteria

• Auth works fully on mobile.
• Prototype screens have coherent navigation and content.

Inclusive UX notes

• High-contrast theme toggle in settings.
• Plain-language tips with icons and short descriptions.

---

Mobile — Scenario 6: Admin Content Review

Objective

On mobile, an admin views reported posts, users, challenges, and comments through the admin panel to monitor community safety and content quality.

Why this scenario

Validates admin access and shows how administrators can inspect all types of reported content directly from their device.

Pre-demo data to seed

• 3 reported posts with reasons (SPAM, INAPPROPRIATE)
• 2 reported users with bios and report details
• 2 reported challenges with creator and participant info
• 2 reported comments with parent post references

Flow (≈3–4 min)

1. Login as Admin

   • Launch app → Login using [email protected] / admin123
   • System recognizes admin credentials and opens the Admin Panel instead of the regular Home screen

2. Access Admin Dashboard

   • Dashboard shows a summary view with logout option

3. View Reported Posts

   • Tap Posts → List of reported posts appears

4. View Reported Users

   • Tap Users → Display reported users list

5. View Reported Challenges

   • Tap Challenges → Show reported challenges with title, description, and creator info

6. View Reported Comments

   • Tap Comments → View reported comments with text, parent post, and reporter details

7. Navigation Between Sections

   • Use bottom navigation to move between content types
   • Back arrow returns to main Admin Dashboard
   • Consistent layout across all sections

Success criteria

• Admin login redirects correctly to the Admin Panel
• All four content types (Posts, Users, Challenges, Comments) display properly
• Navigation between tabs is seamless and responsive
• All content details are visible and clearly structured

Inclusive UX notes

• Large, accessible touch targets (≥44×44 pt)
• Clear text hierarchy for content and metadata
• Consistent header and navigation design across tabs

---

Data Seeding (Suggested)

• Users: ayse_demo, ali_demo, zeynep_demo (with realistic totals)
• Challenges: Plastic-Free Week, Paper-Lite Office, Glass Return Drive
• Tips: Carry a reusable bottle; Decline receipts; Batch recycling on Sundays
• Initial logs: Plastic 0.25 kg, Paper 0.30 kg, Glass 0.40 kg across last 7 days

---