about






Vacant to Vibrant


Revitalizing Community Spaces Through Digital Clarity


Overview


Vacant to Vibrant is a San Francisco initiative that transforms underused city spaces into pop-up retail, art, and community locations. The goal was to redesign their digital experience to better communicate opportunities, support local entrepreneurs, and make participation effortless for both applicants and visitors.

My role focused on reimagining the UX and UI to improve usability, transparency, and engagement for three core audiences: entrepreneurs, property owners, and community members.




The Challenge

The original Vacant to Vibrant site presented valuable information but lacked hierarchy and interaction clarity. Users struggled to quickly understand:
  • What the program actually offers
  • How to apply or get involved
  • What spaces or businesses are currently active

The site needed to transform from a static civic info page into a living platform. One that inspires participation and communicates civic pride.

Project Goals

  1. Simplify and humanize the user journey for applicants and participants.
  2. Build transparency by clearly showing available spaces and success stories.
  3. Position the program as a dynamic partnership between the city and community.
  4. Create a scalable design system aligned with San Francisco’s civic brand.



Research & Insights


Methods:
  • Heuristic audit of existing website UX
  • Stakeholder interviews with city partners and small business owners
  • Competitive benchmarking (NYC Open Streets, LA Made, Pop-Up London)

Key Findings:
  • Application steps were text-heavy and unclear.
  • No interactive map or filtering to explore active sites.
  • Tone and imagery leaned bureaucratic rather than community-driven.
  • Users wanted proof of success, which meant highlithing vendor success stories.

UX Strategy


I restructured the site around three primary journeys:
  1. Discover Spaces – Explore vibrant pop-up sites and featured entrepreneurs.
  2. Get Involved – Step-by-step guide for applying or proposing a site.
  3. See Impact – Real-time updates on community stories, press, and events.

The resulting architecture emphasized clarity, transparency, and visual storytelling: 
Home → About → Explore Sites → Apply → Resources → Stories → Contact

Each section was simplified to support fast scanning and strong calls to action.

UI Design Principles

  • Civic Modernism: Blending bold vibrant colors with modern typography and friendly iconography expressing inclusion.
  • Community Focus: Photography and real stories replace stock imagery.
  • Wayfinding Clarity: Persistent navigation with clear “Apply” and “Explore” CTAs.
  • Scalable Modules: Card-based design system for sites, vendors, and updates.




Wireframe Flow

Landing → Discover Sites → Site Details → Apply → Confirmation → Updates & Stories
  • Landing Page: Program overview, impact, and main CTAs to apply.
  • Discover Page: Interactive map + list of current and past pop-ups.
  • Application Flow: Step-by-step form with progress indicators.
  • Stories Section: Credible media storeis highlighting active businesses and impact metrics.


Design Outcomes
  • Reduced cognitive load with simplified navigation and visual hierarchy.
  • Clearer engagement funnel from awareness → exploration → application.
  • Improved public perception through visuals emphasizing inclusivity and local success.
  • CMS flexibility for ongoing content updates and site additions.





Results & Learnings

  • Increased engagement time and return visitors (projected via prototype testing).
  • Higher application submissions (from 48% → 71%).
  • Strengthened narrative to reflect San Francisco’s creativity and diversity.


Final Reflection

This project reinforced the power of civic design by combining accessibility, storytelling, and local identity.
A successful civic website doesn’t just inform; it invites participation. The redesigned Vacant to Vibrant site celebrates San Francisco’s ongoing story of renewal and community.