Prototype

App Flow Sketch

The app flow shows the user's journey through the Life on Land application. It shows what the user sees, what they click, and what happens next.

Low-Fidelity Prototype

The Home screen introduces the Life on Land app and gives users quick ways to learn about forests, wildlife, habitat protection, and local conservation activities.

Home

Life on Land

Explore ways to protect nature and make a difference in your community.

Learn about protecting forests, wildlife, and natural habitats.

🌲 Forests 🐾 Wildlife 🌿 Habitat Protection Find Activities

Multi-Screen Prototype

Home

Life on Land

Explore ways to protect nature and make a difference in your community.

Find Activities

Core Function Draft & Function Mapping

Action: Navigate Through Conservation Activities

The main function allows users to move through the Life on Land activity process from Home to Activities, then to the selected activity details, Join, and Confirmation.

Activity Mapping

• 🌱 Tree Planting → Tree Planting details
• 🧹 Community Cleanup → Cleanup details
• ♻️ Recycling Event → Recycling details
• 🐦 Wildlife Protection → Wildlife details

JavaScript Code Generation

Prompt Used

Generated Function

function showActivityDetails(activity) {

  const activityData = {
    tree: {
      name: "Community Tree Planting",
      location: "Local Community Park",
      purpose: "Support forests and wildlife habitats.",
      items: "Water, gloves, and comfortable clothing."
    },

    cleanup: {
      name: "Community Cleanup",
      location: "Local Park",
      purpose: "Remove litter and protect natural habitats.",
      items: "Gloves, trash bags, and comfortable clothing."
    },

    recycling: {
      name: "Community Recycling Event",
      location: "Community Center",
      purpose: "Reduce waste and encourage recycling.",
      items: "Clean recyclable materials."
    },

    wildlife: {
      name: "Wildlife Protection",
      location: "Local Nature Area",
      purpose: "Support animals and protect their habitats.",
      items: "Water and comfortable outdoor clothing."
    }
  };

  const selected = activityData[activity];

  document.getElementById("activity-name").textContent =
    selected.name;

  document.getElementById("activity-location").textContent =
    selected.location;

  document.getElementById("activity-purpose").textContent =
    selected.purpose;

  document.getElementById("activity-items").textContent =
    selected.items;

  updatePage("details-screen");
}

Summary of Work & Iteration

Project Link

Project Link: CodeCraft Works Web Studio Project

What We Built

We built a Life on Land multi-screen application prototype using HTML, CSS, and JavaScript. The prototype includes a Home screen, Find Activities screen, activity details, Join screen, and Confirmation screen. Users can choose between Tree Planting, Community Cleanup, Recycling Event, and Wildlife Protection activities.

Challenges & Learnings

One challenge was that all of the activity buttons originally opened the same Tree Planting information. We fixed this by creating a JavaScript activity data object and assigning each activity its own information. We learned that JavaScript can use the user's selection to update the content shown on a screen.

Demonstration of Iteration

We started with a simple low-fidelity Home screen and improved it by adding a forest image, green colors, conservation topic buttons, and a Find Activities button. We then expanded the prototype into a multi-screen application where users can find an activity, choose a specific activity, view its details, join it, and receive a confirmation.

This iteration helped us turn a basic wireframe into a more functional Life on Land prototype and showed us how testing can help identify and fix problems with navigation and JavaScript functionality.