top of page

Allison Skinner

Allison Skinner 

Coastal Cleanups.png

Coastal Cleanups

2023 - 2024

Web Design, UI, Low-Code Development

Coastal Cleanups_edited.jpg

Coastal Cleanups

2023 - 2024

Web Design, UI, Low-Code Development

Coastal Cleanups_edited.jpg

Coastal Cleanups

2023 - 2024

Web Design, UI, Low-Code Development

Objective

I was provided a structured content template outlining the goals, narrative, and program details for Seaside Sustainability’s Coastal Cleanups. My task was to transform this document into an engaging webpage that not only communicates essential logistics but also inspires users to sign up, participate, and share in the organization’s mission to keep coastlines clean.

Problem

While working from a provided mockup, I faced several UX challenges that required thoughtful planning and creative execution to ensure the final page was engaging, accessible, and action-oriented:

  • Ensuring responsive layout across desktop and mobile, especially with stacked images and multiple text blocks

  • Organizing long-form informational content into a clear, scannable narrative flow

  • Turning passive text (e.g. “Click here to sign up”) into a visually prominent call-to-action

  • Integrating visual content (beach cleanups, activities) in a way that supports the story without overwhelming text

  • Expanding lightly mentioned features (e.g., Sea Level Rise) into educational sections with visual and informational depth

​

These challenges shaped key design decisions and ultimately improved the page’s clarity, structure, and user engagement — making it easier for visitors to learn, connect, and take action.

Goals

  • Create a clear, scannable layout that guides users from program overview to action.

  • Present logistical details (dates, times, locations, contact info) in an easily digestible format.

  • Integrate authentic imagery to enhance storytelling and showcase real community involvement.

  • Expand educational sections (e.g., microplastics, sea level rise) into compelling content blocks.

  • Improve calls to action to make event sign-ups more visible and actionable.

Mockup

Solution

Structured Logistics Panel

  • Created a clearly defined info box summarizing cleanup timing, registration, weather, parking, and communication — making logistics skimmable and easy to absorb.

Sign-Up Optimization

  • Replaced a simple hyperlink with a visually prominent call-to-action button to increase signup conversion.

Human-Centered Visual Storytelling

  • Integrated real photography showing volunteers on the beach, students learning, and families participating — adding credibility and emotional resonance.

Expanded Supplementary Activities

  • Developed full sections for Sea Level Rise and Microplastics in Sand including:

    • Photos of the activities

    • Educational goals

    • What makes them unique

  • Turned a single-sentence mention into hands-on learning showcases.

Impact Summary

Category
Original Mockup
Final Designed Page
Content Engagement
Text-heavy delivery with minimal formatting for engagement.
Visual formatting, infographics, and media create a more dynamic scroll experience.
Mobile Responsiveness
Static document structure not optimized for mobile.
Responsive web layout with content stacking and touch-friendly buttons.
Imagery & Visual Storytelling
No visuals included.
Real event photos and banners integrated throughout.
Supplementary Activities
Brief mentions with no layout separation (e.g., Sea Level Rise, Microplastics).
Expanded into standalone sections with photos, titles, and descriptions.
Scheduling & Logistics
Dates and locations buried within text.
Dedicated logistics panel summarizing key details (dates, time, contact, location).
Calls to Action
Passive “Click here” link embedded in body text.
Prominent CTA button (“Sign Up”) styled for visibility and conversion.
Visual Hierarchy
Dense paragraph format with no section breaks or headers.
Modular sections with clear headings, subheadings, and logical flow.
Category
Original Mockup
Final Designed Page
Content Engagement
Text-heavy delivery with minimal formatting for engagement.
Visual formatting, infographics, and media create a more dynamic scroll experience.
Page 1 of 7

Outcome

  • Improved readability and accessibility for users of all ages.

  • Elevated program credibility through authentic visuals.

  • Increased clarity and visibility of calls to action.

  • Built a future-ready template structure for similar program pages.

Final Designed Page

bottom of page