T.R.A.S.H Community Cleanup Page
2024
Web Design, UI, Low-Code Development
T.R.A.S.H Community Cleanup Page
2024
Web Design, UI, Low-Code Development
T.R.A.S.H Community Cleanup Page
2024
Web Design, UI, Low-Code Development
Objective
I was provided with a raw content outline — just the written text and a general flow of sections — for the T.R.A.S.H. Community Cleanup program. My responsibility was to take that unstructured information and develop a clear, scrollable webpage that promotes community action, explains program logistics, and supports volunteers with tools and educational context.
This project involved designing a multi-section, content-rich layout that guides the user through awareness, participation, and impact — while staying consistent with Seaside Sustainability’s mission-driven brand.
Problem
While designing from a bare-bones text outline, I faced several UX challenges that required visual problem-solving:
-
Structuring long-form, multi-topic content into an intuitive, modular flow
-
Positioning calls to action at points where users are most likely to engage
-
Balancing informative content (safety, supplies, data collection) with engaging visual design
-
Integrating visual media (maps, photos, videos) without disrupting readability
These challenges led to layout and interaction decisions that enhanced clarity, retention, and ease of use.
Goals
-
Organize dense content into a digestible and scroll-friendly layout.
-
Guide users smoothly from understanding to action (e.g., sign-ups, resource downloads).
-
Make safety, program details, and supply info easily scannable.
-
Incorporate Seaside’s brand visuals, color palette, and tone.
-
Support community motivation through real imagery and storytelling.
Solution
Clear Sectioning & Scrollable Layout
-
Broke down the outline into modular sections: about, program overview, more info, safety guidance, importance, and outreach.
-
Added horizontal dividers and background color blocks to differentiate content areas and prevent fatigue.
Map & Video Integration
-
Embedded an interactive location map and video right below the hero to immediately ground the user in place and purpose.
Functional Supplies & Equipment Order Form
-
Designed and implemented an order form for supplies such as safety vests, gloves, and cleanup tools.
-
Each item includes quantity selection and pricing, allowing volunteers or organizers to directly request or purchase materials.
-
Ensures that visitors don’t have to leave the page or email for resources — frictionless UX from discovery to transaction.
Action-Oriented CTAs
-
Implemented a “Click to Adopt” button that allows users to take ownership of cleanup zones or efforts, turning interest into tangible action.
-
Embedded clickable text links at key moments in the scroll (e.g., sign-up prompts, information sources, supply orders), ensuring users always have a next step.
-
Designed CTA elements with clear contrast, spacing, and predictable placement to make them both discoverable and inviting without overwhelming the user.
Educational Add-Ons
-
Highlighted safety and cleanup details in bullet lists and callout boxes for easy scanning.
-
Designed a “Why Community Cleanups are Important” section near the end to reinforce impact and connect users emotionally.
Impact Summary
Category | Original Outline | Final Designed Page |
|---|---|---|
Readability & Scanning | Dense, uniform paragraphs | Bullet points, callouts, and typography hierarchy aid quick comprehension |
Calls to Action | None specified | Bold CTA buttons and links positioned at key interaction points |
Supply Info | List format with links embedded in paragraphs | Dedicated product-like section for visual clarity and easy access |
Visual Engagement | No images or multimedia specified | Integrated photos, maps, and videos to maintain interest |
Content Structure | Unbroken text blocks with no visual hierarchy | Modular sections with headers, color breaks, and photos |
Category | Original Outline | Final Designed Page |
|---|---|---|
Readability & Scanning | Dense, uniform paragraphs | Bullet points, callouts, and typography hierarchy aid quick comprehension |
Outcome
-
The page functions as a comprehensive digital hub — combining education, engagement, and logistics in a single scrollable experience.
-
Volunteers can order supplies directly through the integrated form, reducing friction and increasing participation.
-
The “Click to Adopt” CTA offers a clear, actionable pathway for users to contribute to cleanup efforts.
-
Modular content structure allows for easy future updates or adaptation to other community-driven programs.
Final Designed Page
