Clean Coast Coalition
2023
Web Design, UI, Low-Code Development
Clean Coast Coalition
2023
Web Design, UI, Low-Code Development
Clean Coast Coalition
2023
Web Design, UI, Low-Code Development
Objective
I was tasked with implementing a new web page to launch Clean Coast Coalition, a Seaside Sustainability initiative aimed at reducing marine debris and uniting community efforts along the coast. While I worked from a pre-approved mockup, I had full responsibility for executing the design faithfully while also optimizing for clarity, hierarchy, accessibility, and mobile responsiveness.
This page needed to introduce a new initiative, educate users about cutting-edge cleanup tools like the PixieDrone, and inspire individuals and organizations to get involved through sponsorship, volunteering, or outreach.
Problem
While working from a provided mockup, I faced several UX challenges that required thoughtful implementation and refinement to ensure a user-friendly experience:
-
Ensuring consistent layout responsiveness across desktop and mobile views
-
Making technical content (like PixieDrone functionality and plastic pollution data) accessible to a general audience
-
Structuring the page to maintain a clear narrative flow from awareness to action
-
Placing calls to action in intuitive, non-intrusive locations
-
Balancing visual content (photos, infographics) with legible, scannable text
These challenges guided design decisions that improved the page’s clarity, engagement, and usability.
Goals
-
Communicate the Coalition’s mission and partners effectively.
-
Introduce advanced marine cleanup tools (PixieDrone, BeBot, Collec'Thor) in a user-friendly way.
-
Ensure smooth information hierarchy and visual flow from top to bottom.
-
Implement actionable CTAs for sponsorship and community participation.
Solution
Clear Narrative & Page Flow
-
Built a logical scroll sequence that leads users from introduction → mission → action.
-
Verified that each section builds user understanding and motivation step by step.
Authentic Visual Integration
-
Curated real event photos (volunteers, PixieDrone deployment, dock cleanup) to reinforce Seaside’s action-first mission.
-
Aligned imagery with surrounding text for visual harmony and consistency.
Digestible Data Visualization
-
Integrated infographics on microplastics and debris statistics to support data-informed storytelling.
-
Ensured contrast and legibility for easy readability on all devices.
Action-Oriented CTAs
-
Placed calls to action in strategic scroll points (e.g., sponsor/donate button after impact explanation).
-
Ensured button labels were clear, active, and visible.
Outcome
-
Sponsors now see their direct impact — visually and narratively.
-
The page communicates clear value for donors and invites engagement.
-
It now functions as both an informational hub and a conversion funnel.
-
The modular approach allows for easy scalability across other outreach or donor pages.
Impact Summary
Category | Final Designed Page |
|---|---|
Community Engagement | Highlights partnerships (e.g., Keep Massachusetts Beautiful), local cleanups, and upcoming innovations |
Imagery & Infographics | Event photos, coalition partner logos, and infographics communicate mission and impact at a glance |
Calls to Action | Multiple CTAs (“Get Involved,” “Sponsor,” “Learn More”) encourage community participation and sponsorship |
Visual Hierarchy | Modular layout with banners, photos, and infographics that guide attention and create scannable sections |
Narrative Flow | Structured storytelling: Who We Are → About → Event Benefits → Learn More → Sponsorship → Future Projects |
Category | Final Designed Page |
|---|---|
Community Engagement | Highlights partnerships (e.g., Keep Massachusetts Beautiful), local cleanups, and upcoming innovations |
Final Designed Page
