Transforming Civic Engagement - Chicago DPD Website Redesign

Cover Image with the mockups of Chicago DPD Website Redesign

The Challenge

The City of Chicago’s Department of Planning and Development needed a complete website overhaul to serve three critical user groups: residents seeking neighborhood development information, professionals navigating complex review processes, and overwhelmed city staff fielding repetitive inquiries.

Key Problems:

  • Scattered information with unclear pathways
  • No centralized project tracking for ongoing developments
  • Limited community engagement opportunities
  • Staff overwhelmed by routine questions that could be self-served

Our Solution: A Complete Digital Transformation

Streamlined Navigation Architecture

We created six intuitive sections with integrated search that match how users actually think about planning and development:

🏠 Homepage - Strategic hub featuring services overview, interactive project map, commission links, calendar widget, video content, and latest news

⚙️ Services and Programs - Six core service areas organized by user needs:

  • Zoning (regulations and processes)
  • Small Business Development (entrepreneur support)
  • Planning and Design (development review standards)
  • Historic Preservation (landmark processes)
  • Land Sales (property opportunities)
  • Economic Development (city-wide initiatives)

🗺️ Projects and Initiatives - Comprehensive project transparency hub with interactive mapping and detailed project tracking

📚 Resource Hub - Organized library grouped by user type rather than department structure (Homeowners, Small Businesses, Developers, Chain Stores, Contractors)

📰 News - Announcements, press releases, and updates with newsletter integration

ℹ️ About - Department information, leadership, organizational structure, and commission details

Sitemap.png

Key Innovations

Interactive Development Projects Map The centerpiece of community engagement, featuring:

  • Advanced filtering by neighborhood, ward, project type, size, and status
  • Dual-view interface with interactive map alongside browsable project list
  • Comprehensive search by project title or address
  • Individual project pages with images, real-time status updates, progress timelines with attached documents, and community engagement tools (public comments, email subscriptions)
  • Nearby projects discovery to understand broader neighborhood development patterns

    Development Project Map.png

Project Detail Page.png

Strategic Homepage Design The homepage functions as both information hub and action center:

  • Services and Programs overview for immediate orientation
  • Featured Development Projects Map promoting neighborhood engagement
  • Commission quick access to key decision-making bodies
  • Events calendar widget with hover details
  • Video content section for visual process explanations
  • Latest news integration for ongoing updates

Homepage.png

Three-Tier Service Architecture We designed a logical progression from general to specific:

Tier 1 - Service Overview: Large cards for each service with titles, descriptions, quick links, and “View Section” buttons

Tier 2 - Process Pages: Service-specific pages with process cards (e.g., Planning and Design includes Small Projects, Large Projects, Design Review) plus targeted FAQ sections addressing common questions staff receive

Tier 3 - Detailed Process Pages: Comprehensive guides featuring:

  • Hero sections with explanatory videos and plain-language titles
  • Step-by-step visualizations with collapsible sections
  • Clear timeline expectations
  • Process-specific FAQs

3 tier.png

Comprehensive Events and Meetings System

  • Flexible discovery: Search by address or project title, filter by ward/community area/event type/commission
  • Dual viewing options: Calendar and list formats
  • Complete transparency: Individual event pages with logistics, registration, descriptions, meeting materials, and historical recordings
  • Consistent integration: Calendar widgets throughout the site for immediate event visibility

Meetings and Events.png

Commission Transparency Platform Each commission features:

  • Overview cards with descriptions and access points
  • “How to Participate” sections for clear civic engagement pathways
  • Upcoming and past meetings with full documentation
  • Member rosters and procedural information
  • Historical context and official reports

Commission Transparency Platform.png

Consistent User Experience Patterns

Standardized Side Panel System We integrated a consistent side panel across all pages where users could predictably find key actions and information:

  • Quick Links for section-specific shortcuts
  • Online Appointments where applicable (creating clear expectations about service availability)
  • Public Engagement Tools including “Submit Public Comment” and “Sign Up for Email Updates” widgets
  • Contact Information for direct department access

This systematic side panel approach ensures users always know exactly where to find actionable items and engagement opportunities, creating a predictable and intuitive experience throughout their entire journey on the site.

Impact

For Residents

Easy neighborhood discovery through interactive mapping and filtering

Clear civic participation pathways with consistent engagement tools

Complete meeting transparency with recordings and historical documentation

Real-time project updates through subscription and timeline features

For Professionals

Streamlined process navigation with three-tier architecture and clear timelines

Self-service resources organized by user type, reducing consultation needs

Comprehensive documentation with forms, guidelines, and requirements easily accessible

Appointment integration for efficient staff interaction when needed

For City Staff

Dramatic reduction in repetitive inquiries through strategic FAQ placement throughout site architecture

Centralized project information for improved coordination and public transparency

Reliable reference resources to direct callers to during interactions

Reduced administrative burden through improved self-service capabilities

The Result

We transformed a fragmented website into a comprehensive civic engagement platform that actively facilitates meaningful participation in Chicago’s development process. The new system doesn’t just organize information, it creates clear pathways for residents to stay informed and engaged while providing professionals with efficient self-service tools and giving city staff reliable resources to reference.

This project demonstrates how thoughtful information architecture and user experience design can bridge the gap between complex government processes and the diverse communities they serve, creating transparency and accessibility without sacrificing depth or accuracy.