2024 - present
Scaling Civic Action:
From Static Site to PWA
Led end-to-end UX research and product design to transform a static sub-page into a complete Progressive Web App (PWA) that streamlines high-capacity volunteer management for the City of Denver.
Role
UX Reseacher
UX Designer
Team
Give 5 Org
PM, Backend Developer
Timeline
4 months (MVP)
Oct 2024- Jan 2024
%201.svg){kind=small}
Problem
Denver’s volunteer initiative lacked a centralized infrastructure, relying on fragmented Typeforms and manual data entry. This friction prevented volunteers and businesses from effectively connecting, stalling the project’s ability to scale city-wide.
Outcome
Architected and launched a full-scale Progressive Web App (PWA) that transformed a single static sub-page into a robust, multi-sided ecosystem. The platform serves as the single source of truth for the Mayor’s office, automating volunteer onboarding and providing dedicated portals for business and organizational partners to manage their own impact.
.svg){kind=small}
Impact
Established a centralized infrastructure for a civic vision.
Ecosystem scheduled to automate onboarding and event registration for 250+ active Give 5 volunteers.
City Officials predicting 14+ local organizations and businesses impacted by Summer 2026.
About Give5
How did it start?
History behind the initiative
Established in 2024 by Denver’s First Lady, Courtney Johnston, Give5 Mile High is a city-wide initiative designed to transform civic engagement into a consistent community habit. The movement challenges residents to pledge five hours of service monthly, bridging the gap between volunteers, local nonprofits, and supporting businesses.
who is it for?
Stakeholders
- The First Lady of Denver, Mayor's Office Leads, City Council.
- Local Business Owners, Nonprofit Directors.
- Denver Residents, Volunteer Coordinators, Community Activists.
challenges
Friction Points (Screenshots)
.png)
Friction Points (Breakdown)
Static entry points limited accessibility and discoverability, making the initiative feel exclusive rather than city-wide.
Lengthy sign-up forms created friction, deterring busy users who required a quick registration path.
Vague event listings lacked critical details like points of contact, preparation, and specific timing.
Generic contact points flooded the team with irrelevant communications instead of targeted inquiries.
Research and Design Objectives
Architect a multi-sided digital ecosystem that transitions the Give 5 initiative from a static landing page into a centralized platform for volunteers, local businesses, and nonprofit organizations.
Streamline the volunteer conversion funnel by designing an intuitive, low-friction registration flow that minimizes manual data entry.
Establish direct communication loops between volunteers and event coordinators to resolve inquiries in real-time and increase retention.
Engineer a scalable incentive framework that connects volunteer milestones with local business rewards.
Research
methodology - qualitative
decoding the denver volunteer experience
To understand the emotional landscape of volunteering, I conducted qualitative 1:1 interviews with Denver-based volunteers and a group session with active Give 5 members. My goal was to uncover the core motivations and friction points within the current experience by answering the following:
What motivates people to volunteer in Denver?
What are the challenges people face when volunteering?
What are the most memorable parts of their volunteer experience?
What could be improved about the current Give 5 ecosystem?
1:1 interviews
Why do you volunteer?
To capture the "individual spark" of service, I conducted seven 30-minute in-depth interviews with a diverse demographic (Ages 18–54) who had volunteered in Denver within the last five years. This qualitative deep-dive allowed me to uncover some of the primary drivers of long-term civic commitment.
view full analysis.png)
.png)
.png)
.png)
results
Affinity Mapping
insights
1:1 interview takeaways
skill building
Volunteers developed practical "hard" skills like logistics and animal care, alongside "soft" skills such as improved communication and the ability to calm high-stress environments. Additionally, these roles provided "non-theoretical" insights into organizational hierarchies, helping some participants make informed career decision
pre-instruction
The research concluded that the Give 5 app must prioritize transparency and pre-arrival preparation. Volunteers want to know exactly what is needed before they arrive to avoid "standing around" and to ensure their efforts result in a "concrete measurable benefit" they can see every day.
memorable moments
Research revealed that volunteers primarily recall moments of either high-intensity physical challenges or profound emotional gratitude. While some were shaped by safety-related "sparks" like trail mishaps, most found lasting meaning in "tangible outcomes" and the communal "vibe facilitation" built during service.
vibes and comfort
For some, the most memorable part was not a single event but the "vibe facilitation"—the overall laughter and community built while performing mundane tasks like shoveling, group reading, or food packing.
group interviews
What do current Give 5 volunteers want?
To capture broader community insights, I attended a group session with 50+ active members to observe real-time feedback and identify the essential features missing from the current digital ecosystem. This collaborative environment allowed me to move beyond nonspecific, individual stories and pinpoint collective desires from members who consistently volunteer in the program.
interiew notesinsights
group interview takeaways
streamlined
onboarding
Participants strongly expressed that current volunteer registration feels too much like "trying to sign up for a job as opposed to help out". The process is often described as "cumbersome," requiring repetitive logins, multiple mandatory classes, and tough interview processes just to begin.
Preparation and
communication
A primary frustration for volunteers is arriving at a site and "not being told what to do or where theyare supposed to do it". The research highlights that "knowing what needs to be done before arriving is the most important thing".
social
COnnection
Social interaction is a major driver of volunteer satisfaction, with "team or group experiences favored" across nearly all participants. Research indicates that "intragroup chemistry" and the collective "vibe" make mundane tasks like shoveling or packaging food more enjoyable.
visual design
Aesthetics
Designing within established constraints
Bound by the existing Give 5 logo and palette, I engineered a custom typography and depth system to compliment what was already built. I implemented high-radius tokens and complex shadows to define hierarchy while maintaining a clean, off-white UI.
Typography Duo
Figtree for geometric clarity; League Spartan for bold accents.
High-Radius Tokens
Softened corners to increase perceived approachability.
Elevation System
Layered shadow effects to create depth on a clean canvas.
.png)
.png)
Experience design
Execution
Bridging Design to Development
To translate our high-fidelity Figma prototypes into a functional PWA, I maintained a continuous feedback loop with engineering through both in-person and virtual syncs. We focused on establishing clear design tokens and technical specifications, ensuring a seamless handoff as the developer leveraged Claude, Vercel, and Supabase to bring the platform to life. This collaborative process validated that every interaction was technically viable and polished before moving into production.
The Volunteer Experience
Prioritizing frictionless user journeys.
1
Streamlined Onboarding (Sign-up)
2
Direct-to-Org Messaging (Communication)
3
One-Tap Event Registration (Registration)
The Partner & Admin Experience
Optimizing management workflows.
1
Rapid Volunteer Check-in (Check-in)
2
Dynamic Event Management (Editing)
3
Centralized Org Administration (Managing)
The Volunteer Experience
1. Streamlined Onboarding
We simplified onboarding by utilizing Supabase to trigger a six-digit verification code via email. To reduce cognitive load, we unified the login and signup flows into a single input field, ensuring a frictionless, identical entry process for both new and returning users.
The Volunteer Experience
2. Direct to Org Messaging
We implemented a direct-to-organizer messaging system to streamline event communication. By enabling inquiries directly from the event list and detail views, we ensured users reach specific points of contact immediately. This decentralized routing prevents the mayor’s office from being flooded with low-level logistical queries.
The Volunteer Experience
3. Quick Event Registration
I designed a seamless registration process directly within the event details page to minimize navigation steps. Upon completion, a notification drawer provides immediate confirmation, offering users a one-tap action to add the event to their calendar for automated reminders and personal tracking.
The Admin Experience
1. Quick Event Check-in
The Admin Experience
2. Dynamic Event Management
The admin Experience
3. Quick Event Registration
results
Delivering Measurable Impact.
While we await the full platform release and stress test in Summer 2026, we have already leveraged early feedback from Give 5 volunteers to refine the experience. This proactive testing phase allowed us to implement minor backend optimizations and UI adjustments based on real user input. To maintain design integrity, we are intentionally avoiding further arbitrary changes until the first live event is fully connected, allowing us to capture authentic registration data and user behavior as our primary guide for future scaling.
Future improvements:
- Volunteers can host rewards in their Apple Wallet.
- Give 5 "Wrapped" For volunteers, organizations, and businesses to share their monthly, quarterly, and yearly impact in review to their socials.
- Localization: Support for multiple languages makes the volunteer app accessible and welcoming for everyone.
- Haptic Features: Haptic feedback adds gentle vibrations to confirm actions, making the volunteer app easier and more engaging to use.
"Love the super easy to use interface, the view for each event is really nice and clean. Love the little hand for the hours counter!"
what did we learn?
Stakeholder Alignment
Managing high-impact platforms taught me that success relies on understanding diverse stakeholder goals. Coordinating between the Mayor’s Office, local businesses, and organizations proved that precise communication is essential for project scale. I learned to plan for complex ecosystems where aligning institutional needs is as critical as the interface itself.
AI-Augmented Development
Collaborating with a developer and Claude required a flexible design-to-code workflow. We maintained a tight feedback loop, adapting Figma files when technical deviations occurred. This experience taught me to embrace the unpredictability of AI, turning implementation hurdles into opportunities for creative problem-solving and rapid iteration.
Immersive Research
While interviews provided a foundation, this project highlighted that firsthand ethnographic research is irreplaceable. Observing the physical reality of volunteer events is essential for achieving true user-centricity. I am committed to using these immersive insights to scale the platform and meet the practical needs of thousands of future users.
.png)
Next Case Study