Community Outreach Opportunity Page

Role UX/UI Designer

Tools Figma

Team Developers, Product Managers, UX/UI Team

Project Overview

The Community Outreach (CO) feature was designed to give site users a centralized and streamlined view of their outreach efforts. The goal was to create a consolidated experience where users could view, edit, and track opportunities, materials distributed, and participant funnel progress—all from one intuitive interface.

Problem

Previously, Community Outreach efforts were scattered and lacked a standardized UI. Users had no easy way to view or edit outreach opportunities, log distributed materials, or track participant engagement in one place. There was a clear need for a more cohesive and dynamic interface tailored to different types of outreach.

Process

  • Conducted discovery with stakeholders to define key goals and user needs.

  • Created wireframes and user flows based on different opportunity types (Event, Location, Referral Provider).

  • Designed the detail page with Tailwind CSS standards to ensure visual and functional consistency.

  • Worked closely with developers to implement dynamic field rendering based on selected opportunity type.

  • Incorporated editable fields for status, notes, and comments.

  • Designed and tested a funnel grid that dynamically displays participant progress.

  • Included a materials log section to track distributed resources tied to each CO opportunity.

Key Features

  1. Consolidated Grid View: Displays all CO opportunities for a specific study.

  2. Editable Detail Page: Users can view and edit general information, set status, add comments, and log materials.

  3. Dynamic Fields: Field visibility and editability changes based on opportunity type (Event, Location, or Referral Provider).

  4. Custom Fields: Admin-defined custom fields integrated into layout.

  5. Participant Funnel Grid: Tracks and displays real-time participant progression from outreach.

Outcome & Learning

The redesigned interface improved site engagement with Community Outreach tools and reduced user confusion. By tailoring fields to opportunity type and surfacing key participant data in a single screen, the workflow became significantly more efficient. This project also strengthened cross-functional collaboration between design and engineering, ensuring UI consistency and accessibility throughout the platform.