Problem
Conservation experiences can become information-heavy, making it hard for users to understand where to begin. The challenge was to clarify the path from learning about the mission to choosing a concrete support action.
UX/UI Design · React · Accessibility
Park Protectors
A responsive advocacy and donation experience that helps people discover national park conservation efforts, understand how to help, and take action with less friction.
Overview
Helping users move from interest to action.
Park Protectors began as a conservation-focused product concept for people who care about national parks but need clearer ways to get involved. The site brings together education, volunteer stories, donation entry points, and park information in one cohesive experience.
The project gave me room to connect product thinking with front-end execution: organize the user journey, prototype the interface, and build a working responsive site.
My Role
I shaped the information architecture, created wireframes and high-fidelity UI direction, then translated the experience into a React site with responsive layouts and clearer calls to action.
Methodology
A simple flow from research to build.
-
01
Research + framing
Defined key user needs around park discovery, conservation education, volunteering, and donating.
-
02
Low-fidelity structure
Mapped landing, donation, and confirmation flows before refining the visual system.
-
03
High-fidelity design
Built a warmer conservation brand system with clear hierarchy, accessible contrast, and direct CTAs.
-
04
React implementation
Translated the design into a responsive front-end experience and published the working site.
Process Artifact
Paper prototype to product structure.
The early prototype focused on the core user path: landing page, donation flow, confirmation, and follow-up. This helped keep the build grounded in user action instead of decoration.
Design Decisions
I used a strong hero image to create immediate context, then organized the page around volunteer stories, park opportunities, and donation actions. The visual language uses earthy greens and warm accents to support the conservation theme.
What I Learned
This project reinforced how important it is to connect UI polish with a clear task model. A beautiful page only works when users understand what to do next and why it matters.
4
Core screens planned across landing, donation, and confirmation flows.
3
Primary user actions clarified: explore, volunteer, donate.
1
Responsive React site built and published for review.