A responsive advocacy and donation experience that helps people discover national park conservation efforts, understand how to help, and take action with less friction.
Park Protectors began with a broad question: how might people who care about public lands find a practical way to help? The team combined research, information architecture, prototyping, and front-end development to create a working responsive website.
Challenge
Interest was high. The path to action was scattered.
Volunteer listings, park information, conservation news, and donation routes often lived in separate systems.
Approach
Make each action visible, specific, and easy to scan.
Research shaped a task model centered on discover, volunteer, donate, and stay informed.
Contribution
Design decisions carried through to a coded product.
I contributed UX/UI design and translated the system into React components and responsive front-end behavior.
Research
Evidence narrowed a broad mission into a focused product.
Interviews, a 20-response survey, and competitive review pointed to the same gap: people wanted to help, but lacked a dependable place to discover nearby opportunities and understand what to do next.
20
Survey responses
Participants ranged across the project’s target audience and helped prioritize conservation interests and action tools.
60%
Wanted ready-made sign-up
The clearest resource preference was a direct volunteer sign-up experience rather than another information-only site.
35%
Led with natural beauty
Natural beauty was the top reason parks mattered, followed closely by conservation at 30%.
Research synthesis
Three signals shaped the experience.
The dense research board is preserved as source evidence, but the case study translates it into the decisions that mattered most for the product.
People did not know where opportunities were posted.
A centralized, searchable set of volunteer opportunities became a core product requirement.
02 · Confidence
Users needed enough context before committing.
Dates, locations, activities, and expectations needed to be visible before sign-up.
03 · Momentum
Clear calls to action mattered more than feature volume.
The experience separated learn, volunteer, and donate paths so users could act without decoding the organization.
Competitive analysis
Strong missions, fragmented action paths.
The review covered established conservation organizations and volunteer-discovery platforms. Their strengths informed credibility; their gaps created room for a simpler action hub.
High trust, strong advocacy, rich educational content.
Move action choices closer to the content that inspires them.
American Hiking Society / Earthjustice
Clear causes and strong mission-driven storytelling.
Make local opportunities easier to discover and compare.
Parks Project / VolunteerMatch
Concrete participation models and searchable opportunities.
Unify discovery, context, giving, and conservation education.
Synthesis
Designing for the motivated but under-informed supporter.
Desiree represents a park patron who already cares about conservation. Her barrier is not motivation—it is finding timely, trustworthy opportunities that fit her schedule.
Primary synthesized persona · Desiree Henriott
“I want to give back to the parks I care about, but I need one easy place to see what is happening and how I can help.”
Goal
Find meaningful conservation work without hunting across channels.
Barrier
Social feeds and separate park sites made opportunities easy to miss.
Design implication
Pair searchable opportunities with visible dates, locations, and next steps.
Journey + narrative
From passive concern to a completed action.
The journey map exposed confidence dips around discovery and sign-up. The storyboard made the desired transformation tangible: Mariah moves from wanting to help to joining a park clean-up.
Journey map · emotional highs, lows, and intervention pointsStoryboard · a simple path from awareness to participation
Information architecture
Organized around user intent, not internal structure.
The sitemap creates direct routes to About, Volunteer, Contact, and Donate. Search remains globally available, while supporting pages handle confirmation, values, and follow-up.
Core decisionKeep volunteering and donating as distinct, first-level actions.
Sitemap · primary routes, support tasks, and utility functions
Paper prototype + low fidelity
Test the hierarchy before polishing the interface.
Early screens established the landing hierarchy, mission content, volunteer discovery, and donation entry points. The team used the prototype to check navigation language and task sequence before committing to visual detail.
Early prototype sequence · navigation and content hierarchy
Before
Information competed for attention.
Early concepts treated mission content and task actions with similar weight.
After
Action routes became the organizing system.
Donate and Volunteer moved into persistent, scannable positions across the experience.
Visual evolution
From a broad earth-tone palette to a tighter coded system.
The original guide established the conservation voice. During implementation, the visual language was simplified into monochromatic greens, near-black navigation, generous white space, and clearer interactive contrast.
Original visual direction.Original style guide · Work Sans, Releway, earth tones, imagery, and UI elements
Implemented coded system.
#000000#31471E#B3DC6C#F6FBE8
Calmer contrast. Clearer states.
The implementation uses strong dark anchors and restrained green surfaces to keep content legible and calls to action distinct.
Coded product
Designed in Figma. Implemented in React.
The final experience is a responsive coded website—not only a concept. It includes navigable content, volunteer filtering, a park map, live news links, and a front-end donation demonstration.
parkprotectors.org
Desktop · live coded homepageMobile · responsive implementation
01 · Discover opportunities
Searchable volunteer cards turn interest into a concrete next step.
Users can scan activity, date, time, and location, then narrow the set by keyword or state.
parkprotectors.org
02 · Support conservation
A focused giving path keeps the mission connected to action.
Donation content explains why support matters and presents a clear front-end path. Payment processing was outside this implementation and is not represented as production-ready.
parkprotectors.org
03 · Build trust
Mission, values, and conservation context support informed action.
The About experience gives users the organizational context they need before volunteering or contributing.
parkprotectors.org
Front-end implementation
A component-based build with real responsive behavior.
React and JavaScript power reusable content structures and interactions. The implementation also incorporates routing, motion, a map experience, and GitHub Pages deployment.
Foundation
React + Vite
Reusable page, navigation, card, and form components.
Interaction
JavaScript + routing
Search, filtering, responsive navigation, and route-based flows.
Location
Leaflet map
Park discovery through mapped locations and search controls.
Delivery
GitHub Pages
A publicly accessible coded prototype for review and iteration.
Accessibility focus
Clarity is part of the interaction design.
High-contrast navigation and action labels
Consistent heading and content hierarchy
Large click targets and descriptive form labels
Responsive layouts that preserve readable text sizes
Usability testing
Positive purpose and design signals, with interaction details to refine.
Qualitative testing validated the concept’s purpose, visual direction, and overall function. It also surfaced prototype behavior that could confuse users when an interaction did not respond as expected.
What worked
Purpose was immediately understandable.
Participants responded positively to the mission, visual design, and usefulness of the product.
Keep the clear mission-to-action relationship.What needed refinement
Prototype feedback states needed to be more explicit.
A trivia interaction created confusion when the prototype did not behave like a finished interface.
Design complete states and test the coded interaction directly.What the build changed
Implementation forced tighter prioritization.
The coded version reduced visual variation and concentrated on the strongest discovery and action routes.
Continue validating live flows at mobile sizes.
Outcome
A working foundation for conservation action.
Park Protectors demonstrates the complete path from research to a responsive React product. The result brings mission, volunteer discovery, park information, and giving into one coherent system.
What I would improve next
Create a portal for organizers to submit volunteer opportunities.
Validate accessibility with assistive-technology testing.
Complete legal, security, and compliance work before enabling transactions.
Measure search-to-sign-up and donation intent in a longer pilot.
