Goodwill For The 'Ville

The Problem

There is no centralized, mobile-responsive hub for grassroots volunteering in the Catonsville area. While community members actively seek micro-volunteering tasks (such as 15-minute virtual duties) or family-friendly activities they can do with their children, this information is fragmented across disconnected websites and social media pages. Without an accessible, on-the-go platform to bridge this gap, passionate local volunteers remain disengaged and vital local non-profits stay under-supported.

The Goal

Design a centralized, mobile-responsive web platform for Goodwill for the 'ville to bridge this gap by connecting local volunteers directly with organizations like the Catonsville CEA, the Children's Home, and the Catonsville Co-op. The goal is to build an intuitive, on-the-go experience that empowers busy residents to effortlessly discover and filter volunteer opportunities tailored precisely to their availability (from 15 minutes to an hour) and family needs.

Project Overview

Role: Lead UX/UI Designer
Timeline: [Insert Timeframe, e.g., May — June 2026]
Platform: Mobile Responsive Web
Context: Google UX Design Certificate Project
Tools: Figma

Understanding the Audience

To design a truly effective centralized hub, the research focused on two primary user groups in the local community who want to give back but face modern lifestyle constraints:

1. The Busy Parent

The Core Need: Needs highly visible, clear indicators for "family-friendly" or "kid-friendly" tasks. They want to volunteer but cannot always leave their children at home, turning community service into a shared family activity.
Mobile Mindset: Likely browsing on their phone during quick gaps in the day (waiting in school pickup lines, between activities), requiring high-legibility layouts and quick tap targets.

2. The Micro-Volunteer

The Core Need: Wants to contribute but has unpredictable or highly limited availability. They are looking for hyper-flexible commitments, such as quick 15-minute virtual tasks or 1-hour local drop-offs.
Mobile Mindset: Needs an efficient, frictionless filtering system to find a task instantly without digging through dense desktop-style text blocks.

Leveraging AI for Strategic Persona Development

To establish a solid foundation for the user experience, I utilized AI to generate data-driven personas based on target market demographics and known volunteer behavior trends. Integrating AI into my research phase allowed me to rapidly synthesize complex user archetypes, accelerating the ideation process and establishing a clear direction for the mobile responsive architecture early on.

While AI provided the structural framework for these user mindsets, I continuously audited and refined the personas to ensure they accurately reflected the authentic, practical needs of local community members.

Design Evaluation & Persona Walkthrough

Because this project utilized AI-generated user archetypes for rapid ideation, I conducted a structured Heuristic Evaluation and simulated user walkthroughs to audit these low-fidelity digital wireframes. By stepping into the specific mobile constraints of the Busy Parent and the Micro-Volunteer, I evaluated the interface's scannability, layout efficiency, and cognitive load.

1. The Micro-Volunteer Perspective (Efficiency & Speed)

The Goal: Quickly find an immediate, low-commitment task (like a 15-minute or 1-hour project) while on the go.
The Evaluation: The structural layout performs exceptionally well here. By dedicating explicit horizontal rows to "15 min tasks" and "1 hour tasks" right on the organization pages, the interface eliminates the need for complex, nested filtering. A user can launch the mobile site and see immediate options tailored to their exact block of time in just a couple of scrolls.

2. The Busy Parent Perspective (Clarity & Inclusivity)

The Goal: Effortlessly identify volunteer opportunities that accommodate children.
The Evaluation: The vertical stack successfully isolates "Family-Friendly" opportunities into their own distinct section. This prevents parents from having to read through dense task descriptions just to find a quick footnote about child restrictions. However, to optimize this for a distracted parent holding a phone with one hand, a valuable next step would be introducing color-coded badges or prominent icons to make these rows visually pop instantly.

Visual Design & High-Fidelity Mockups

Transitioning from low-fidelity wireframes to the final high-fidelity interface required translating our core structural hierarchy into an engaging, cohesive visual experience. Because Goodwill for the 'ville is a hyper-local grassroots platform, the visual system was intentionally crafted to feel deeply rooted in the Catonsville community.

Goodwill For The 'Ville Mobile Site Mockup.png

A Catonsville-Inspired Color Palette

Rather than selecting arbitrary colors, I developed a custom visual identity directly inspired by local history and landmarks to create an instant sense of familiarity and trust for users:

Historic Blue (#2C5F78): Used as the primary anchor color for headers, buttons, and structural layouts to establish a stable, trustworthy foundation.
Spring Grove Green (#7FB069): Integrated throughout to reflect community growth, vitality, and the natural local landscape.
Trolley Trail Gold (#F2C057): Leveraged as a warm accent color to highlight actionable cards, featured sections, and important community alerts.
Lansdowne Cream (#F9F7F2): Utilized as a clean, warm background canvas to replace stark, harsh whites, ensuring a welcoming interface.

Accessibility & On-The-Go Legibility

In alignment with strict inclusive design standards, text hierarchies and background elements in the mockup were meticulously checked for contrast ratios. By pairing high-contrast text against structured Trolley Trail Gold and Lansdowne Cream container cards, the interface ensures that a busy parent holding a child or a micro-volunteer standing outside can scan task data, identify time requirements, and tap buttons effortlessly without eye strain.

Persona Validation Audit

With the final visual design implemented, I ran a final validation audit against my initial AI-generated personas to ensure that the introduction of imagery, color, and branding enhanced—rather than distracted from—the core user goals.

1. The Micro-Volunteer Check

The Test: Can a user with only a 15-minute window immediately find a task on the high-fidelity screens?
The Result in the image of the high-fidelity mockup: Yes. The bright Trolley Trail Gold task cards are clearly categorized under bold headers labeled "15 min tasks" and "hour-long tasks." The high visual contrast allows an on-the-go user to spot a micro-task instantly without filtering through menus.

2. The Busy Parent Check

The Test: Can a distracted parent easily verify if an activity is safe or appropriate for their children?
The Result in the image of the high-fidelity mockup: Yes. The dedicated "Family-friendly Tasks" section uses large, distinct container cards at the bottom of the feed. By isolating these opportunities visually, parents can confidently tap and sign up for a family activity with one hand while managing their kids.

Takeaways & Lessons Learned

Empowering Design with AI

Integrating AI-generated personas into my research phase was a game-changer for this project. It allowed me to rapidly synthesize complex user behaviors into actionable archetypes, giving me a solid foundation for mobile-first constraints early on. This project taught me how to view AI not as a replacement for user empathy, but as a powerful workflow accelerator that frees up cognitive space for intentional interaction design and strategic branding choices.

Intentionality Drives Impact

Designing for a hyper-local ecosystem like Catonsville reinforced that a digital product should feel extension of its real-world community. Anchoring the design system in localized brand tokens—like Historic Blue, Spring Grove Green, Trolley Trail Gold, and Lansdowne Cream—proved that digital aesthetics can build immediate, localized trust.

Inclusive, On-the-Go UX

By prioritizing a rigorous comparison of high-contrast typography scales and accessible contrast ratios, the final high-fidelity screens in image_710a36.jpg prove that high legibility benefits everyone—whether it is a micro-volunteer quickly navigating on-the-go or a busy parent balancing family priorities.