Nonprofit · UX strategy, UI & design system
Cleanup Co-Op
A volunteer platform where people adopt a beach, park or street, log what they pick up and join teams, designed so one part-time developer can ship it in phases.
Nonprofit · UX strategy, UI & design system
Cleanup Co-Op
A volunteer platform where people adopt a beach, park or street, log what they pick up and join teams, designed so one part-time developer can ship it in phases.
Nonprofit · UX strategy, UI & design system
Cleanup Co-Op
A volunteer platform where people adopt a beach, park or street, log what they pick up and join teams, designed so one part-time developer can ship it in phases.
Role
UX strategy, UI, design system, prototype, build plan
Team
Me, one developer, a content lead and two stakeholders
Scope
32 desktop screens, 9 error states, phone and tablet
Status
In development, MVP in 16 weeks
Role
UX strategy, UI, design system, prototype, build plan
Team
Me, one developer, a content lead and two stakeholders
Scope
32 desktop screens, 9 error states, phone and tablet
Status
In development, MVP in 16 weeks
Role
UX strategy, UI, design system, prototype, build plan
Team
Me, one developer, a content lead and two stakeholders
Scope
32 desktop screens, 9 error states, phone and tablet
Status
In development, MVP in 16 weeks
Overview
Seaside Sustainability organizes volunteers to clean beaches, parks and streets. Cleanup Co-Op is its volunteer platform: people adopt an area, or just their stretch of one, log what they collect, join teams and earn awards, while staff keep the wording up to date themselves.
Goals
Make adopting an area easy
Show every volunteer’s impact
Bring people together in teams
Keep volunteer emails private
Let staff edit every word
Overview
Seaside Sustainability organizes volunteers to clean beaches, parks and streets. Cleanup Co-Op is its volunteer platform: people adopt an area, or just their stretch of one, log what they collect, join teams and earn awards, while staff keep the wording up to date themselves.
Goals
Make adopting an area easy
Show every volunteer’s impact
Bring people together in teams
Keep volunteer emails private
Let staff edit every word
Overview
Seaside Sustainability organizes volunteers to clean beaches, parks and streets. Cleanup Co-Op is its volunteer platform: people adopt an area, or just their stretch of one, log what they collect, join teams and earn awards, while staff keep the wording up to date themselves.
Goals
Make adopting an area easy
Show every volunteer’s impact
Bring people together in teams
Keep volunteer emails private
Let staff edit every word
The problem
The cleanup map lived in ArcGIS Experience Builder. It could show areas, but not what the program needed next: volunteer accounts, adopting part of a street, team join requests that keep emails private, and a running tally of impact. With one developer working 30 hours a week, the new design also had to be buildable in stages.
The problem
The cleanup map lived in ArcGIS Experience Builder. It could show areas, but not what the program needed next: volunteer accounts, adopting part of a street, team join requests that keep emails private, and a running tally of impact. With one developer working 30 hours a week, the new design also had to be buildable in stages.
The problem
The cleanup map lived in ArcGIS Experience Builder. It could show areas, but not what the program needed next: volunteer accounts, adopting part of a street, team join requests that keep emails private, and a running tally of impact. With one developer working 30 hours a week, the new design also had to be buildable in stages.
What the brief asked for
This round started from the brief written by Seaside Sustainability’s staff rather than from user interviews. I turned each must-have into a design response, and one line set the tone for every screen with other people on it.
“We don’t want the emails of team members to be public.”
From the project brief
Adopt areas
Led to the adopt map, and Draw my section for people who clean only part of a street
Impact tally and awards
Led to the impact tiles, the season goal, and awards with the next one called out
Join teams, keep emails private
Led to join requests captains approve by name, and messages sent through the site
Team photos and vacation pins
Led to a team photo wall with a consent check, and logging a cleanup anywhere
Confirmation emails
Led to five email templates, mirrored in an in-app inbox
Editable words
Led to short, consistent copy kept in one content file, moving to a CMS later
What the brief asked for
This round started from the brief written by Seaside Sustainability’s staff rather than from user interviews. I turned each must-have into a design response, and one line set the tone for every screen with other people on it.
“We don’t want the emails of team members to be public.”
From the project brief
Adopt areas
Led to the adopt map, and Draw my section for people who clean only part of a street
Impact tally and awards
Led to the impact tiles, the season goal, and awards with the next one called out
Join teams, keep emails private
Led to join requests captains approve by name, and messages sent through the site
Team photos and vacation pins
Led to a team photo wall with a consent check, and logging a cleanup anywhere
Confirmation emails
Led to five email templates, mirrored in an in-app inbox
Editable words
Led to short, consistent copy kept in one content file, moving to a CMS later
What the brief asked for
This round started from the brief written by Seaside Sustainability’s staff rather than from user interviews. I turned each must-have into a design response, and one line set the tone for every screen with other people on it.
“We don’t want the emails of team members to be public.”
From the project brief
Adopt areas
Led to the adopt map, and Draw my section for people who clean only part of a street
Impact tally and awards
Led to the impact tiles, the season goal, and awards with the next one called out
Join teams, keep emails private
Led to join requests captains approve by name, and messages sent through the site
Team photos and vacation pins
Led to a team photo wall with a consent check, and logging a cleanup anywhere
Confirmation emails
Led to five email templates, mirrored in an in-app inbox
Editable words
Led to short, consistent copy kept in one content file, moving to a CMS later
How I worked
1
Map the brief
Listed every must-have and drew one user flow covering adopting, logging, teams and scheduling.
2
Build the system
Set tokens and components around Seaside’s green, gold and teal, with Lexend for every word, chosen for readability.
3
Design every state
32 desktop screens, 9 error and edge-case screens, and phone and tablet versions of the core flows.
4
Audit accessibility
Checked contrast, borders, text size and targets, then fixed the tokens so every screen updated at once.
5
Prototype
Rebuilt the screens in Figma from components and linked five clickable flows for stakeholder reviews.
6
Plan the build
Split the work into an MVP and two later phases that one developer can ship in about 40 weeks.
How I worked
1
Map the brief
Listed every must-have and drew one user flow covering adopting, logging, teams and scheduling.
2
Build the system
Set tokens and components around Seaside’s green, gold and teal, with Lexend for every word, chosen for readability.
3
Design every state
32 desktop screens, 9 error and edge-case screens, and phone and tablet versions of the core flows.
4
Audit accessibility
Checked contrast, borders, text size and targets, then fixed the tokens so every screen updated at once.
5
Prototype
Rebuilt the screens in Figma from components and linked five clickable flows for stakeholder reviews.
6
Plan the build
Split the work into an MVP and two later phases that one developer can ship in about 40 weeks.
How I worked
1
Map the brief
Listed every must-have and drew one user flow covering adopting, logging, teams and scheduling.
2
Build the system
Set tokens and components around Seaside’s green, gold and teal, with Lexend for every word, chosen for readability.
3
Design every state
32 desktop screens, 9 error and edge-case screens, and phone and tablet versions of the core flows.
4
Audit accessibility
Checked contrast, borders, text size and targets, then fixed the tokens so every screen updated at once.
5
Prototype
Rebuilt the screens in Figma from components and linked five clickable flows for stakeholder reviews.
6
Plan the build
Split the work into an MVP and two later phases that one developer can ship in about 40 weeks.
Design system
I built the system before the screens, so 40-plus screens could be assembled from the same parts. Seaside’s three brand colors carry meaning on the map (green for parks and open spots, gold for beaches and adopted spots, teal for streets and actions), and every fill that sits behind white text or icons has a deep variant that passes 4.5:1.
Brand and meaning
Aa
primary
#04718E
Buttons, links, focus · 5.6:1
Aa
green-deep
#2D8438
Parks, open, done · 4.7:1
Aa
sand-deep
#966C28
Beaches, adopted · 4.6:1
Aa
sky-deep
#3C7BA4
Logs, info · 4.6:1
Aa
coral-deep
#C94A2B
Awards, alerts · 4.6:1
Aa
ink
#12313A
Text and headings · 12.9:1
Surfaces and lines
Aa
bg
#F5F8F7
Page background
Aa
surface
#FFFFFF
Cards and panels
Aa
surface-2
#EDF3F2
Quiet fills
Aa
line-strong
#748E94
Control borders · 3:1
Type: Lexend, for every word
Adopt a beach, park, or street
Your next cleanup
Lexend was designed to reduce visual stress and improve reading fluency, so one family carries headings, labels and long help text.
Eyebrow · 12 / 600 · tracked
Components
Log a cleanup
Schedule
Edit route
Open
Due in 10 days
Overdue by 2 days
lb
121 lb
Litter you have removed
17 components in all, including impact tiles, nav items, fields, choice cards, area and event rows, awards, draw steps, map pins and toasts.
Design system
I built the system before the screens, so 40-plus screens could be assembled from the same parts. Seaside’s three brand colors carry meaning on the map (green for parks and open spots, gold for beaches and adopted spots, teal for streets and actions), and every fill that sits behind white text or icons has a deep variant that passes 4.5:1.
Brand and meaning
Aa
primary
#04718E
Buttons, links, focus · 5.6:1
Aa
green-deep
#2D8438
Parks, open, done · 4.7:1
Aa
sand-deep
#966C28
Beaches, adopted · 4.6:1
Aa
sky-deep
#3C7BA4
Logs, info · 4.6:1
Aa
coral-deep
#C94A2B
Awards, alerts · 4.6:1
Aa
ink
#12313A
Text and headings · 12.9:1
Surfaces and lines
Aa
bg
#F5F8F7
Page background
Aa
surface
#FFFFFF
Cards and panels
Aa
surface-2
#EDF3F2
Quiet fills
Aa
line-strong
#748E94
Control borders · 3:1
Type: Lexend, for every word
Adopt a beach, park, or street
Your next cleanup
Lexend was designed to reduce visual stress and improve reading fluency, so one family carries headings, labels and long help text.
Eyebrow · 12 / 600 · tracked
Components
Log a cleanup
Schedule
Edit route
Open
Due in 10 days
Overdue by 2 days
lb
121 lb
Litter you have removed
17 components in all, including impact tiles, nav items, fields, choice cards, area and event rows, awards, draw steps, map pins and toasts.
Design system
I built the system before the screens, so 40-plus screens could be assembled from the same parts. Seaside’s three brand colors carry meaning on the map (green for parks and open spots, gold for beaches and adopted spots, teal for streets and actions), and every fill that sits behind white text or icons has a deep variant that passes 4.5:1.
Brand and meaning
Aa
primary
#04718E
Buttons, links, focus · 5.6:1
Aa
green-deep
#2D8438
Parks, open, done · 4.7:1
Aa
sand-deep
#966C28
Beaches, adopted · 4.6:1
Aa
sky-deep
#3C7BA4
Logs, info · 4.6:1
Aa
coral-deep
#C94A2B
Awards, alerts · 4.6:1
Aa
ink
#12313A
Text and headings · 12.9:1
Surfaces and lines
Aa
bg
#F5F8F7
Page background
Aa
surface
#FFFFFF
Cards and panels
Aa
surface-2
#EDF3F2
Quiet fills
Aa
line-strong
#748E94
Control borders · 3:1
Type: Lexend, for every word
Adopt a beach, park, or street
Your next cleanup
Lexend was designed to reduce visual stress and improve reading fluency, so one family carries headings, labels and long help text.
Eyebrow · 12 / 600 · tracked
Components
Log a cleanup
Schedule
Edit route
Open
Due in 10 days
Overdue by 2 days
lb
121 lb
Litter you have removed
17 components in all, including impact tiles, nav items, fields, choice cards, area and event rows, awards, draw steps, map pins and toasts.
Error and edge-case states
I designed the unhappy paths alongside the happy ones, so the developer would not have to invent them. Each error says what went wrong and how to fix it, and keeps the volunteer’s work.
Map didn’t load: the list still works
Photo errors name each file and the fix
A schedule clash offers to join the team instead
The full set also covers a wrong password, no search match, logging offline, a team name already taken, being signed out mid-task, and page not found.
Error and edge-case states
I designed the unhappy paths alongside the happy ones, so the developer would not have to invent them. Each error says what went wrong and how to fix it, and keeps the volunteer’s work.
Map didn’t load: the list still works
Photo errors name each file and the fix
A schedule clash offers to join the team instead
The full set also covers a wrong password, no search match, logging offline, a team name already taken, being signed out mid-task, and page not found.
Error and edge-case states
I designed the unhappy paths alongside the happy ones, so the developer would not have to invent them. Each error says what went wrong and how to fix it, and keeps the volunteer’s work.
Map didn’t load: the list still works
Photo errors name each file and the fix
A schedule clash offers to join the team instead
The full set also covers a wrong password, no search match, logging offline, a team name already taken, being signed out mid-task, and page not found.
Key decisions
Decision 1
Keep the ArcGIS data, build a custom app
Experience Builder couldn’t handle drawing, team requests or private emails. Keeping the existing ArcGIS map layers reused the data and skills Seaside already had.
Decision 2
Privacy as a rule, not a setting
Volunteers appear by first name and last initial. Captains approve requests without seeing emails, and members message each other through the site.
Decision 3
Let people adopt part of a street
Draw my section is always a visible button, never hidden behind a pin. A checklist guides each tap, and a stretch someone already adopted is blocked with a way to contact them.
Decision 4
Scope an MVP one developer can ship
The MVP covers the core loop: sign up, adopt, log, join a team, get an email. Drawing, scheduling and the inbox follow in Phase 2, offline logging and staff tools in Phase 3.
Key decisions
Decision 1
Keep the ArcGIS data, build a custom app
Experience Builder couldn’t handle drawing, team requests or private emails. Keeping the existing ArcGIS map layers reused the data and skills Seaside already had.
Decision 2
Privacy as a rule, not a setting
Volunteers appear by first name and last initial. Captains approve requests without seeing emails, and members message each other through the site.
Decision 3
Let people adopt part of a street
Draw my section is always a visible button, never hidden behind a pin. A checklist guides each tap, and a stretch someone already adopted is blocked with a way to contact them.
Decision 4
Scope an MVP one developer can ship
The MVP covers the core loop: sign up, adopt, log, join a team, get an email. Drawing, scheduling and the inbox follow in Phase 2, offline logging and staff tools in Phase 3.
Key decisions
Decision 1
Keep the ArcGIS data, build a custom app
Experience Builder couldn’t handle drawing, team requests or private emails. Keeping the existing ArcGIS map layers reused the data and skills Seaside already had.
Decision 2
Privacy as a rule, not a setting
Volunteers appear by first name and last initial. Captains approve requests without seeing emails, and members message each other through the site.
Decision 3
Let people adopt part of a street
Draw my section is always a visible button, never hidden behind a pin. A checklist guides each tap, and a stretch someone already adopted is blocked with a way to contact them.
Decision 4
Scope an MVP one developer can ship
The MVP covers the core loop: sign up, adopt, log, join a team, get an email. Drawing, scheduling and the inbox follow in Phase 2, offline logging and staff tools in Phase 3.
User flow
One flow ties the four jobs together: adopt an area, log a cleanup, join a team, and schedule. Visitors can browse every map and team; acting asks them to sign in, then returns them to what they were doing. Every step marked with a mail icon sends a confirmation email.
The same four lanes became the five clickable flows in the Figma prototype, plus a tour of the error states, used to walk stakeholders through the design.
Final designs
Six screens, each annotated with what it does and why. Every screen was built from the Cleanup Co-Op design system and checked for contrast, text size and target size.
Screen 1 of 6
Home
Volunteers see their impact, what is coming up, and what needs them the moment they sign in.
The same page on a first visit: three steps to a first cleanup.
1
Impact tiles
Pounds removed, cleanups logged, areas cared for and awards earned, each in its own tone.
Why
The brief asked for a running tally. White icons on deep fills keep every tile above 4.5:1 contrast.
2
Your next cleanup
The next date with Directions and See on map, then the cleanup after it.
Why
The most likely next action sits at the top, so getting there takes one tap.
3
Your spots
Each adopted area, how often it is cleaned, and a due or overdue chip.
Why
Adopting is a promise. A gentle due date keeps areas cared for, and the chip always carries words, not color alone.
4
Awards
Earned awards, locked ones with progress, and the next one called out with a bar.
Why
Naming the next award gives people a reason to come back. Locked awards stay readable instead of fading out.
5
Join requests
Captains approve or decline by first name and last initial.
Why
The brief ruled out public emails, so captains decide by name and nobody sees an address.
6
Leaderboard
Pounds removed this fall, with the volunteer’s own row highlighted.
Why
A little friendly competition, with first names and last initials only.
Screen 2 of 6
Adopt an area
One map shows every beach, park and street, who has adopted it, and what is still open.
Adopting asks only how often and who with, then confirms by email.
1
Pins that say two things
The pin color and icon show the type of place; the small dot shows its status.
Why
Volunteers need to know what a place is and whether it is free. Labels mean status never relies on color alone.
2
Filter in one tap
All areas, Beaches, Parks, Streets and Open to adopt narrow the map.
Why
Most visits start with “what can I adopt near me?”, so open spots are one tap away.
3
Draw my section
A button that is always on the map, never hidden behind a pin.
Why
Many people clean only their stretch of a long street or shore, so adopting part of an area had to be easy to find.
4
Two ways to adopt
A short tip at the top of the list explains whole areas and sections.
Why
Drawing is new to most volunteers. One sentence explains it right where they decide.
5
Browse first, sign up later
Visitors see every map and team. Acting asks them to create an account or try the demo.
Why
Asking for an account before showing anything would lose people who are just curious.
6
A legend in words
Open, Adopted and Yours are labeled next to their dots.
Why
A color key alone would fail for color-blind volunteers.
Screen 3 of 6
Draw my section
People who clean only part of a street or shore tap where they start and stop, and adopt just that stretch.
On a phone the checklist becomes a bottom sheet over the map.
1
Line or shape
A street or shore is a line; a park section is a shape.
Why
Two clear modes beat one tool that guesses what you meant.
2
A checklist that ticks itself
Each step checks off as it happens, so people always know what is next.
Why
Drawing on a map is unfamiliar. The list answers “now what?” after every tap.
3
Points on the map
Tapped points join into a dotted line, with start and end rings.
Why
Seeing the line as it is drawn makes mistakes obvious before anything is saved.
4
A hint that follows
A dark tooltip near the line repeats the next step.
Why
Eyes are on the map while drawing, so the hint lives there too.
5
Points and length
A live count and a rough length in feet.
Why
The length becomes part of the adoption, so captains and staff know what was promised.
6
Undo and Clear
Quiet buttons to take back one point or start over.
Why
Mistaps on a map are common, especially on a phone. Recovery should cost one tap.
Screen 4 of 6
Log a cleanup
Logging takes under a minute: pick the spot, say who came, and count what you collected, as roughly or exactly as you like.
Right after logging, Home shows the new award and the updated totals.
1
Pick the spot
Search or tap a pin. Adopted spots come first.
Why
Most logs are for a place the volunteer already looks after.
2
Draw where you cleaned
Trace the route you actually walked.
Why
Routes show staff which stretches are covered and which are being missed.
3
Vacation pins
Cleaned away from home? Drop a pin anywhere.
Why
A brief must-have: a beach cleanup on vacation still counts toward a volunteer’s total.
4
What you picked
One line confirms the spot and route length, with Edit route.
Why
A quick check before submitting, without leaving the page.
5
Quick count or tally
Bags and pounds for most people; item counts for those who want them.
Why
Item counts feed Seaside’s reports, but making everyone count cigarette butts would stop people logging.
6
Photos with consent
Photos can also go to the team wall, with a checkbox to say so.
Why
Sharing is a choice each time, never a default someone forgets about.
Screen 5 of 6
Team page
A team shares a home spot, a photo wall, upcoming cleanups and a running total, without anyone’s email on show.
Finding a team: search by town and distance, then request to join.
1
Team totals
Members, cleanups and pounds, right under the team name.
Why
Shared numbers turn individual effort into something the team owns.
2
Your role
A chip says when you are the captain.
Why
Captains see extra tools, so the page says why.
3
Photo wall
Recent photos with who and when.
Why
The brief asked for team photos. Only photos people chose to share appear here.
4
Join requests
Accept or decline, by first name and last initial.
Why
The brief: “We don’t want the emails of team members to be public.”
5
Message, don’t email
Message team sends through the site, with a note that nobody sees emails.
Why
Saying it plainly builds trust with people joining a group of strangers.
6
Upcoming cleanups
Team dates with who is going and a one-tap I’m going.
Why
Turning up is the point of a team, so it is the easiest thing to do.
Screen 6 of 6
Inbox and scheduling
Every confirmation email is mirrored in an in-app inbox, and scheduling warns about clashes before they happen.
Scheduling catches a past date and offers to join the team’s cleanup instead.
1
Every email, in one place
Adoptions, requests, logs and awards, newest first.
Why
People lose emails. The inbox means a confirmation is never more than a tap away.
2
The real email
The preview is the email template itself.
Why
Staff and volunteers see exactly the same message, so support never has to guess.
3
A short summary
Area, how often and where to get a kit.
Why
The three facts people look for, without reading a paragraph.
4
One next step
Each email ends with a single action.
Why
A confirmation is the best moment to get the next cleanup on the calendar.
5
Privacy, said out loud
“Your email is never shown to other volunteers.”
Why
The privacy rule is repeated wherever an email address is involved.
6
Unread count
A badge on Inbox in the sidebar.
Why
A number with a label, so it is not a color-only signal.
Final designs
Six screens, each annotated with what it does and why. Every screen was built from the Cleanup Co-Op design system and checked for contrast, text size and target size.
Screen 1 of 6
Home
Volunteers see their impact, what is coming up, and what needs them the moment they sign in.
The same page on a first visit: three steps to a first cleanup.
1
Impact tiles
Pounds removed, cleanups logged, areas cared for and awards earned, each in its own tone.
Why
The brief asked for a running tally. White icons on deep fills keep every tile above 4.5:1 contrast.
2
Your next cleanup
The next date with Directions and See on map, then the cleanup after it.
Why
The most likely next action sits at the top, so getting there takes one tap.
3
Your spots
Each adopted area, how often it is cleaned, and a due or overdue chip.
Why
Adopting is a promise. A gentle due date keeps areas cared for, and the chip always carries words, not color alone.
4
Awards
Earned awards, locked ones with progress, and the next one called out with a bar.
Why
Naming the next award gives people a reason to come back. Locked awards stay readable instead of fading out.
5
Join requests
Captains approve or decline by first name and last initial.
Why
The brief ruled out public emails, so captains decide by name and nobody sees an address.
6
Leaderboard
Pounds removed this fall, with the volunteer’s own row highlighted.
Why
A little friendly competition, with first names and last initials only.
Screen 2 of 6
Adopt an area
One map shows every beach, park and street, who has adopted it, and what is still open.
Adopting asks only how often and who with, then confirms by email.
1
Pins that say two things
The pin color and icon show the type of place; the small dot shows its status.
Why
Volunteers need to know what a place is and whether it is free. Labels mean status never relies on color alone.
2
Filter in one tap
All areas, Beaches, Parks, Streets and Open to adopt narrow the map.
Why
Most visits start with “what can I adopt near me?”, so open spots are one tap away.
3
Draw my section
A button that is always on the map, never hidden behind a pin.
Why
Many people clean only their stretch of a long street or shore, so adopting part of an area had to be easy to find.
4
Two ways to adopt
A short tip at the top of the list explains whole areas and sections.
Why
Drawing is new to most volunteers. One sentence explains it right where they decide.
5
Browse first, sign up later
Visitors see every map and team. Acting asks them to create an account or try the demo.
Why
Asking for an account before showing anything would lose people who are just curious.
6
A legend in words
Open, Adopted and Yours are labeled next to their dots.
Why
A color key alone would fail for color-blind volunteers.
Screen 3 of 6
Draw my section
People who clean only part of a street or shore tap where they start and stop, and adopt just that stretch.
On a phone the checklist becomes a bottom sheet over the map.
1
Line or shape
A street or shore is a line; a park section is a shape.
Why
Two clear modes beat one tool that guesses what you meant.
2
A checklist that ticks itself
Each step checks off as it happens, so people always know what is next.
Why
Drawing on a map is unfamiliar. The list answers “now what?” after every tap.
3
Points on the map
Tapped points join into a dotted line, with start and end rings.
Why
Seeing the line as it is drawn makes mistakes obvious before anything is saved.
4
A hint that follows
A dark tooltip near the line repeats the next step.
Why
Eyes are on the map while drawing, so the hint lives there too.
5
Points and length
A live count and a rough length in feet.
Why
The length becomes part of the adoption, so captains and staff know what was promised.
6
Undo and Clear
Quiet buttons to take back one point or start over.
Why
Mistaps on a map are common, especially on a phone. Recovery should cost one tap.
Screen 4 of 6
Log a cleanup
Logging takes under a minute: pick the spot, say who came, and count what you collected, as roughly or exactly as you like.
Right after logging, Home shows the new award and the updated totals.
1
Pick the spot
Search or tap a pin. Adopted spots come first.
Why
Most logs are for a place the volunteer already looks after.
2
Draw where you cleaned
Trace the route you actually walked.
Why
Routes show staff which stretches are covered and which are being missed.
3
Vacation pins
Cleaned away from home? Drop a pin anywhere.
Why
A brief must-have: a beach cleanup on vacation still counts toward a volunteer’s total.
4
What you picked
One line confirms the spot and route length, with Edit route.
Why
A quick check before submitting, without leaving the page.
5
Quick count or tally
Bags and pounds for most people; item counts for those who want them.
Why
Item counts feed Seaside’s reports, but making everyone count cigarette butts would stop people logging.
6
Photos with consent
Photos can also go to the team wall, with a checkbox to say so.
Why
Sharing is a choice each time, never a default someone forgets about.
Screen 5 of 6
Team page
A team shares a home spot, a photo wall, upcoming cleanups and a running total, without anyone’s email on show.
Finding a team: search by town and distance, then request to join.
1
Team totals
Members, cleanups and pounds, right under the team name.
Why
Shared numbers turn individual effort into something the team owns.
2
Your role
A chip says when you are the captain.
Why
Captains see extra tools, so the page says why.
3
Photo wall
Recent photos with who and when.
Why
The brief asked for team photos. Only photos people chose to share appear here.
4
Join requests
Accept or decline, by first name and last initial.
Why
The brief: “We don’t want the emails of team members to be public.”
5
Message, don’t email
Message team sends through the site, with a note that nobody sees emails.
Why
Saying it plainly builds trust with people joining a group of strangers.
6
Upcoming cleanups
Team dates with who is going and a one-tap I’m going.
Why
Turning up is the point of a team, so it is the easiest thing to do.
Screen 6 of 6
Inbox and scheduling
Every confirmation email is mirrored in an in-app inbox, and scheduling warns about clashes before they happen.
Scheduling catches a past date and offers to join the team’s cleanup instead.
1
Every email, in one place
Adoptions, requests, logs and awards, newest first.
Why
People lose emails. The inbox means a confirmation is never more than a tap away.
2
The real email
The preview is the email template itself.
Why
Staff and volunteers see exactly the same message, so support never has to guess.
3
A short summary
Area, how often and where to get a kit.
Why
The three facts people look for, without reading a paragraph.
4
One next step
Each email ends with a single action.
Why
A confirmation is the best moment to get the next cleanup on the calendar.
5
Privacy, said out loud
“Your email is never shown to other volunteers.”
Why
The privacy rule is repeated wherever an email address is involved.
6
Unread count
A badge on Inbox in the sidebar.
Why
A number with a label, so it is not a color-only signal.
Final designs
Six screens, each annotated with what it does and why. Every screen was built from the Cleanup Co-Op design system and checked for contrast, text size and target size.
Screen 1 of 6
Home
Volunteers see their impact, what is coming up, and what needs them the moment they sign in.
The same page on a first visit: three steps to a first cleanup.
1
Impact tiles
Pounds removed, cleanups logged, areas cared for and awards earned, each in its own tone.
Why
The brief asked for a running tally. White icons on deep fills keep every tile above 4.5:1 contrast.
2
Your next cleanup
The next date with Directions and See on map, then the cleanup after it.
Why
The most likely next action sits at the top, so getting there takes one tap.
3
Your spots
Each adopted area, how often it is cleaned, and a due or overdue chip.
Why
Adopting is a promise. A gentle due date keeps areas cared for, and the chip always carries words, not color alone.
4
Awards
Earned awards, locked ones with progress, and the next one called out with a bar.
Why
Naming the next award gives people a reason to come back. Locked awards stay readable instead of fading out.
5
Join requests
Captains approve or decline by first name and last initial.
Why
The brief ruled out public emails, so captains decide by name and nobody sees an address.
6
Leaderboard
Pounds removed this fall, with the volunteer’s own row highlighted.
Why
A little friendly competition, with first names and last initials only.
Screen 2 of 6
Adopt an area
One map shows every beach, park and street, who has adopted it, and what is still open.
Adopting asks only how often and who with, then confirms by email.
1
Pins that say two things
The pin color and icon show the type of place; the small dot shows its status.
Why
Volunteers need to know what a place is and whether it is free. Labels mean status never relies on color alone.
2
Filter in one tap
All areas, Beaches, Parks, Streets and Open to adopt narrow the map.
Why
Most visits start with “what can I adopt near me?”, so open spots are one tap away.
3
Draw my section
A button that is always on the map, never hidden behind a pin.
Why
Many people clean only their stretch of a long street or shore, so adopting part of an area had to be easy to find.
4
Two ways to adopt
A short tip at the top of the list explains whole areas and sections.
Why
Drawing is new to most volunteers. One sentence explains it right where they decide.
5
Browse first, sign up later
Visitors see every map and team. Acting asks them to create an account or try the demo.
Why
Asking for an account before showing anything would lose people who are just curious.
6
A legend in words
Open, Adopted and Yours are labeled next to their dots.
Why
A color key alone would fail for color-blind volunteers.
Screen 3 of 6
Draw my section
People who clean only part of a street or shore tap where they start and stop, and adopt just that stretch.
On a phone the checklist becomes a bottom sheet over the map.
1
Line or shape
A street or shore is a line; a park section is a shape.
Why
Two clear modes beat one tool that guesses what you meant.
2
A checklist that ticks itself
Each step checks off as it happens, so people always know what is next.
Why
Drawing on a map is unfamiliar. The list answers “now what?” after every tap.
3
Points on the map
Tapped points join into a dotted line, with start and end rings.
Why
Seeing the line as it is drawn makes mistakes obvious before anything is saved.
4
A hint that follows
A dark tooltip near the line repeats the next step.
Why
Eyes are on the map while drawing, so the hint lives there too.
5
Points and length
A live count and a rough length in feet.
Why
The length becomes part of the adoption, so captains and staff know what was promised.
6
Undo and Clear
Quiet buttons to take back one point or start over.
Why
Mistaps on a map are common, especially on a phone. Recovery should cost one tap.
Screen 4 of 6
Log a cleanup
Logging takes under a minute: pick the spot, say who came, and count what you collected, as roughly or exactly as you like.
Right after logging, Home shows the new award and the updated totals.
1
Pick the spot
Search or tap a pin. Adopted spots come first.
Why
Most logs are for a place the volunteer already looks after.
2
Draw where you cleaned
Trace the route you actually walked.
Why
Routes show staff which stretches are covered and which are being missed.
3
Vacation pins
Cleaned away from home? Drop a pin anywhere.
Why
A brief must-have: a beach cleanup on vacation still counts toward a volunteer’s total.
4
What you picked
One line confirms the spot and route length, with Edit route.
Why
A quick check before submitting, without leaving the page.
5
Quick count or tally
Bags and pounds for most people; item counts for those who want them.
Why
Item counts feed Seaside’s reports, but making everyone count cigarette butts would stop people logging.
6
Photos with consent
Photos can also go to the team wall, with a checkbox to say so.
Why
Sharing is a choice each time, never a default someone forgets about.
Screen 5 of 6
Team page
A team shares a home spot, a photo wall, upcoming cleanups and a running total, without anyone’s email on show.
Finding a team: search by town and distance, then request to join.
1
Team totals
Members, cleanups and pounds, right under the team name.
Why
Shared numbers turn individual effort into something the team owns.
2
Your role
A chip says when you are the captain.
Why
Captains see extra tools, so the page says why.
3
Photo wall
Recent photos with who and when.
Why
The brief asked for team photos. Only photos people chose to share appear here.
4
Join requests
Accept or decline, by first name and last initial.
Why
The brief: “We don’t want the emails of team members to be public.”
5
Message, don’t email
Message team sends through the site, with a note that nobody sees emails.
Why
Saying it plainly builds trust with people joining a group of strangers.
6
Upcoming cleanups
Team dates with who is going and a one-tap I’m going.
Why
Turning up is the point of a team, so it is the easiest thing to do.
Screen 6 of 6
Inbox and scheduling
Every confirmation email is mirrored in an in-app inbox, and scheduling warns about clashes before they happen.
Scheduling catches a past date and offers to join the team’s cleanup instead.
1
Every email, in one place
Adoptions, requests, logs and awards, newest first.
Why
People lose emails. The inbox means a confirmation is never more than a tap away.
2
The real email
The preview is the email template itself.
Why
Staff and volunteers see exactly the same message, so support never has to guess.
3
A short summary
Area, how often and where to get a kit.
Why
The three facts people look for, without reading a paragraph.
4
One next step
Each email ends with a single action.
Why
A confirmation is the best moment to get the next cleanup on the calendar.
5
Privacy, said out loud
“Your email is never shown to other volunteers.”
Why
The privacy rule is repeated wherever an email address is involved.
6
Unread count
A badge on Inbox in the sidebar.
Why
A number with a label, so it is not a color-only signal.
Tablet and mobile
The core flows were also designed at 834px and 390px, because most volunteers log a cleanup on a phone, standing at the spot they just cleaned.
Tablet, 834px
Home
Adopt an area
Log a cleanup
Mobile, 390px
Home
Draw my section
Log a cleanup
Rail becomes a tab bar
The sidebar turns into a bottom tab bar on phones, with Log a cleanup in the middle.
Panels become sheets
The area panel and draw checklist slide up from the bottom so the map stays visible.
Targets grow
Every tap target is at least 44px on touch screens, including map pins and steppers.
Tablet and mobile
The core flows were also designed at 834px and 390px, because most volunteers log a cleanup on a phone, standing at the spot they just cleaned.
Tablet, 834px
Home
Adopt an area
Log a cleanup
Mobile, 390px
Home
Draw my section
Log a cleanup
Rail becomes a tab bar
The sidebar turns into a bottom tab bar on phones, with Log a cleanup in the middle.
Panels become sheets
The area panel and draw checklist slide up from the bottom so the map stays visible.
Targets grow
Every tap target is at least 44px on touch screens, including map pins and steppers.
Tablet and mobile
The core flows were also designed at 834px and 390px, because most volunteers log a cleanup on a phone, standing at the spot they just cleaned.
Tablet, 834px
Home
Adopt an area
Log a cleanup
Mobile, 390px
Home
Draw my section
Log a cleanup
Rail becomes a tab bar
The sidebar turns into a bottom tab bar on phones, with Log a cleanup in the middle.
Panels become sheets
The area panel and draw checklist slide up from the bottom so the map stays visible.
Targets grow
Every tap target is at least 44px on touch screens, including map pins and steppers.
Prototype
Try the clickable prototype
I linked the Figma screens into five desktop flows that follow the user flow lanes, plus phone and tablet walkthroughs. These are what I used to walk Seaside’s stakeholders through the design before handoff.
Desktop flows
Flow 1
Sign up and adopt a spot
Browse the map as a visitor, create an account, draw a section of Ocean Ave and adopt it.
Open in Figma
Flow 2
Log a cleanup
From Home, log a cleanup with a route and a detailed tally, then see the new award.
Open in Figma
Flow 3
Find and join a team
Search for a team nearby, ask to join, and see the request a captain approves by name.
Open in Figma
Flow 4
Schedule and inbox
Read a confirmation in the inbox, then schedule the next cleanup.
Open in Figma
Flow 5
Errors and edge cases
A guided tour of all nine error states, from a wrong password to page not found.
Open in Figma
How to view
Getting around
Each link opens the flow at its first screen in Figma’s presentation view.
Click anywhere to see what’s clickable on a screen.
Press R to restart a flow, or use the flow menu to jump to another one.
Phone and tablet
Prototype
Try the clickable prototype
I linked the Figma screens into five desktop flows that follow the user flow lanes, plus phone and tablet walkthroughs. These are what I used to walk Seaside’s stakeholders through the design before handoff.
Desktop flows
Flow 1
Sign up and adopt a spot
Browse the map as a visitor, create an account, draw a section of Ocean Ave and adopt it.
Open in Figma
Flow 2
Log a cleanup
From Home, log a cleanup with a route and a detailed tally, then see the new award.
Open in Figma
Flow 3
Find and join a team
Search for a team nearby, ask to join, and see the request a captain approves by name.
Open in Figma
Flow 4
Schedule and inbox
Read a confirmation in the inbox, then schedule the next cleanup.
Open in Figma
Flow 5
Errors and edge cases
A guided tour of all nine error states, from a wrong password to page not found.
Open in Figma
How to view
Getting around
Each link opens the flow at its first screen in Figma’s presentation view.
Click anywhere to see what’s clickable on a screen.
Press R to restart a flow, or use the flow menu to jump to another one.
Phone and tablet
Prototype
Try the clickable prototype
I linked the Figma screens into five desktop flows that follow the user flow lanes, plus phone and tablet walkthroughs. These are what I used to walk Seaside’s stakeholders through the design before handoff.
Desktop flows
Flow 1
Sign up and adopt a spot
Browse the map as a visitor, create an account, draw a section of Ocean Ave and adopt it.
Open in Figma
Flow 2
Log a cleanup
From Home, log a cleanup with a route and a detailed tally, then see the new award.
Open in Figma
Flow 3
Find and join a team
Search for a team nearby, ask to join, and see the request a captain approves by name.
Open in Figma
Flow 4
Schedule and inbox
Read a confirmation in the inbox, then schedule the next cleanup.
Open in Figma
Flow 5
Errors and edge cases
A guided tour of all nine error states, from a wrong password to page not found.
Open in Figma
How to view
Getting around
Each link opens the flow at its first screen in Figma’s presentation view.
Click anywhere to see what’s clickable on a screen.
Press R to restart a flow, or use the flow menu to jump to another one.
Phone and tablet
Checking the design
What we checked
An accessibility audit of every screen, then a clickable Figma prototype walked through with Seaside’s stakeholders
What changed
Deeper fills behind white icons, stronger control borders and larger targets, fixed once in the tokens so every screen updated
Checking the design
What we checked
An accessibility audit of every screen, then a clickable Figma prototype walked through with Seaside’s stakeholders
What changed
Deeper fills behind white icons, stronger control borders and larger targets, fixed once in the tokens so every screen updated
Checking the design
What we checked
An accessibility audit of every screen, then a clickable Figma prototype walked through with Seaside’s stakeholders
What changed
Deeper fills behind white icons, stronger control borders and larger targets, fixed once in the tokens so every screen updated
Where it landed
41
desktop screens: 32 core screens and 9 error and edge-case states
4.5:1
minimum text contrast across every screen after the audit
16 wks
to an MVP one part-time developer can ship, with two phases after
The app is in development. Adoption, logging and team numbers will be added here after launch.
Where it landed
41
desktop screens: 32 core screens and 9 error and edge-case states
4.5:1
minimum text contrast across every screen after the audit
16 wks
to an MVP one part-time developer can ship, with two phases after
The app is in development. Adoption, logging and team numbers will be added here after launch.
Where it landed
41
desktop screens: 32 core screens and 9 error and edge-case states
4.5:1
minimum text contrast across every screen after the audit
16 wks
to an MVP one part-time developer can ship, with two phases after
The app is in development. Adoption, logging and team numbers will be added here after launch.
Reflections
What worked
Building the system first. When the audit found weak contrast, fixing a handful of tokens fixed 40-plus screens at once.
What was hard
Drawing part of a street on a map is new to most volunteers. Making it obvious took a checklist, a live hint and a clear way to undo.
What I would change
Test Draw my section with real volunteers on phones, at the beach, before the build reaches Phase 2.
Reflections
What worked
Building the system first. When the audit found weak contrast, fixing a handful of tokens fixed 40-plus screens at once.
What was hard
Drawing part of a street on a map is new to most volunteers. Making it obvious took a checklist, a live hint and a clear way to undo.
What I would change
Test Draw my section with real volunteers on phones, at the beach, before the build reaches Phase 2.
Reflections
What worked
Building the system first. When the audit found weak contrast, fixing a handful of tokens fixed 40-plus screens at once.
What was hard
Drawing part of a street on a map is new to most volunteers. Making it obvious took a checklist, a live hint and a clear way to undo.
What I would change
Test Draw my section with real volunteers on phones, at the beach, before the build reaches Phase 2.