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.
Home
User opens the Life on Land app.
Find Activities
User searches for local conservation activities.
Choose Activity
User selects an activity such as tree planting.
View Details
User reviews the activity information.
Join
User chooses to participate.
Confirmation
App confirms the user's registration.
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.
Life on Land
Explore ways to protect nature and make a difference in your community.
Learn about protecting forests, wildlife, and natural habitats.
Multi-Screen Prototype
Life on Land
Explore ways to protect nature and make a difference in your community.
Topic
Topic
Topic information.
Local Conservation Activities
Activity
Activity:
Location:
Purpose:
What to Bring:
Description:
Join Activity
You are ready to participate in:
You're Registered!
Your participation in this activity has been confirmed.
Thank you for helping protect life on land!
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.
updatePage(screenId)
Hides all screens and displays the selected screen.
showTopicDetails(topic)
Loads different information when the user selects Forests, Wildlife, or Habitat Protection.
showActivityDetails(activity)
Loads the information for the activity the user selected.
showForestAlert()
Displays the Forests conservation alert in the Low-Fidelity Prototype.
showWildlifeAlert()
Displays the Wildlife protection alert in the Low-Fidelity Prototype.
showHabitatAlert()
Displays the Habitat Protection alert in the Low-Fidelity Prototype.
Topic Mapping
- 🌲 Forests → Forests details
- 🐾 Wildlife → Wildlife details
- 🌿 Habitat Protection → Habitat Protection details
Activity Mapping
- 🌱 Tree Planting → Tree Planting details
- 🧹 Community Cleanup → Cleanup details
- ♻️ Recycling Event → Recycling details
- 🐦 Wildlife Protection → Wildlife details
JavaScript Code Generation
Prompt Used
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, topic information, Find Activities screen, activity details, Join screen, and Confirmation screen. Users can choose between Forests, Wildlife, Habitat Protection, Tree Planting, Community Cleanup, Recycling Event, and Wildlife Protection activities.
Challenges & Learnings
One challenge was that the Forests, Wildlife, and Habitat Protection buttons in the Low-Fidelity Prototype were not showing their alerts. We fixed this by creating separate JavaScript functions for each alert. We also connected the same three topics to the Multi-Screen Prototype so each topic displays different information.
Demonstration of Iteration
We started with a simple Home screen and improved it by adding Forests, Wildlife, and Habitat Protection buttons. The buttons now work in both the Low-Fidelity Prototype and the Multi-Screen Prototype.
This iteration helped turn the basic prototype into a more functional Life on Land application and showed how JavaScript can respond to different user selections.